如何在jQuery datepicker的輸入中使自定義日期顯示文本？

Question

我在以下方面遇到麻煩：我有一個綁定到<input>字段的jQuery datepicker。 我想要的是，例如，不是在輸入字段“ MM / dd / yyyy”中顯示標准日期，而是能夠顯示當前所選日期的一周的開始和結束時間，例如

如果選擇2012年12月25日，則在輸入字段中我想顯示“ Dec.24-Dec.30”

計算開始/結束的工作日和文本格式不是問題，我已經有了。 我遇到的問題是嘗試使用以下命令將輸入​​字段的值設置為自定義文本表示形式時

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

然后將日期選擇器日期設置為今天的日期，而不是保留其先前設置的值。

有辦法以某種方式實現這一目標嗎？

謝謝

Answer 1

嘗試這個：

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

此處演示

Answer 2

這是一個使用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的方法，這些方法可以讓您更新將顯示給用戶的替代字段，而不會顯示實際的日期選擇器輸入。 這樣可以正確顯示當前日期

Answer 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'));
            }
        }
    }
});​