How to set endDate to tomorrow in litepicker.js

Question

I am working on building a date picker using the litepicker.js I have everything working so far but got stumped on getting the endDate to load tomorrows date. Here is what I currently have.

    new Litepicker({
    element: document.getElementById('start-date'),
    elementEnd: document.getElementById('end-date'),
    singleMode: false,
    allowRepick: true,
    format: 'D MMMM YYYY',
    startDate: new Date(),
    endDate: new Date(),
    numberOfMonths: 1,
    numberOfColumns: 1,
    tooltipText: {
        one: 'night',
        other: 'nights'
    },
    tooltipNumber: (totalDays) => {
        return totalDays - 1;
    }
});

This will show todays date on both fields, however I want the endDate to be tomorrow instead. I have tried the following

endDate: new Date(startDate.getTime() + 86400000)

and a couple other failed attempts but to no avail. Hoping the masses can assist.

Thanks in advance.

[*Add days to JavaScript Date*](https://stackoverflow.com/questions/563406/add-days-to-javascript-date?r=SearchResults&s=1|1073.0612), [*How to add number of days to today's date?*](https://stackoverflow.com/questions/3818193/how-to-add-number-of-days-to-todays-date?r=SearchResults&s=2|269.3115), [*Add days to date using Javascript*](https://stackoverflow.com/questions/6368153/add-days-to-date-using-javascript?r=SearchResults&s=4|157.3106), [etc.](https://stackoverflow.com/search?q=%5Bjavascript%5D+add+days+to+date) — RobG, Jan 20 '22 at 04:33
only issue is I am not sure I can drop a variable into the endDate value according to the docs it has to be a date, number or string which must conform to the format option value — DigitalDesigner, Jan 20 '22 at 04:39

score 1 · Answer 1 · answered Jan 20 '22 at 04:58

you can add a function for this.

function addDays(days) {
  let result = new Date();
  result.setDate(result.getDate() + days);
  return result;
}

so the final code looks like this.

function addDays(days) {
  let result = new Date();
  result.setDate(result.getDate() + days);
  return result;
}

const picker = new Litepicker({
    element: document.getElementById('start-date'),
    elementEnd: document.getElementById('end-date'),
    singleMode: false,
    allowRepick: true,
    format: 'D MMMM YYYY',
    startDate: new Date(),
    endDate: addDays(1),
    numberOfMonths: 1,
    numberOfColumns: 1,
    tooltipText: {
        one: 'night',
        other: 'nights'
    },
    tooltipNumber: (totalDays) => {
        return totalDays - 1;
    }
});

this should also take care of the changing month.

unfortunately this caused adverse effects upon reselecting and once you go forward you can't go back as such I had to stick with the other answer/solution. — DigitalDesigner, Jan 26 '22 at 05:55

DigitalDesigner · Accepted Answer · 2022-01-20T15:59:44.767

0

I was able to apparently add the variables so this can be achieved in a similar manner to a typical date change.

Here is what I added before the Litepicker script

var today = new Date();
var tomorrow = new Date(today.getTime() + 86400000); // + 1 day in ms
tomorrow.toLocaleDateString();

From there I updated the startDate and the endDate to utilize the variables created.

startDate: today,
endDate: tomorrow,

And I am successfully loading the values I want in the input fields. Thanks all

edited Jan 20 '22 at 15:59

answered Jan 20 '22 at 04:51

DigitalDesigner

274
2
19

1

Note that on the day that a place changes from DST to standard time there are likely 25 hours in the day, not 24 so `current.getTime() + 86400000` may be 23:00 on the same date. (PS. I think *currrent* should be *today*). – RobG Jan 20 '22 at 06:31
haha thansk Rob, yeah I typoed it as I was tweaking the variable names and forgot to update lol. I will hvae to review the DST scenerio and figure out a walkaround there. – DigitalDesigner Jan 20 '22 at 15:59

How to set endDate to tomorrow in litepicker.js

2 Answers2