CODEWITHSUNDEEP
twitter-bootstrapdatetimepicker
MarioC
MarioC

Reputation: 3228

Bootstrap datetimepicker - minDate is not a fuction

I'm using datetimepicker with bootstrap.

Everything went good, then I tried to use the 2 date time picker to select a date interval, but when trying to select a date i'm getting in the console

TypeError: $('#datetimepicker2').data("DateTimePicker").maxDate is not a function. (In '$('#datetimepicker2').data("DateTimePicker").maxDate(e.date)', '$('#datetimepicker2').data("DateTimePicker").maxDate' is undefined)

I'm using bootstrap-datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/

(some error occurs also with maxDate)

This is the script i'm calling

$(function() {
    $('#datetimepicker2').datetimepicker({
        locale : 'it',
        format : 'DD/MM/YYYY HH:mm'
    });
    $('#datetimepicker3').datetimepicker({
        locale : 'it',
        format : 'DD/MM/YYYY HH:mm',
        useCurrent: false //Important! See issue #1075
    });
     $("#datetimepicker2").on("dp.change", function (e) {
         $('#datetimepicker3').data("DateTimePicker").minDate(e.date);
     });
     $("#datetimepicker3").on("dp.change", function (e) {
         $('#datetimepicker2').data("DateTimePicker").maxDate(e.date);
     });

});

Am I missing something?

Upvotes: 1

Views: 3794

Answers (4)

Manikandan Mani
Manikandan Mani

Reputation: 1

$('#start-date2').datetimepicker({
  format : 'DD-MMM-YYYY HH:mm'
});
$('#end-date3').datetimepicker({
  format : 'DD-MMM-YYYY HH:mm',
  useCurrent: false //Important! See issue #1075
});

$("#start-date2").on("dp.change", function (e) {
  $('#end-date3').data("DateTimePicker").minDate(e.date);
});

$("#end-date3").on("dp.change", function (e) {
  $('#start-date2').data("DateTimePicker").maxDate(e.date);
});

Upvotes: -1

Vinicius Bassi
Vinicius Bassi

Reputation: 504

You can try to add .datetimepicker() before calling the on change event.

$("#datetimepicker2").datetimepicker().on("dp.change", function (e) {
     $('#datetimepicker3').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker3").datetimepicker().on("dp.change", function (e) {
     $('#datetimepicker2').data("DateTimePicker").maxDate(e.date);
});

Upvotes: 0

Pikoro Toro
Pikoro Toro

Reputation: 9

$('#start_date_picker').datetimepicker();
$('#end_date_picker').datetimepicker({
    useCurrent: false //Important! See issue #1075
});
$("#start_date_picker").on("dp.change", function (e) {
    $('#end_date_picker').data("DateTimePicker").setMinDate(e.date);
});
$("#end_date_picker").on("dp.change", function (e) {
    $('#start_date_picker').data("DateTimePicker").setMaxDate(e.date);
});

This is work for me.

Upvotes: 0

ovicko
ovicko

Reputation: 2302

I had the same issue only to realize its because I was using version : 3.1.3 . For version 3.1.3 you need to use setMaxDate() and setMinDate() instead of maxDate() and minDate()

     $(function () {
      $('#input-start-date').datetimepicker({
         pickTime: false
       });

      $('#input-end-date').datetimepicker({
          pickTime: false,
          useCurrent: false //Important! See issue #1075
      });
      $("#input-start-date").on("dp.change", function (e) {
          $('#input-end-date').data("DateTimePicker").setMinDate(e.date);
      });
      $("#input-end-date").on("dp.change", function (e) {
          $('#input-start-date').data("DateTimePicker").setMaxDate(e.date);
      });
  });

Upvotes: 5

Related Questions