簡體   English   中英

每當我在 jquery ui datepicker 中更改月/年時,如何獲取該月的第一個日期和最后一個日期

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

我使用 jquery-ui 多日期選擇器創建了一個內聯日歷。 每當我更改月/年時,我都想要一個月的第一個和最后一個日期(通過單擊上一個/下一個按鈕或從列表中選擇某個月/年)

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

此處嘗試 JavaScript 函數。 我希望您可以將它與您的代碼一起使用

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM