我遇到以下问题:我有一个绑定到<input>
字段的jQuery日期选择器。我想要的是,而不是输入字段“MM / dd / yyyy”中的标准日期显示,以便能够显示当前所选日期的开始和结束时间,例如
如果选择2012年12月25日, 然后在输入字段中我想显示“Dec.24 - Dec.30”
计算开始/结束周日和文本格式化不是问题,我已经拥有它。 我遇到的问题是尝试使用
将输入字段的值设置为自定义文本表示$("#datepickerInput").val('custom text')
然后将datepicker日期设置为今天的日期,而不是保留其先前设置的值。
有没有办法以某种方式实现这一目标?
感谢
答案 0 :(得分:1)
试试这个:
var d = $('#datepickerInput').datepicker('getDate');
$('#datepickerInput').val(getMonday(d) + ' - ' + getSunday(d));
答案 1 :(得分: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;
}
DEMO:http://jsfiddle.net/7tTnV/3/
Moment.js docs:http://momentjs.com/docs/#/use-it/
编辑:目前为止提供的两个解决方案的唯一问题是,datepicker
无法将显示的值解析为当前日期,以便在打开时突出显示。还有其他方法可以显示datepiacker,它允许您更新将显示给用户的备用字段,并且不会显示实际的日期选择器输入。这将允许正确的当前日期突出显示
答案 2 :(得分:1)
在这里演示: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'));
}
}
}
});