Tempus Dominus Timepicker show time after selecting date - asp.net-mvc

Question

I am using the Tempus Dominus Timepicker v5.0.1 with jquery 3.4.1 and the latest version of moment.js. I have a form that has a registration start date and time and a registation end date and time. I want the user to be able to select the date and after they click a date I want the time to appear automatically (the equivalent of clicking the clock button at the bottom).
I have my view:
<div class="form-row">
<div class="col-md-4 col-lg-3 mb-3">
#Html.LabelFor(m => m.RegistrationStartDate, new { #class = "font-weight-bold label-required" })
#Html.TextBoxFor(m => m.RegistrationStartDate, new { #class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationStartDate, required = "required", id="datetimepicker1", data_toggle="datetimepicker", data_target="#datetimepicker1" })
#Html.ValidationMessageFor(m => m.RegistrationStartDate)
</div>
</div>
<div class="form-row">
<div class="col-md-4 col-lg-3 mb-3">
#Html.LabelFor(m => m.RegistrationEndDate, new { #class = "font-weight-bold label-required" })
#Html.TextBoxFor(m => m.RegistrationEndDate, new { #class = "form-control datetimepicker-input", placeholder = RecruitClassResource.RegistrationEndDate, required = "required", id="datetimepicker2", data_toggle="datetimepicker", data_target="#datetimepicker2" })
#Html.ValidationMessageFor(m => m.RegistrationEndDate)
</div>
</div>
javascript:
#section Scripts {
#Scripts.Render("~/Scripts/moment.min.js")
#Scripts.Render("~/Scripts/tempusdominus-bootstrap-4.js")
<script>
$(document).ready(function () {
$('.datetimepicker-input').datetimepicker({
icons: {
time: "far fa-clock"
}
});
$('.datetimepicker-input').on('change.datetimepicker', function (e) {
// Just a test to see when this event is fired
alert(e.date);
});
});
</script>
}
I thought maybe the change.datetimepicker would be the event listener I was looking for, but it is fired the first time I click the textbox because the value changes from null to the current date. I also am not sure what I would need to call for the time to appear when a date is selected.

Answer 1

I have a JSFiddle for you, which does what you want, my friend -> https://jsfiddle.net/8ta5j6v7/2/.
Here is the code:
<div class="container" style="padding: 80px;">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<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-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
$(function() {
$("#datetimepicker1").datetimepicker();
var $picker = $("#datetimepicker1");
$picker.on("change.datetimepicker", function (e) {
// After the date is selected, I would like to switch to time view automatically / programmatically
if (!e.oldDate && $picker.datetimepicker('useCurrent')) {
// First time ever. If useCurrent option is set to true (default), do nothing
// because the first date is selected automatically.
return;
}
else if (
e.oldDate &&
e.date &&
(e.oldDate.format('YYYY-MM-DD') === e.date.format('YYYY-MM-DD'))
) {
// Date didn't change (time did).
return;
}
setTimeout(function () {
$('#datetimepicker1 [data-action="togglePicker"]').click();
}, 300); // With a mini delay so that the animation doesn't fire right-away.
});
});