how to set MinDate and maxDate property of datetimepicker in bootstrap

Question

i want to set minDate and maxDate property dynamically for datetimepicker in bootstrap,please help me out in this.

in this scenario, while while selecting the date in one datetimepicker it should set that selected date as minDate for other datetimepicker.

and after selecting the date in second datetimepicker,its selected date should become maxDate in first date time 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 limit Botstrap datepicker, the simplest way that I found is:

$("#datepicker").datepicker({

  maxDate : 'now'

});

This Will disable the date greater than today.

Answer 2

I am assuming that you are using this plugin from the code that you have given in the code snippet. Assuming that this is the plugin that you are trying to use in you application, you are wrong methods to update the start and end dates or probably mixing up things from different libraries.

In any case if I understood your problem correctly here is a jsfiddle that does one part of your functionality.

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

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

and the names options 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 it helps, let me know if I am wrong in my assumptions anywhere.