Issue
JS datetimepicker onChange
event not working at all.
I've tried OnSelect
, OnClose
, OnChange
, OnHide
, OnChangeMonth
to trigger datetimepicker
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.
Solution
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>
Answered By - Nithin Thampi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.