CODEWITHSUNDEEP
jquerytwitter-bootstrap
user3962745
user3962745

Reputation: 1117

how to set MinDate and maxDate property of datetimepicker in bootstrap

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);
            });
     });

Upvotes: 10

Views: 87212

Answers (5)

Vinicius Bassi
Vinicius Bassi

Reputation: 504

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);
});

Upvotes: 0

Sapnandu
Sapnandu

Reputation: 642

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});
       }
    });

Upvotes: 0

Ritesh
Ritesh

Reputation: 360

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

$("#datepicker").datepicker({

  maxDate : 'now'

});

This Will disable the date greater than today.

Upvotes: 28

Thakhani Tharage
Thakhani Tharage

Reputation: 1298

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",
    });

Upvotes: -2

sasidhar
sasidhar

Reputation: 7752

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.

Upvotes: 14

Related Questions