简体   繁体   中英

how to get the first date and last date of the month whenever I change the month/year in jquery ui datepicker

I've created an inline calendar using jquery-ui multidate picker. I want the first and last date of a month whenever I change the month/year(by clicking on previous/next button or choosing some month/year from list)

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

        $('#calendar').multiDatesPicker({
          changeYear: true,
          changeMonth: true,
          disabled: false,
          addDates: dates,
          onSelect: function() {
            var date = $(this).datepicker('getDate');
            $('#calendar').multiDatesPicker('resetDates').multiDatesPicker('addDates', [date]);
          },
          onChangeMonthYear: function(){
            // alert("Hii, I'm here");
          }
        });
      });     
    </script>

    <style type="text/css">
      .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
        border: 1px solid #d3d3d3 !important;
        background: #3B8CC5 !important;
      }
      .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="calendar"></div>
  </body>
</html>

Try the JavaScript function here . I hope you can use it with your code with little changes under

 onChangeMonthYear: function(){
          // alert("Hii, I'm here");
 }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM