bootstrap-datepicker：選擇特定日期時顯示DIV

Question

選擇特定日期時如何顯示/顯示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>

JSFiddle上的演示

Answer 1

您可以通過檢查datepicker的值來實現。 在這個例子中我使用11/07/2017為你檢查（又名二○一七年十一月一十七日）的日期。

 $(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事件，如文檔所述：

所有事件的事件對象都有附加的數據，這些數據將傳遞給任何事件處理程序

date ：相關的Date對象，以本地時區表示。 對於多日期選擇器，這將是最近選擇的日期。

您可以檢查選定的日期是什么（使用諸如getDate() ， getMonth()和getFullYear() ）以及使用jQuery show()和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

問題描述

JSFiddle上的演示

3 個解決方案

解決方案1
1 2017-11-14 22:06:27

解決方案2
0 2017-11-14 22:14:05

解決方案3
0 已采納 2017-11-15 09:47:53

bootstrap-datepicker：選擇特定日期時顯示DIV

問題描述

JSFiddle上的演示

3 個解決方案

解決方案1 1 2017-11-14 22:06:27

解決方案2 0 2017-11-14 22:14:05

解決方案3 0 已采納 2017-11-15 09:47:53

解決方案1
1 2017-11-14 22:06:27

解決方案2
0 2017-11-14 22:14:05

解決方案3
0 已采納 2017-11-15 09:47:53