Bootstrap datetimepicker - minDate is not a fuction

1
votes

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?

4
twitter-bootstrapdatetimepicker
$('#datetimepicker2').data("DateTimePicker").maxDate(e.date); Have you got this line of code from any source?? - Guruprasad J Rao
I'm looking for it, but no... I cannot find it anywhere... Where should it be? It's not a basic datetimepicker function? - besmart
You can try with $('#datetimepicker2').datetimepicker('maxDate',e.Date) - Guruprasad J Rao
thanks, now i have no error, but nothing happens... i can choose a date before minDate and a date after maxDate - besmart
Your solution works in fact.. Can you show your html - Guruprasad J Rao

4 Answers

5
votes

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);
      });
  });
0
votes
$('#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.

0
votes

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);
});
-1
votes
$('#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);
});