Home > Enterprise >  How to set endDate to tomorrow in litepicker.js
How to set endDate to tomorrow in litepicker.js

Time:01-20

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.

CodePudding user response:

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(current.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

CodePudding user response:

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.

  •  Tags:  
  • Related