https://github.com/longbill/jquery-date-range-picker
我的一切工作都很顺利,但我似乎无法让选择器使用我在中设置的默认值。有两个输入,开始日期和结束日期。我有一个值=""两者中的日期应该是datepicker的默认日期。然后,用户可以更改这些日期。
我玩了一些不同的想法,但我无法获取任何东西来获取输入的值属性。任何见解将不胜感激。
这是我的代码:
<div class="datepicker-to-from">
<input type="date" id="startTimestamp" class="date-picker" value="11/18/2012 05:45 AM">
<input type="date" id="endTimestamp" class="date-picker" value="04/09/2014 5:00 PM">
</div>
$('.datepicker-to-from').dateRangePicker({
format: 'MM/DD/YYYY HH:mm A',
showShortcuts: false,
time: {
enabled: true
},
getValue: function(){
$('#startTimestamp').val() + ' to ' + $('#endTimestamp').val();
},
setValue: function(){
$('#startTimestamp').val();
$('#endTimestamp').val();
},
startDate: $('#startTimestamp').val()
});
更新2015年4月10日: 在得到了andybeli和F的帮助之后,我解决了这个问题。对于那些遇到类似情况的人来说,最终的JS代码看起来像这样。
$('.datepicker-to-from').dateRangePicker({
format: 'MM/DD/YYYY HH:mm A',
showShortcuts: false,
time: {
enabled: true
},
setValue: function(s,s1,s2){
$('#startTimestamp').val(s1);
$('#endTimestamp').val(s2);
},
});
var startDate = $('#startTimestamp').val();
var endDate = $('#endTimestamp').val();
$('.datepicker-to-from').data('dateRangePicker').setDateRange(startDate,endDate);
答案 0 :(得分:1)
插件需要一个实际的日期对象才能运行。幸运的是你的价值=&#34;&#34; string足以使用new Date()
:
<div class="datepicker-to-from">
<input type="date" id="startTimestamp" class="date-picker" value="11/18/2012 05:45">
<input type="date" id="endTimestamp" class="date-picker" value="04/09/2014 5:00">
</div>
$(function(){
$('.datepicker-to-from').dateRangePicker({
format: 'MM/DD/YYYY HH:mm',
showShortcuts: false,
time: {
enabled: true
}
});
// get values and create Date objects
var date1 = new Date($('#startTimestamp').val());
var date2 = new Date($('#endTimestamp').val());
// set the values
$('#startTimestamp).val(fancy_date(date1));
$('#endTimestamp').val(fancy_date(date2))
// formatting
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function fancy_date(dateObj) {
return addZero(dateObj.getMonth()) +
'/' + addZero(dateObj.getDate()) +
'/' + addZero(dateObj.getFullYear()) +
' ' + addZero(dateObj.getHours()) +
':' + addZero(dateObj.getMinutes());
}
});
如果您绝对需要显示上午/下午检查此answer。不应该很难适应这一点。
标准的setter和getter以及$(dom).setDate()
可能会很痛苦,因为你正在处理两个输入字段,无论如何都要保存你想要的值。
我从w3 js中窃取了addZero函数,您可以查看Dates以获取更多信息。
答案 1 :(得分:1)
如果使用多个输入
var fromDate = new Date();
$('input[id="dates-available-from"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoApply:true,
locale: {
format: 'YYYY-MM-DD'
},
minDate:new Date()
},
function(start, end, label) {
fromDate = start.format('YYYY-MM-DD');
$('input[id="dates-available-to"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoApply:true,
locale: {
format: 'YYYY-MM-DD'
},
minDate:fromDate
});
});
答案 2 :(得分:0)
在Daterangepicker中,我们必须在startDate和endDate参数中传递值。
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
注意:在这里,我们必须以“ m / d / Y”格式传递日期,因为这是默认类型,除非您未在语言环境数组中指定格式。
locale: {
format: 'M/DD hh:mm A'
}