1

我正在尝试创建两个日期输入，而不是在日期字段中显示年份。我希望格式更容易阅读 - 所以“Fri, Apr 19”而不是“2013/4/19”。我将更传统的格式存储在同时更新的备用字段中。这很好用，除了当我选择未来一年的日期然后返回点击相同的日期输入时。它会加载当前年份的日期。这是一些测试代码，用于显示情况以及我试图解决该行为的尝试。

<form>
    <input type="text" name="from" id="ff_from" class="date" value=""  />
    <input type="text" name="to" id="ff_to" class="date" value="" />
    <div class="extra">
        <p>Formatted version of dates</p>
        <input type="text" disabled id="ff_from_formatted" value="" />
        <input type="text" disabled id="ff_to_formatted" value="" />
    </div>
</form>

<script>
// add n number of days
Date.prototype.addDays = function(n) {
    this.setDate(this.getDate()+n);
    return this;
};

$("#ff_from").datepicker({ 
    dateFormat: "D, M dd",
    altField:$("#ff_from_formatted"),
    altFormat: "yy/mm/dd",
    minDate:0,
    onClose:function(){
        $("#ff_to").focus();
    }
}).change(function(){
    var fromDate=new Date($("#ff_from_formatted").val());
    var toDate=new Date($("#ff_to_formatted").val());
    minToDate=fromDate.addDays(1);
    if (fromDate >= toDate) {
        $("#ff_to").datepicker("setDate", minToDate);
    }
    $("#ff_to").datepicker("option","minDate", minToDate);
});
$("#ff_to").datepicker({ 
    dateFormat: "D, M dd",
    altField:$("#ff_to_formatted"),
    altFormat: "yy/mm/dd",
    minDate:+1
});
</script>

在这里测试：http: //jsfiddle.net/ZpfAB/9/

重现问题

  1. 在第一个字段中选择 2014 年的日期
  2. 再次单击输入字段。它将改为加载当前日期。

编辑：下面的最终解决方案感谢@clav 的帮助 - 这涉及删除 altFields 并改用隐藏的输入字段。我使用了 opacity:0 而不是 display:none，因为在使用 display:none 时我在 ff_to 字段上遇到了奇怪的错误。

http://jsfiddle.net/ZpfAB/33/

<form>
    <input type="text" id="ff_from_display" class="date"/>
    <input type="text" name="from" id="ff_from" class="date" style="opacity:0;width:0;"/>
    <input type="text" id="ff_to_display" class="date"/>
    <input type="text" name="to" id="ff_to" class="date" style="opacity:0;width:0;" />
</form>

<script>
// add n number of days
Date.prototype.addDays = function(n) {
    this.setDate(this.getDate()+n);
    return this;
};

$('#ff_from_display').focus(function() {
    $("#ff_from").datepicker('show');
});

$('#ff_to_display').focus(function() {
    $("#ff_to").datepicker('show');
});

$("#ff_from").datepicker({ 
    dateFormat: "yy/mm/dd",
    minDate:0,
    onClose:function(){  
        $("#ff_to_display").focus();
    }
}).change(function(){
    var fromDate = $("#ff_from").datepicker('getDate');
    $('#ff_from_display').val($.datepicker.formatDate('D, M dd', fromDate));
    var toDate=new Date($("#ff_to_formatted").val());
    minToDate=fromDate.addDays(1);
    if (fromDate >= toDate) {
        $("#ff_to").datepicker("setDate", minToDate);
    }
    $("#ff_to").datepicker("option","minDate", minToDate);
});

$("#ff_to").datepicker({ 
    dateFormat: "yy/mm/dd",
    minDate:+1
}).change(function(){
    var toDate = $("#ff_to").datepicker('getDate');
    $('#ff_to_display').val($.datepicker.formatDate('D, M dd', toDate));
});
</script>
4

1 回答 1

1

日期选择器似乎有一个错误，即使在beforeShow函数中手动将日期设置为正确的日期，年份仍然显示不正确。一种有点hack的解决方法是将格式设置为包含年份的格式，然后隐藏日期选择器输入字段，创建不同的文本字段以显示日期并在用户单击“显示”字段时显示日期选择器. 然后在onClose回调中，您可以通过使用格式化所选日期来设置显示字段的值$.datepicker.formatDate('D, M dd', date)。像这样的东西：

<!-- new display field that will show the selected date in "D, M dd" format -->
<input type="text" id="ff_display" class="date"/> 
<!-- hide the real datepicker text field -->
<input type="text" name="from" id="ff_from" class="date" style="display: none;"/>

// show the datepicker when the user clicks the visible "display" date field
$('#ff_display').click(function() {
    $("#ff_from").datepicker('show');
});

$("#ff_from").datepicker({ 
    dateFormat: "yy/mm/dd", // date format contains year so it won't get lost
    gotoCurrent: true,
    altField:$("#ff_from_formatted"),
    altFormat: "yy/mm/dd",
    onClose:function(){  
        // get the selected date, put it in nice format and set value of display field
        var date = $("#ff_from").datepicker('getDate');
        $('#ff_display').val($.datepicker.formatDate('D, M dd', date));
        $("#ff_to").focus();
    }
.... rest of datepicker init code

这是一个更新的小提琴，我刚刚做了第一次约会，但您可以看到如何将相同的逻辑应用于其他日期字段。

于 2013-04-17T01:53:59.267 回答