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

我遇到了以下问题：我有一个jQuery日期选择器，它绑定到一个

字段。例如，我希望能够显示当前所选日期的开始和结束，而不是输入字段“MM/dd/yyyy”中的标准日期显示

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

计算开始/结束周天数和文本格式不是问题，我已经有了。 我遇到的问题是，试图使用

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

然后将datepicker日期设置为todays date，而不是保留其先前设置的值

有没有办法做到这一点

谢谢

试试这个：

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

试试这个：

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

---

这是一个使用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;

}

演示：

Moment.js文档：

---

编辑：目前提供的两种解决方案的唯一问题是，

日期选择器

无法将显示的值解析为当前日期，以便在打开时突出显示。显示datepiacker有其他方法，允许您更新将显示给用户的备用字段，而实际的日期选择器输入将不会显示。这将允许正确的当前日期突出显示

这里有一个使用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;

}

演示：

Moment.js文档：

编辑：目前提供的两种解决方案的唯一问题是，

日期选择器

无法将显示的值解析为当前日期，以便在打开时突出显示。显示datepiacker有其他方法，允许您更新将显示给用户的备用字段，而实际的日期选择器输入将不会显示。这将允许正确的当前日期突出显示

演示：

我从@Palash借用了一些

getMonday

和

getSunday

逻辑（但修复了一个bug）

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

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

$（'#dateRange'）。日期选择器({
altField:“#隐藏日期”，
第一天：1，
onSelect:函数（日期文本、日期范围）{
var dateRange=$（dateRange）；
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”，
“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
hiddenDate=$（“#hiddenDate”），
日期=新日期（日期文本），
DayOfWeek=日期。getDay（），
mondayOffset=theDate.getDate（）-DayOfWeek+（DayOfWeek==0？-6:1），
sundayOffset=Date.getDate（）-DayOfWeek+（DayOfWeek==0？0:7），
星期一=新日期（日期设置日期（星期一偏移）），
星期日=新日期（日期设置日期（星期日偏移）），
mondayText=months[monday.getMonth（）]+'.+monday.getDate（），
sundayText=月[sunday.getMonth（）]+'.+sunday.getDate（），
rangeText=mondayText+'-'+sundayText；
$（this）.val（rangeText）；
$（日期范围）.data（'rangetext'，rangetext）；
},
beforeShow:函数（日期范围）{
var hiddenDate=$（“#hiddenDate”）；
$（dateRange.val（hiddenDate.val（））；
},
onClose:函数（selectedDateText、dateRange）{
日期范围=$（日期范围）；
if（$（this.val（）=''）{
$（'hiddenDate'）.val（''）；
}否则{
if（selectedDateText.indexOf（'-'）<0&&dateRange.data（'rangetext'））{
console.log（'data-rangetext'，dateRange.data（'rangetext'）；
$（this.val（dateRange.data（'rangetext'））；
}
}
}
});​

此处演示：

我从@Palash借用了一些

getMonday

和

getSunday

逻辑（但修复了一个bug）

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

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

$（'#dateRange'）。日期选择器({
altField:“#隐藏日期”，
第一天：1，
onSelect:函数（日期文本、日期范围）{
var dateRange=$（dateRange）；
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”，
“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
hiddenDate=$（“#hiddenDate”），
日期=新日期（日期文本），
DayOfWeek=日期。getDay（），
mondayOffset=theDate.getDate（）-DayOfWeek+（DayOfWeek==0？-6:1），
sundayOffset=Date.getDate（）-DayOfWeek+（DayOfWeek==0？0:7），
星期一=新日期（日期设置日期（星期一偏移）），
星期日=新日期（日期设置日期（星期日偏移）），
mondayText=months[monday.getMonth（）]+'.+monday.getDate（），
sundayText=月[sunday.getMonth（）]+'.+sunday.getDate（），
rangeText=mondayText+'-'+sundayText；
$（this）.val（rangeText）；
$（日期范围）.data（'rangetext'，rangetext）；
},
beforeShow:函数（日期范围）{
var hiddenDate=$（“#hiddenDate”）；
$（dateRange.val（hiddenDate.val（））；
},
onClose:函数（selectedDateText、dateRange）{
日期范围=$（日期范围）；
if（$（this.val（）=''）{
$（'hiddenDate'）.val（''）；
}否则{
if（selectedDateText.indexOf（'-'）<0&&dateRange.data（'rangetext'））{