Question

我在下拉列表中有文本框用于选择日期范围，但是当选择日期下拉关闭时，我必须打开下拉列表并选择另一个日期..... 这是我的代码：

<ul class="wrapper" style="z-index: 1">
<li><button style="background: #ededed;">Transactions</button>
<ul id="dropdown" class="content" style="z-index: 1">
    <li><a id="a" href="#">Today's Transactions</a></li>
     <li><a id="b" href="#">Last 7 Days Transactions</a></li>
     <li><a id="c" href="#">Last 30 Days Transactions</a></li>
     <li><a>Select Custom Date <br><br>
     <div style="margin-top: -20px">
     <date-picker todateid="endDate" fromdateid="startDate"></date-picker>
      <span>From:</span>
      <span style="margin-left: 77px">To:</span><br>
      <input type="text" name="start_date" id="startdate" class="custom-date" readonly="" >
       <span class="dash">-</span>
       <input type="text" name="end_date" id="enddate" class="custom-date" readonly="">
       <input type="button" value="Clear" onclick="clearCalender()" style="height: 25px; width: 50px; margin-left: 125px; margin-top: 5px;">
       <input type="button" id="d" href="#" value="OK">
    </div></a>
  </li><a>
  <input type="button" name="closeBtn" class="button-trans" value="Close">
  </a>
  </ul>
</li>

使用Javascript：

$(document).ready(function() {
// Datepicker Popups calender to Choose date.
    $(function() {
        $("#startdate").datepicker({ maxDate: 0,minDate: '-3m',yearRange: "2015:2015"});
        // Pass the user selected date format.
        $("#format").change(function() 
        {
            $("#enddate").datepicker("option", "dateFormat", $(this).val());
        });
    });

    $(function() {
        $("#enddate").datepicker({ maxDate: 0,minDate: '-3m',yearRange: "2015:2015"});
        // Pass the user selected date format.
        $("#format").change(function() 
        {
            $("#startdate").datepicker("option", "dateFormat", $(this).val());         
        });
    });
});

Jquery：的jquery-UI-1.11.0.js

如何阻止datepicker关闭下拉列表？

示例：http://codepen.io/anon/pen/VejNav

Answer 1

请参阅此示例：http://jsfiddle.net/kevalbhatt18/4jy9131y/4/

的

的
$('.dropdown-menu input').click(function (e) { e.stopPropagation(); });

的

Answer 2

您可以采取以下方式：使用onSelect并制作datepicker inline

$(function() {
        $("#startdate").datepicker({ maxDate: 0,minDate: '-3m',yearRange: "2015:2015",
        onSelect: function() {       
           $(this).data('datepicker').inline = true;                               
        },
        onClose: function() {
           $(this).data('datepicker').inline = false;
        }});

<强> Working Fiddle

当你点击其他地方时，它会关闭。

修改

使用以下JQuery将为您工作。

$('button').click(function(){ $('.content').css('display','block'); }); $('#d').click(function(){ $('.content').css('display','none'); }); $('#closeBtn').click(function(){ $('.content').css('display','none'); });

<强> Updated Working Fiddle

如何防止选择日期的下拉关闭？

2 个答案: