當具有multidatepicker時，dateSeicker OnSelect不起作用

Question

我使用jquery-ui datepicker創建了一個內聯日歷，我也使用了multiDatePicker。 但是在點擊某個特定按鈕時，我希望刪除分配到multiDatePicker中的所有日期，並且只顯示所選的單擊日期。

我的代碼是這樣的：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>


  <script>
     $(function() {

        var today = new Date();
        var yesterday = (new Date()).setDate(today.getDate()-1); 
        var tomorrow = (new Date()).setDate(today.getDate()+1);
        var dayAfttomorrow = (new Date()).setDate(today.getDate()+2);
        var dayDayAfttomorrow = (new Date()).setDate(today.getDate()+3);
        var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow];


        $('#calender').multiDatesPicker({
           disabled: false,
           addDates: dates
        });

        $( "#calender" ).datepicker({ 
            changeYear: true,
            changeMonth: true,
            onSelect: function(dateStr) {
              // $('#calender').multiDatesPicker('resetDates', true);
              var date = $(this).datepicker('getDate');
              alert(date);
            }
        });

     });

  </script>
  <style type="text/css">
  /*.ui-state-highlight,*/ .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
     border: 1px solid green !important;
     /*background: green;*/
  }
  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
     border: 1px solid #d3d3d3 !important;
  }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     border: none !important;
  }
  /*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     background: green;
  }*/
  </style>


</head>
   <body>
      <!-- HTML --> 
      <div id="calender"></div>
   </body>
</html>

在這里，我無法在onSelect中獲得警報？ 誰可以幫我這個事.....

Answer 1

您可以將onSelect傳遞給multiDatesPicker

 $(function() { var today = new Date(); var yesterday = (new Date()).setDate(today.getDate() - 1); var tomorrow = (new Date()).setDate(today.getDate() + 1); var dayAfttomorrow = (new Date()).setDate(today.getDate() + 2); var dayDayAfttomorrow = (new Date()).setDate(today.getDate() + 3); var dates = [yesterday, today, tomorrow, dayAfttomorrow, dayDayAfttomorrow]; $('#calender').multiDatesPicker({ addDates: dates, onSelect: function(dateStr) { // $('#calender').multiDatesPicker('resetDates', true); var date = $(this).datepicker('getDate'); $('#calender').multiDatesPicker('resetDates').multiDatesPicker('addDates', [date]); console.log($('#calender').multiDatesPicker('getDates')) } }); });

 /*.ui-state-highlight,*/ .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid green !important; /*background: green;*/ } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #d3d3d3 !important; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none !important; } /*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: green; }*/

 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-2.1.4.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script> <div id="calender"></div>

當具有multidatepicker時，dateSeicker OnSelect不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2016-03-02 09:26:56

當具有multidatepicker時，dateSeicker OnSelect不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2016-03-02 09:26:56

解決方案1
2 已采納 2016-03-02 09:26:56