In continuation of the topic datapicker There is a block with the ability to select the date and time, which is implemented using the datapicker bootstrap . Link to the documentation .

I can not figure out how to get the values ​​of the input when selecting data by the user, because I get the val value only if I enter the values ​​manually, and if I click on the arrow and select through datapicer, then the value in the input is not specified - why and how can I decide?

 $(function() { $('#datetimepicker3').datetimepicker({ format: 'DD MMMM', locale: 'ru' }); $('#datetimepicker2').datetimepicker({ format: 'HH' }); $('#datetimepicker1').datetimepicker({ format: 'mm' }); }); $('.datetimepicker-input').on('click', function() { let $data = $(this).val(); console.log($data); }); $('.input-group-append').on('click', function() { let target = $(this).data('target'); console.log(target); }); $('#datetimepicker3').on('click', function() { console.log("click datetimepicker3"); let data = $(this).find('.datetimepicker-input').val(); console.log(data); }); 
 .input-group .form-control { border-right: none; } .input-group .input-group-text { background-color: transparent; } .datetimepicker-input { text-transform: capitalize; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.js"></script> <div class="container"> <div class="form-group"> <label>Дата</label> <div class="row"> <div class="col-sm-12"> <div class="input-group date" id="datetimepicker3" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3" /> <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-caret-down" aria-hidden="true"></i></div> </div> </div> </div> </div> </div> <div class="form-group"> <label>Время</label> <div class="row"> <div class="col-sm-6"> <div class="input-group date" id="datetimepicker2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" /> <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-caret-down" aria-hidden="true"></i></div> </div> </div> </div> <div class="col-sm-6"> <div class="input-group date" id="datetimepicker1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" /> <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-caret-down" aria-hidden="true"></i></div> </div> </div> </div> </div> </div> </div>

    1 answer 1

    Understood. Here so changes are caught

      $('#datetimepicker3').on("change.datetimepicker", function (e) { var input = $(this).find('.datetimepicker-input').val(); console.log(input); });