JQuery datetimepicker exception day with minDate and maxDate

Question

I'm facing a issue with datetimepicker.

I have a page with an Order, that has a delivery date.

Whenever the Order is listed, the datetimepicker has a certain value (for example, some day last week.) I want to be able to edit it but only select a set of avaiable dates (from today up to 30 days including "some day last week"). How should I proceed?

Function of the picker:

var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
      format: 'YYYY/MM/DD',
      useCurrent:true,
      showClose:true,
      defaultDate: $.now(),
      minDate: moment().millisecond(0).second(0).minute(0).hour(0),
      maxDate:maxdate,
 });

EDIT:

I'm guessing i wasn't very explicit with my question.

Example for what i want:

minDate = 2017/10/14

maxDate = 2017/10/30

(at this point everything works fine)

Date option that i want to pick = 2017/09/10 (that is 1 month older than minDate) without changing minDate!

I want to create an exception date that is not inside the range of min/max date.

William-H-M William-H-M · Accepted Answer · 2017-10-17T12:30:31

For the options showed I guess you are using eonasdan-datetimepicker.

So proceed like this:

var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
      format: 'YYYY/MM/DD',
      useCurrent: true,
      showClose: true,
      defaultDate: $p.now(),
      minDate: moment().startOf('day'),
      maxDate: maxDate,
 });

Where maxDate will have 30 days added using moment method .add() for minDate It is easier if you use startOf('day') as will be the same you have, but easier to read.

EDIT

Ok so what you want is to allow your users to choose a "special day" that is not in the array, so for that you could use enabledDates option.

In which you will add your special day and the range of the days enabled, so only thus will be allowed to be selected and would be something like this:

let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
  moment(specialDay, currentFormat), //this is our "special day"
  moment(startDate, currentFormat) // we format the date to the format needed    ];

//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
  //apply the format
  let date = moment().add(i, 'day').format(currentFormat);
  enabledDates.push(moment(date, currentFormat));
}

//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view 
$("#myDatepicker").datetimepicker({
  format: currentFormat,
  useCurrent: false,
  showClose: true,
  minDate: moment(specialDay, currentFormat),
  maxDate: maxDate,
  enabledDates: enabledDates,
});

Working fiddle https://jsfiddle.net/William_/2ze7bo27/

Edit: Make easier to change format and special date

JQuery datetimepicker exception day with minDate and maxDate

1 Answers