3

我通过使用 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 中获得警报？谁可以帮我这个事.....

4

1 回答 1

2

你可以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>

于 2016-03-02T09:26:56.177 回答