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

【问题标题】：How to make a custom date display text in the input on a jQuery datepicker?如何在 jQuery 日期选择器的输入中制作自定义日期显示文本？
【发布时间】：2012-12-27 02:35:51
【问题描述】：

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

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

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

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

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

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

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

谢谢

【问题讨论】：

你有做过什么吗？还是你的尝试？或者你发现自己被困在哪里？我们需要的只是代码。请粘贴它或更好地为它制作小提琴。
您想要做的问题是，如果有自定义文本，DatePicker 将不知道您实际选择的日期。有可能做你想做的……但你必须很聪明。这不是直截了当的。
@Jai，下面的答案中有一些小提琴可以完全按照我的描述说明这个问题。欢迎任何想法:)
@AymanSafadi，我想我毕竟不是那么聪明，所以我在寻求帮助:) jQuery datepicker 中有一个名为“format”的属性，但它只是一个字符串太糟糕了。如果它是一个允许您返回自定义文本表示的函数，那就太好了，但它只是一个字符串。随时建议

标签： javascript jquery datepicker

【解决方案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 无法将显示的值解析为当前日期以在您打开它时突出显示。显示 datepiacker 的替代方法允许您更新将显示给用户的替代字段，并且不会显示实际的日期选择器输入。这将允许正确突出显示当前日期

【讨论】：

感谢您的回答，但这正是我的问题，日期选择器无法保留所选日期并始终将其重置为今天。我认为 datepicker 可能会保留其内部日期值，并且可以根据需要修改文本表示，但我想情况并非如此。就 altField 而言，这不是我要寻找的，因为我必须实现它的设计仅包括这个日期选择器。无论如何，谢谢
只需要一个日期选择器但更新另一个字段。简单的演示：jsfiddle.net/charlietfl/7tTnV/6 您可以将 datePicker 分配给一个按钮。看演示
这是另一种布局，使用日期选择器按钮选项，仅查看日期选择器按钮并填充其他字段jsfiddle.net/charlietfl/7tTnV/7
谢谢。你最后的小提琴正是我想要的

【解决方案2】：

试试这个：

var d = $('#datepickerInput').datepicker('getDate');
$('#datepickerInput').val(getMonday(d) + ' - ' + getSunday(d));

DEMO HERE

【讨论】：

感谢您的提琴。正如我在第一篇文章中提到的，文本表示的格式不是问题。困扰我的是当你选择某个日期时会发生什么。文本表示还可以，但是点击打开日期选择器，你会发现它总是选择今天。

【解决方案3】：

在这里演示：http://jsfiddle.net/2h7Sj/

我从@Palash 借用了一些getMonday 和getSunday 逻辑（但修复了一个错误）。

此解决方案允许您选择特定日期并选择日期范围。

HTML

<input type="text" id="dateRange" />
<input type="hidden" id="hiddenDate" />

JavaScript

$('#dateRange').datepicker({
    altField: '#hiddenDate',
    firstDay: 1,
    onSelect: function(dateText, dateRange) {
        var dateRange = $(dateRange);

        var months       = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            hiddenDate = $('#hiddenDate'),
            theDate = new Date(dateText),
            dayOfTheWeek = theDate.getDay(),
            mondayOffset = theDate.getDate() - dayOfTheWeek + (dayOfTheWeek == 0 ? -6 : 1),
            sundayOffset = theDate.getDate() - dayOfTheWeek + (dayOfTheWeek == 0 ? 0 : 7),
            monday       = new Date(theDate.setDate(mondayOffset)),
            sunday       = new Date(theDate.setDate(sundayOffset)),
            mondayText   = months[monday.getMonth()] + '. ' + monday.getDate(),
            sundayText   = months[sunday.getMonth()] + '. ' + sunday.getDate(),
            rangeText    = mondayText + ' - ' + sundayText;

        $(this).val(rangeText);
        $(dateRange).data('rangetext', rangeText);
    },
    beforeShow: function(dateRange) {
        var hiddenDate = $('#hiddenDate');
        $(dateRange).val(hiddenDate.val());
    },
    onClose: function(selectedDateText, dateRange) {
        dateRange = $(dateRange);

        if($(this).val() == '') {
            $('#hiddenDate').val('');
        } else {
            if(selectedDateText.indexOf('-') < 0 && dateRange.data('rangetext')) {
                console.log('data-rangetext', dateRange.data('rangetext'));
                $(this).val(dateRange.data('rangetext'));
            }
        }
    }
});

【讨论】：