how to set MinDate and maxDate property of datetimepicker in bootstrap

9
votes

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);
            });
     });
5
jquerytwitter-bootstrap
can u provide a fiddle at jsfiddle.net or at bootply.com – Dev
Please include a jsfiddle or please indicate the correct library that you are trying to use here. There are many date picker plugins that are present, which one are you using? – sasidhar
You can set date value to jQuery('.inputele').datepicker('setStartDate',{datevalue}); or clear using jQuery('.inputele').datepicker('setStartDate',false); – bharat

5 Answers

27
votes

to limit Botstrap datepicker, the simplest way that I found is:

$("#datepicker").datepicker({

  maxDate : 'now'

});

This Will disable the date greater than today.

14
votes

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.

0
votes

I am using this following Datetimepicker Site URL please find the following code to stop future date selection.

$(".datepicker").datetimepicker({
        format: 'd/m/Y H: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});
       }
    });
0
votes

These should do the trick.

$(".form_datepicker_startdate").datetimepicker().on("dp.change", function (e) {
    $(".form_datepicker_enddate").data("DateTimePicker").minDate(e.date);
});

$(".form_datepicker_enddate").datetimepicker().on("dp.change", function (e) {
    $(".form_datepicker_startdate").data("DateTimePicker").maxDate(formattedDate);
});
-2
votes

I use Jquery UI. Its pretty easy, here is the code you can use on JQuery UI

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