bootstrap-datepicker: 选择特定日期时显示DIV

Question

如何在选择特定日期时 show/reveal DIV 元素并在选择另一个日期时再次隐藏它？

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

  <style>
    #example {
      display: none;
      color: green;
      font-weight: bold;
    }

  </style>
</head>

<body>
  <div id="example">Yay my favorate day!</div>
  Please select <b>11/07/2017</b> to show an example:
  <br />
  <div id="myCalendar"></div>
  <input type="hidden" id="hiddenInput">

  <script>
    $(function() {
      $('#myCalendar').datepicker({
        format: 'mm-dd-yyyy',
        weekStart: 1,
        maxViewMode: 2,
        todayBtn: "linked",
        daysOfWeekHighlighted: "0,6",
        todayHighlight: true
      }).on('changeDate', function() {
        $('#hiddenInput').val(
          $('#myCalendar').datepicker('getFormattedDate')
        );
      }).change(function() {
        $("#example").toggle($(this).val() === "11-07-2017");
      });
    });

  </script>
</body>

Demo on JSFiddle

Answer 1

您可以通过检查 datepicker 的值来完成此操作。对于此示例，我使用 11/07/2017 作为您要检查的日期（又名 2017 年 11 月 17 日）。

$(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy'
    }).change(function () {
      $("#example").toggle($(this).val() === "11-07-2017");
    });
});

#example {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="example">Yay my favorate day!</div>
Please select <b>11/07/2017</b> to show an example:
<br />
<input type="text" class="datepicker" placeholder="Date..." name="date">

Answer 2

针对不同的框架（和 vanilla js）有多种方法。例如，一个简单的例子，如果您使用 angularjs（不需要太多 javascript 代码）：

<input data-provide="datepicker" ng-model='yourdate'>
<div id='divExample' ng-show='yourdate==somevalue'></div>

Answer 3

你可以使用 changeDate event, as the docs 说：

All events have extra data attached to the event object that is passed to any event handlers

date: the relevant Date object, in local timezone. For a multidate picker, this will be the latest date picked.

您可以检查选定的日期（使用 setter，如 getDate()、getMonth() 和 getFullYear()）以及使用 jQuery show() and hide().

这是一个活生生的例子：

$(function() {
  $('#myCalendar').datepicker({
    format: 'mm-dd-yyyy',
    weekStart: 1,
    maxViewMode: 2,
    todayBtn: "linked",
    daysOfWeekHighlighted: "0,6",
    todayHighlight: true
  }).on('changeDate', function(e) {
    if( e.date && e.date.getDate() == 7 &&
        e.date.getMonth() == 10 && 
        e.date.getFullYear() == 2017 ){
      $("#example").show();
    } else {
      $("#example").hide();
    }
    $('#hiddenInput').val(
      $('#myCalendar').datepicker('getFormattedDate')
    );
  });
});

#example {
  display: none;
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div id="example">Yay my favorate day!</div>
Please select <b>11/07/2017</b> to show an example:
<br />
<div id="myCalendar"></div>
<input type="hidden" id="hiddenInput">

bootstrap-datepicker: 选择特定日期时显示DIV

bootstrap-datepicker: Show DIV when selecting specific date

javascript

jquery

datepicker

bootstrap-datepicker

bootstrap-4

Demo on JSFiddle