Set dates for jQuery Date Range Picker from input

问题:

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.

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.

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.

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

回答1:

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

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

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.

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

回答2:

In Daterangepicker we have to pass values in startDate and endDate parameters.

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

locale: {
      format: 'M/DD hh:mm A'
    }