javascript - 如何在 jQuery 日期选择器的输入中制作自定义日期显示文本？

Question

我遇到了以下问题:我有一个 jQuery 日期选择器，它绑定(bind)到 <input> field 。我想要的是，而不是输入字段“MM/dd/yyyy”中的标准日期显示能够显示当前所选日期的一周的开始和结束，例如

如果选择 2012 年 12 月 25 日， 然后在输入字段中我想显示“Dec.24 - Dec.30”

计算开始/结束工作日和文本格式不是问题，我已经有了。 我遇到的问题是当尝试使用

将输入字段的值设置为自定义文本表示形式时

$("#datepickerInput").val('custom text')

然后日期选择器日期将设置为今天的日期，而不是保留其之前设置的值。

有没有办法以某种方式实现这一目标？

谢谢

Answer 1

这是一个使用 moment.js 日期库来调整日期和输出格式的解决方案。当使用具有许多方法来比较、减去、添加和操作格式的库时，解析日期要容易得多。

 $("#datepicker").datepicker().change(function() {
    var d = $(this).datepicker('getDate');
    $(this).val(formatDatePickerDisplay(d))
})
/* trigger change to update display on page load*/
.change();


function formatDatePickerDisplay(d) {   
    if (!d) {
        return '';
    }
    var currDate = moment(d),
        monday = moment(currDate).day(1).format('MMM D'),
        friday = moment(currDate).day(5).format('MMM D');

    return monday + ' - ' + friday;

}

演示:http://jsfiddle.net/7tTnV/3/

Moment.js 文档:http://momentjs.com/docs/#/use-it/

编辑:到目前为止提供的两种解决方案的唯一问题是datepicker无法将显示的值解析为当前日期以在您打开它时突出显示。有多种显示日期选择器的替代方法，这些方法允许您更新将显示给用户的替代字段，并且不会显示实际的日期选择器输入。这将允许正确突出显示当前日期