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

[link]https://rawgit.com/longbill/jquery-date-range-picker/master/index.html[/link] says if you provide no setting you get the default value. Just do to the demos and you can see the default value config. — chetank, Apr 09 '15 at 22:06
you could force/set the date range on dateRangePicker initialization: `$(dom).data('dateRangePicker') .setDateRange('2013-11-20','2013-11-25'); ` — andybeli, Apr 09 '15 at 22:16
user3460763 - Thanks for your response. I did try that. I cleared my config and it oddly did not work. The demo on his site doesn't work either. When you click the input that has a preset value, the calendar doesn't actually function. At least I don't think it functions the way it should. If you click the input, nothing happens. You need to clear the value and then click. That makes the date picker appear. Ideally the date picker would show with the preset value. :/ — Ross Berenson, Apr 10 '15 at 03:16
andybeli - Thanks for your response. I tried that too with no luck. Not sure what's going on. — Ross Berenson, Apr 10 '15 at 03:17

score 5 · Answer 1 · answered Feb 09 '19 at 07:53

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

score 1 · Accepted Answer · edited May 23 '17 at 12:08

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.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 09 '15 at 23:05

The F

3,647
1
20
28

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... – Ross Berenson Apr 10 '15 at 03:26
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 Apr 10 '15 at 05:54
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! – The F Apr 10 '15 at 17:02
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').setDateRange('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! – Ross Berenson Apr 10 '15 at 20:05

score 1 · Answer 3 · answered Jul 31 '21 at 05:29

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

Set dates for jQuery Date Range Picker from input values

3 Answers3

Linked