xdan / datetimepicker

jQuery Plugin Date and Time Picker
https://xdsoft.net/jqplugins/datetimepicker/
MIT License
3.5k stars 1.52k forks source link

datetimepicker problem in adminLTE template #819

Closed Bellia86 closed 1 week ago

Bellia86 commented 2 weeks ago

I can't get minDate and maxDate to work on the two date fields. As if the two fields were not connected. Selected by date from the first field, the second does not set minDate. I followed the example on https://getdatepicker.com/4/ I don't understand if it's a problem with the datepicker resources present in the adminLTE template or I'm doing something wrong

<div class="input-group date" id="da_data_1" data-target-input="nearest">
  <div class="input-group-prepend" data-target="#da_data_1" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar" ></i></div>
  </div>
  <input type="text" name="da_data_1" id="data_inizio_1" value="" class="form-control datetimepicker-input" data-target="#da_data_1" data-toggle="datetimepicker">
</div>

<div class="input-group date" id="a_data_2" data-target-input="nearest">
  <div class="input-group-prepend" data-target="#a_data_2" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
  <input type="text" name="a_data_2" id="data_fine_2" value="" class="form-control datetimepicker-input" data-target="#a_data_2" data-toggle="datetimepicker">
</div>
<script>
$(function () {
  $('#da_data_1').datetimepicker({
    format: 'DD/MM/YYYY'
  });
  $('#a_data_2').datetimepicker({
    format: 'DD/MM/YYYY'
  });
  $("#da_data_1").on("dp.change", function (e) {
    $('#a_data_2').data("DateTimePicker").minDate(e.date);
  });
  $("#a_data_2").on("dp.change", function (e) {
    $('#da_data_1').data("DateTimePicker").maxDate(e.date);
  });
});                                    
</script>

this is my test page: https://advertising.esprimo.com/insieme/

Bellia86 commented 1 week ago

Resolved!

$("#da_data_1").on("change.datetimepicker", function (e) {
  $('#a_data_1').datetimepicker('minDate', e.date);
});
$("#a_data_1").on("change.datetimepicker", function (e) {
  $('#da_data_1').datetimepicker('maxDate', e.date);
});

the correct examples to copy for adminlte are these: https://getdatepicker.com/5-4/Usage/#linked-pickers