text box change value event looks like not firing in with eonasdan-bootstrap-datetimepicker

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>
//...