Set dates for jQuery Date Range Picker from input values

Ross Berenson picture Ross Berenson · Apr 9, 2015 · Viewed 31.7k times · Source

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

Answer

Hari Om Gupta picture Hari Om Gupta · Feb 9, 2019

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'
    }