使用dateFormat和altFormat时，jQuqey UI返回错误的日期

Question

HTML

datepicker:<br />
<input id="datepicker-1" type="text"/>

的JavaScript

$(document).ready(function(){
    $("#datepicker-1").datepicker({
        dateFormat: "d M",
        numberOfMonths: 1,
        showButtonPanel: true,
        altFormat: "dd-mm-yy",
        minDate: new Date(2015, 4, 1),
        maxDate: new Date(2017, 6, 31),
        onSelect: function(){
            var myDate = $(this).datepicker('getDate'); 
            console.log('current date: ' + myDate);
        }
    })
});

jsFiddle http://jsfiddle.net/web_developer/cr3zo7xr/

例如，选择＆＃34; 2015年5月20日＆＃34;在datepicker中， getDate 方法显示2014年而不是2015年

如果我删除dateFormat: "d M" getDate 方法显示正确的日期

问题是：

为什么getDate方法在启用dateFormat: "d M"的情况下显示错误的年份？

Answer 1

您需要设置正确的dateFormat。如果您希望myDate采用'd M'格式，则可以执行以下操作：

var myDate = $.datepicker.formatDate('d M', $(this).datepicker('getDate'));

完整示例：

$(document).ready(function(){
    $("#datepicker-1").datepicker({
        dateFormat: "d M yy",
        numberOfMonths: 1,
        showButtonPanel: true,
        altFormat: "dd-mm-yy",
        minDate: new Date(2015, 4, 1),
        maxDate: new Date(2017, 6, 31),
        onSelect: function(){
            var myDate = $.datepicker.formatDate('d M', $(this).datepicker('getDate'));
            console.log(myDate);
        }
    })
});

Answer 2

dateFormat和altFormat存在一个小问题。

• dateFormat将更改当前输入的元素值，并将用于解析日期
• altFormat获取该值并使用 altField
指定的其他输入格式保存该值

您可以将此字段用作存储数据的隐藏输入。在下面的示例中，我将此字段保留为文本，以便您可以看到结果。

$(document).ready(function(){
     
    $("#datepicker-2").datepicker({dateFormat: 'dd-mm-yy'});
    $("#datepicker-1").datepicker({
        dateFormat: "d M",
        numberOfMonths: 1,
        showButtonPanel: true,
        altFormat: "dd-mm-yy",
        altField: '#alt-format',
        minDate: new Date(2015, 4, 1),
        maxDate: new Date(2017, 6, 31),
        onSelect: function(n, o){
            var myDate = $.datepicker.parseDate(o.settings.altFormat, $(o.settings.altField).val());  
                // this will parse the date of the hidden input with the format of altFormat
            $('#result').text('current date: ' + myDate);
          
          myDate.setDate(myDate.getDate() + 30);
          $('#datepicker-2').datepicker('setDate', myDate);
          
        }
    });
    
});

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>


datepicker:<br />
<input id="datepicker-1" type="text"/>
<input id="alt-format" type='text'/>

<input id="datepicker-2" type="text"/>


<br/><br/>
<div id='result'></div>