I have an issue using the Tempus Dominus Bootstrap 4 datetime picker and setting the maxDate option after the picker is initialized. The time changes to 11:58 pm when I select the newly set maxDate. The goal is to set the maxDate to the end of day on 12-Mar-2022.
var minDate = moment("2022-03-05").startOf('day').toDate();
var maxDate = moment("2022-03-12").endOf('day').toDate();
The code snippet can be run to see the issue in the scenarios below.
Scenario - Date 1
Upon initialization, the min and max dates are set.
Results: Datepicker works as expected. If the first date selected is the max date of 12-Mar-2022, the time remains as the current time.
Scenario - Date 2
Upon initialization, no min and max dates are set. This datetime picker will be used to trigger Date 3.
Scenario - Date 3
Upon initialization, only the min date is set. On change of Date 2 (can select any date, selected not used) the max date for Date 3 is set to 12-Mar-2022.
Results: Time issue with datetime picker. If the first date selected is the max date of 12-Mar-2022, the time changes to 11:58 pm.
Scenario - Date 4
Upon initialization, only the min date is set. Before any date is selected, on click of a button, the max date for Date 4 is set to 12-Mar-2022.
Results: Time issue with datetime picker. If the first date selected is the max date of 12-Mar-2022, the time changes to 11:58 pm.
Expectation: Even though maxDate is set for Date 3 and Date 4 after initialization, it should work the same as Date 1 and the time should not go to 11:58 pm.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<br />
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
Date 1:
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
data-toggle="datetimepicker" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<br />
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
Date 2:
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"
data-toggle="datetimepicker" />
<div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<br />
<div class="input-group date" id="datetimepicker3" data-target-input="nearest">
Date 3:
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3"
data-toggle="datetimepicker" />
<div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<br />
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
Date 4:
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"
data-toggle="datetimepicker" />
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<button id="setMax" type="button" class="btn btn-primary">Set Max for Date 4</button>
</div>
<script type="text/javascript">
var minDate = moment("2022-03-05").startOf('day').toDate();
var maxDate = moment("2022-03-12").endOf('day').toDate();
//var maxDate;
$(function () {
$('#datetimepicker1').datetimepicker({
format: "DD/MM/YYYY hh:mm a",
useCurrent: false,
minDate: minDate,
maxDate: maxDate,
sideBySide: true
});
$('#datetimepicker2').datetimepicker({
format: "DD/MM/YYYY hh:mm a",
useCurrent: false,
sideBySide: true
});
$('#datetimepicker3').datetimepicker({
format: "DD/MM/YYYY hh:mm a",
useCurrent: false,
minDate: minDate,
sideBySide: true
});
$('#datetimepicker2').on("change.datetimepicker", (e) => {
$('#datetimepicker3').datetimepicker("maxDate", maxDate);
});
$('#datetimepicker4').datetimepicker({
format: "DD/MM/YYYY hh:mm a",
useCurrent: false,
minDate: minDate,
sideBySide: true
});
$('#setMax').on("click", (e) => {
$('#datetimepicker4').datetimepicker("maxDate", maxDate);
});
});
</script>
</div>
</div>
</body>
</html>