从输入值设置 jQuery 日期范围选择器的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29549542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set dates for jQuery Date Range Picker from input values
提问by Ross Berenson
https://github.com/longbill/jquery-date-range-picker
https://github.com/longbill/jquery-date-range-picker
I have everything working quite well but I can't seem to get the picker to use the default values that I set in the . There are two inputs, a start date and end date. I have a value="" with a date in both which should be the default date for the datepicker. Then the user has the ability to change those dates.
我一切正常，但我似乎无法让选择器使用我在 . 有两个输入，开始日期和结束日期。我有一个 value="" 和一个日期，这应该是 datepicker 的默认日期。然后用户可以更改这些日期。
I've played with a few different ideas but I can't get anything to grab the input's value attribute. Any insight would be appreciated.
我玩过一些不同的想法，但我无法获得任何东西来获取输入的 value 属性。任何见解将不胜感激。
Here is my code:
这是我的代码：
<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()
});
UPDATE 4/10/2015:After help from both andybeli and The F, I solved the problem. The final JS code looks like this for those who run into a similar situation.
2015 年 4 月 10 日更新：在 andybeli 和 The 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);
采纳答案by The F
The plugin needs an actual date object to function. luckily your value="" string is enough to create such object using new Date():
该插件需要一个实际的日期对象才能运行。幸运的是，您的 value="" 字符串足以使用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());
}
});
If you absolutely need to show AM/PM check this answer. It shouldnt be to hard to adapt this.
如果您绝对需要显示 AM/PM 检查此答案。适应这一点应该不难。
The standard setters and getters, as well as the $(dom).setDate()will probably be a pain, since you are dealing with two input fields, that hold your desired values anyway.
标准的 setter 和 getter 以及 the$(dom).setDate()可能会很痛苦，因为您正在处理两个输入字段，无论如何都保存您想要的值。
I stole the addZero function from w3 js, you check out Datesfor more information.
我从 w3 js 中窃取了 addZero 函数，您可以查看Dates以获取更多信息。
回答by Hari Om Gupta
In Daterangepicker we have to pass values in startDate and endDate parameters.
在 Daterangepicker 中，我们必须在 startDate 和 endDate 参数中传递值。
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
Note: Here we have to pass the Date in "m/d/Y" format as this is default type, unless you have not specify the formate in locale array.
注意：这里我们必须以“m/d/Y”格式传递日期，因为这是默认类型，除非您没有在语言环境数组中指定格式。
locale: {
format: 'M/DD hh:mm A'
}
