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]rawgit.com/longbill/jquery-date-range-picker/master/index.html[/… 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
– chetank, Commented Apr 9, 2015 at 22:06
you could force/set the date range on dateRangePicker initialization: $(dom).data('dateRangePicker') .setDateRange('2013-11-20','2013-11-25'); — andybeli
– andybeli, Commented Apr 9, 2015 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
– Ross Berenson, Commented Apr 10, 2015 at 3:16
andybeli - Thanks for your response. I tried that too with no luck. Not sure what's going on. — Ross Berenson
– Ross Berenson, Commented Apr 10, 2015 at 3:17

Hari Om Gupta · Accepted Answer · 2019-02-09 07:53:25Z

5

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

answered Feb 9, 2019 at 7:53

Hari Om Gupta

711 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashutosh Singh · Accepted Answer · 2021-07-31 05:29:34Z

2

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

answered Jul 31, 2021 at 5:29

Ashutosh Singh

561 silver badge7 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:08:58Z

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, 2017 at 12:08

CommunityBot

11 silver badge

answered Apr 9, 2015 at 23:05

The F

3,7341 gold badge23 silver badges28 bronze badges

4 Comments

Ross Berenson Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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!

Collectives™ on Stack Overflow

Set dates for jQuery Date Range Picker from input values

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related