My html code like this :
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm')
. I want the code to work only on this day. Other than today the code does not work
How can I do it?
Your
#datepicker
and#timepicker
are unrelated, they are fully independent, is up to you to relate them. You can dinamically setminDate
of#timepicker
usingminDate
function.You can add a listner for
dp.change
event and enable or disable theminDate
for the#timepicker
chceking if the selected day is current day (using momentjsisSame
).You have to add
minDate
option also to#datepicker
if you want to disable past dates, as you stated in the comments.Here a working sample:
Please note that, as stated before,
#datepicker
and#timepicker
are unrelated, so with the#timepicker
you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using#datepicker
).If you want to limit the input to today only, why are you trying to set a limit on the time picker? You should be setting the limit on the date picker