How to set MinDate and maxDate property for datetimepicker in bootstrap

Question

I want to set the minDate and maxDate properties dynamically for a datetimepicker in bootstrap, please help me with this.

in this scenario, and when choosing a date in one datetimepicker, he should set this selected date as minDate for another datetimepicker.

and after selecting a date in the second datetimepicker, its selected date should become maxDate in the first date picker.

I tried this way:

$(document).ready(function(){ $(".form_datepicker_startdate").datetimepicker({ isRTL: App.isRTL(), format: "yyyy-mm-dd", weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, startDate:'<%= request.getSession().getAttribute("startdate") %>', endDate:'<%= request.getSession().getAttribute("enddate") %>', forceParse: 0, pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left") }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('.form_datepicker_enddate').datepicker('setMinDate', minDate); }); $(".form_datepicker_enddate").datetimepicker({ isRTL: App.isRTL(), format: "yyyy-mm-dd", weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, startDate:'<%= request.getSession().getAttribute("startdate") %>', endDate:'<%= request.getSession().getAttribute("enddate") %>', forceParse: 0, pickerPosition: (App.isRTL() ? "bottom-right" : "bottom-left") }).on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); $('.form_datepicker_startdate').datepicker('setMaxDate', maxDate); }); }); 

Answer 1

to restrict Botstrap datepicker , the easiest way I've found:

 $("#datepicker").datepicker({ maxDate : 'now' }); 

This will disable the date greater than today.

Answer 2

I assume that you are using this plugin from the code you provided in the code snippet. Assuming this is a plugin that you are trying to use in your application, you are mistaken in order to update start and end dates, or possibly mix things from different libraries.

In any case, if I understand your problem correctly, this is jsfiddle , which performs one part of your functions.

When updating a new start or end date, the syntax to be used is as follows (from the plugin docs):

 $('#datetimepicker').datetimepicker('setStartDate', '2012-01-01'); 

and the name parameters for start and end dates are setStartDate and setEndDate not minDate and MaxDate also the function that is used to update them is datetimepicker not datepicker.

Here is the code from JS Fiddle:

 $(document).ready(function(){ $("#form_datepicker_startdate").datetimepicker({ format: "yyyy-mm-dd", weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, startDate : new Date('2012-08-08'), endDate : new Date('2014-08-08'), }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#form_datepicker_enddate').datetimepicker('setStartDate', minDate); }); $("#form_datepicker_enddate").datetimepicker(); }); 

Hope this helps, let me know if I am mistaken in my assumptions anywhere.

Answer 3

I am using the following Datetimepicker site URL, please find the following code to stop future dates.

 $(".datepicker").datetimepicker({ format: 'd/m/YH:i', formatTime: 'H:i', formatDate: 'd/m/Y', step: 15, maxDate: new Date(), onGenerate: function () { var leftPos = $(this).offset().left + 70 + 'px'; $('.xdsoft_datetimepicker').css({ 'left': leftPos}); } }); 

Answer 4

I am using jQuery UI. Its pretty easy, here is the code you can use in the jQuery interface

  $("#datepicker").datepicker({ minDate : +30, maxDate : +90, dateFormat : "yy-mm-dd", });