text box change value event looks like not firing in with eonasdan-bootstrap-datetimepicker - asp.net-core

Question

I have a textbox bound with datetime picker. What I have to do is on change of value in the text box if another input textbox (which also bound with datetimepicker) is empty I have to fill the value from initial textbox.
at the moment just trying to catch events but unable to success
my asp.net core razor code is given below
<div class="filters-list">
<div class="form-group">
<div class="input-group date">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
//try to print date value of txtFirst text box at on change event
});
</script>
}
if i put datetimepicker in js I got double date time picker

Answer 1

Do you mean you want to bind a datetime picker change event? Try this way:
$(document).ready(function () {
$("#txtFirstDate").datetimepicker();
$("#txtSecondDate").datetimepicker();
$('#txtFirstDate').on('dp.change', function (e) {
console.log(e.date._d);
})
});
Test Result:
Update:
It seems that the components we use and the methods we call are not the same. I will share all the libraries I use and the calling methods, I hope it will help you.
View:
<div class="filters-list">
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#datetimepicker").datetimepicker();
$('#datetimepicker').on('dp.change', function (e) {
console.log(e.date._d);
})
$("#datetimepicker2").datetimepicker();
$('#datetimepicker2').on('dp.change', function (e) {
console.log(e.date._d);
})
});
</script>
_Layout.cshtml:
//...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
//...
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
//...