根据输入值设置jQuery日期范围选择器的日期 [英] Set dates for jQuery Date Range Picker from input values

问题描述

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属性.任何见识将不胜感激.

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.

这是我的代码:

<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()
});

更新4/10/2015: 在andybeli和The F的帮助下，我解决了这个问题.对于遇到类似情况的人，最终的JS代码看起来像这样.

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.

$('.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);

推荐答案

该插件需要一个实际的date对象才能起作用.幸运的是，您的value ="字符串足以使用new Date()创建此类对象:

The plugin needs an actual date object to function. luckily your value="" string is enough to create such object using 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());
  }
  });

如果您绝对需要显示AM/PM，请检查此

If you absolutely need to show AM/PM check this answer. It shouldnt be to hard to adapt this.

标准的setter和getter以及$(dom).setDate()可能会很麻烦，因为您要处理两个输入字段，它们始终保持所需的值.

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.

我从w3 js窃取了addZero函数，您可以查看日期了解更多信息信息.

I stole the addZero function from w3 js, you check out Dates for more information.

这篇关于根据输入值设置jQuery日期范围选择器的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！