JS DateTimePicker onChange event not working
Solution 1
As mentioned by @Bluety you have to use the events provided by the library.
In your case you can use change.datetimepicker
event. The event handler function receives old date and new date which can be used for any comparisons you might need.
$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {
//Use date and oldDate here
})
Also note that, in your case the input element is same as datepicker target, This can lead to duplicate events triggered 👇.................................................................................................👇
id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker"
You can run the snippet below and change the date to see multiple alerts for one event.
$("#Datetimepicker").datetimepicker({
format: 'MMM,YYYY',
defaultDate: new Date()
}
);
$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {
console.log("New date", date);
console.log("Old date", oldDate);
alert("Changed date")
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />
</div>
To avoid this, you can use the parent as data-target
. This is how the examples look in the documentation as well
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" />
</div>
Run the snippet below and change dates to see single alert.
$("#target").datetimepicker({
format: 'MMM,YYYY',
defaultDate: new Date()
});
$("#target").on("change.datetimepicker", ({
date,
oldDate
}) => {
console.log("New date", date);
console.log("Old date", oldDate);
alert("Changed date")
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" />
</div>
Solution 2
When I look at the documentation I see that events have been defined by the library.
You can use the "on" function of jQuery with a custom event "change.datetimepicker" defined by the library and indicated in the documentation (https://tempusdominus.github.io/bootstrap-4/Events/).
$("#Datetimepicker").on("change.datetimepicker",function(){
alert("It works!")});
Jet
Updated on June 04, 2022Comments
-
Jet almost 2 years
JS datetimepicker
onChange
event not working at all.I've tried
OnSelect
,OnClose
,OnChange
,OnHide
,OnChangeMonth
to triggerdatetimepicker
event, but none of them works.<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />
$("#Datetimepicker").datetimepicker({ format: 'MMM,YYYY', defaultDate: today, onSelect: function () { alert("It works!"); } }) $("#Datetimepicker").datetimepicker("change",function(){ alert("It works!")}); $("#Datetimepicker").datetimepicker("changeDate",function(){ alert("It works!")});
I've tried many ways, but still none of them working. Do I need to provide some other js library in order to make it work? Appreciate your help.
-
Manuel Abascal over 4 yearsAre you using this datepicker?
-
Jet over 4 yearsHi, I'm actually using bootstrap-4 datetimepicker
-
Manuel Abascal over 4 yearsCan you share the link please?
-
Jet over 4 years
-
Manuel Abascal over 4 yearsI'll work on it. Please add your HTML code as well to your question.
-
-
Jet over 4 yearsThanks for the info, it works, but it trigger the event twice when a date is selected: "It works" "It works"
-
Jet over 4 yearsTried "update.datetimepicker", it's not working btw