Bootstrap 3 datepicker - minDate and maxDate

To answer my question. The framework used required you to add moment to a config file otherwise it would not allow to use http://momentjs.com/ or any other JS - spoke to the person who set up the framework and they did it for security reasons.

Kasun's answer is correct but a better way to do this is to use Moment.js since datetimepicker is using this JS.

So to answer the 2nd part which is to disable 10 days before the current day and show 30 days from the current day you need to set the options as below. I didn't need to do the 10 days before but wanted only a set number of days to be available to select. I've added comments to make things clear but they shouldn't be there.

$mydatepicker.datetimepicker({
    minDate: moment(), // Current day
    maxDate: moment().add(30, 'days'), // 30 days from the current day
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

What the above will do is enable all the days between minDate and maxDate.

You could also directly enter the date range:

$mydatepicker.datetimepicker({
    minDate: moment("12/01/2015"),
    maxDate: moment("12/30/2015"),
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

And this will disable all days before and after the dates you entered into moment().

This is not part of the question but I wanted to display the current day in the input value when the calendar loaded but it wouldn't, instead it would show the placeholder text. I think its because of the use if minDate so I simply used jQuery to replace the value of the input.

$datepickerInput.val(moment());

var todayDate = new Date().getDate();

$('#element').datetimepicker({
  timepicker:false,
  formatDate:'Y/m/d',
  minDate: new Date(),
  maxDate: new Date(new Date().setDate(todayDate + 30))
});

By using this example you can give option to user to select date between today and next 30 days without using momentjs. You can provide value of minDate and maxDate accoording to you. For an example if you want to give options in between last 30 days to next 30 days, so set

minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))

Tags:

Javascript