我有两个日期选择器,从和至,我想将明年设置为日期选择器

时间:2019-07-18 12:40:23

标签: jquery html datepicker

我有两个日期选择器,即“发件人”和“发件人”

see image

从“日期选择器”和“至日期选择器”中选择月份和年份时,我想要的是自动设置月份和年份,但年份应加一

HTML

<label for="startDate">From :</label>
<input name="startDate"id="startDate" class="date-pickerfrom" />

<label for="startDate">To :</label>
<input name="startDate"id="startDate" class="date-pickerto" />

CSS

.ui-datepicker-calendar {
     display: none;
} 

JavaScript

  $(function() {
      $('.date-pickerfrom').datepicker( {
           changeMonth: true,
           changeYear: true,
           showButtonPanel: true,
           dateFormat: 'MM yy',
           onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
           }
      });
  });

 $(function() {
     $('.date-pickerto').datepicker( {
          changeMonth: true,
          changeYear: true,
          showButtonPanel: true,
          dateFormat: 'MM yy',
          onClose: function(dateText, inst) { 
              var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
              var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
              $(this).datepicker('setDate', new Date(+year, month, 1));
        }
    });
}); 

See Code

1 个答案:

答案 0 :(得分:1)

只需将代码中的onClose扩展为日期即可

onClose: function(dateText, inst) {
  var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
  var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

  var fDate = new Date(year, month, 1)
  $(this).datepicker('setDate', fDate);

  var tDate = new Date(fDate.setFullYear(fDate.getFullYear() + 1));
  $(".date-pickerto").datepicker("setDate", tDate)
}

fiddle