Question

HTML：

Start Date: <input type="text" name="startDate" id="datepicker6" value="" />

Jquery的：

$("#datepicker6").datepicker({
    dateFormat: 'M yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: '2000:'+(new Date).getFullYear(),
    beforeShow: function(){ 
        $('#hideMonth').html('.ui-datepicker-calendar{display:none;}'); 
    },
        onClose: function(dateText, inst) 
    {
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
    }
});

我对datepicker的当前输出：

这是我的问题：
（1）

如果我单击文本框，从下拉列表中选择月份和年份，然后单击完成按钮，文本框应显示该值。如果我单击文本框，我在datepicker外面单击，文本框不应显示该值。我该如何修改？

（2）

我从下拉列表中选择月份和年份后，下次选择时，如何将值设置到下拉列表中？< / p>

Answer 1

日期选择器

 $(document).ready(function() {
        var year_month='';

        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'yy-mm',
            onClose: function(dateText, inst) {
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
});

Answer 2

要删除该月的所有日期，这是一个使用css的简单解决方案，同时管理按钮上或clickpicker外部的click事件以处理和错误，并重新设置datepicker本身我的建议是：

＆＃13;

$(document).on('mousedown', function(e) {
  var datepickObj = $('.ui-datepicker');
  if (datepickObj.is(':visible')) {
    var target = (e.target) ? e.target : e.srcElement;
    if (datepickObj.find(target).length > 0) {
      return;
    }
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#datepicker6").val('');
    if ($('.error').length == 0) {
      datepickObj.css({'top': datepickObj.position().top + 20 + 'px'});
      $("#datepicker6").after("<div class='error'>The value must be set</div>");
    }
  }
});
$(function () {
  $("#datepicker6").datepicker({
    dateFormat: 'M yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: '2000:'+(new Date).getFullYear(),
    onClose: function(dateText, inst) {
      var e = window.event || window.Event;
      var target = (e.target) ? e.target : e.srcElement;
      if ($(target).is('button.ui-datepicker-close')) {
        $('.error').remove();
        var newDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
      }
    }
  });
});

＆＃13;

.ui-datepicker-calendar {
  display: none;
}
.error {
  color: red;
  margin-bottom: 20px;
}

＆＃13;

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<form>
    Start Date:<br>
    <input type="text" name="startDate" id="datepicker6" value="" />
    <br>
</form>

＆＃13;

Answer 3

不是设置日期onClose，而是设置日期onChangeMonthYear 由于您想使用Done按钮，可能是这样的：

var monthOrYearChanged = false;

$("#datepicker6").datepicker({
    dateFormat: 'M yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: '2000:'+(new Date).getFullYear(),
    beforeShow: function(){ 
        $('#hideMonth').html('.ui-datepicker-calendar{display:none;}'); 
    },
    onChangeMonthYear: function(year, month, inst) {
        monthOrYearChanged = true;
    },
    onClose: function(dateText, inst) 
    {
        if(monthOrYearChanged){
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
            monthOrYearChanged = false;
        }
    }
});

关于第二个问题，除非我弄错了，否则已经由DatePicker自动处理。

jquery - 关于datepicker的问题

3 个答案: