Set dates for jQuery Date Range Picker from input values

Question

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

Solution 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.

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

Solution 3

If use multiple inputs

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

Comments

[Ross Berenson]

Thanks @The F for the effort you put towards your answers. Unfortunately it didn't yeild any results different than the many variations that I've tried. I tried something very similar to yours sans the functions. The datepicker just won't pick up the default values for some reason as an attribute or set in js. Event with the various datepicker options. Hmmm...

[The F]

have you made sure to change the format option, and are triggering your js after the dom is loaded? $(function(){}); I needed similar functionality in a project, and the Date object did the trick. dont give up (:

[The F]

For the record, try this code with the example page. I just tested this on the #range200 + #range201 (because of the 2 inputs), and I want to assure you that this works. It must be a small thing you are overlooking. good luck!

[Ross Berenson]

The F - Thanks for your help. I was overlooking something. I tried to set it again, after the DOM loaded. Basically what @andybeli above recommended to do. I tried it before but I just realizes I overlooked something. Starring at something for a long time will make you miss the obvious! I just needed this: $('.datepicker-to-from').data('dateRangePicker').setDateRang‌​e('10/31/2012 11:00 AM','12/25/2014 21:00 PM'); Feel like a fool, I kept putting the wrong thing as the selector and not even second guessing that. It's been a long week... Thanks for everyones help!