Question

在我的网站上，我需要设置'from-date'和'to-date'。为此，我有2个文本框。我使用了2个bootstrap日期选择器。日期选择器实际上工作正常，但是当我单击第一个文本框然后第二个文本框时，将显示两个日期选择器。我面临的问题是，我需要隐藏第一个日期选择器，并在单击第二个文本框时仅显示第二个日期选择器。

这是我试过的......

   $(document).mouseup(function (e) {
         var container = $(".txtFromDate");

             if (!container.is(e.target) // if the target of the click isn't the container...
                      && container.has(e.target).length === 0) // ... nor a descendant of the container
                      {
                         $('.dropdown-menu').hide();
                       }
   });

Answer 1

@Mariya Rose，

尝试这样，

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#txtFromDate" ).datepicker();
 $( "#txtToDate" ).datepicker();
      });
      </script>

    <input type="text" id="txtFromDate">
<input type="text" id="txtToDate">

Answer 2

如果您使用像

这样的bootstrap datetimepicker

<div id="datetimepicker${YearID}" class="datepicker input-group controls">
      <input id="txtStartDate${YearID}" value="${formatDate(startDate)}" class="form-control" placeholder="Select datepicker" data-rule-required="true" data-format="yyyy-MM-dd" type="text" data-rule-required='true' />
      <span class="input-group-addon">
           <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span>
      </span>
</div>

然后你需要像这样调用datetimepicker

$('div[id^="datetimepicker"]').datetimepicker();

通过这种方式，您也可以在Jquery模板绑定中使用它。

在一个页面中使用多个bootstrap-datepicker

2 个答案: