datepicker OnSelect is not working, when it has multidatepicker

Question

I made a inline calendar, by using jquery-ui datepicker, I've used multiDatePicker also in it. But on click on some particular button I want all the dates which are assigned into multiDatePicker will be removes and only the clicked date will be show as selected.

my code is like this:

<!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>

here I'm not able to get the alert inside onSelect? can anyone help me on this.....

why are you using both `multidatespicker` and `datepicker` on the same object — Arun P Johny, Mar 02 '16 at 09:22
Because I'm developing something where I need to show some selected days as a symbol of bidding details(to show on current month, which dates has bids), and on click of some particular date I need to filter the list of bidding details(it'll show only that bids, which occurred on that date only) — Suparna, Mar 02 '16 at 09:29

Arun P Johny · Accepted Answer · 2016-03-02T10:12:40.350

You can just pass the onSelect to the 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>

thank you sir, but how to clear the previously selected dates, onclick of any particular date. — Suparna, Mar 02 '16 at 09:33
oh, my mistake, didn't notice that...thanks, but I've to make it for any day — Suparna, Mar 02 '16 at 10:03
and in the multitidatepicker date array will contain only that clicked date — Suparna, Mar 02 '16 at 10:07

datepicker OnSelect is not working, when it has multidatepicker

1 Answers1