Facing issue to Tempus Dominus

My HTML:
<div class="date">
<div class="box depart" id="kt_daterangepicker_3">
<label>JOURNEY DATE</label>
<div class="value">06 Mar'23</div>
<span class="days">Thursday</span>
<input type="text" id="kt_daterangepicker_3_input">
</div>
</div>

My JS:
// date picker
var dateElement = document.querySelector('#kt_daterangepicker_3 .value');
var daysElement = document.querySelector('#kt_daterangepicker_3 .days');
var picker = new tempusDominus.TempusDominus(document.getElementById("kt_daterangepicker_3"), {
display: {
viewMode: "calendar",
components: {
decades: true,
year: true,
month: true,
date: true,
hours: false,
minutes: false,
seconds: false
}
},
restrictions: {
minDate: new Date() // set the minimum date to today's date
}
});

$('#kt_daterangepicker_3').on('click', function() {
if (picker._widget.classList.contains('tempusdominus-bootstrap-4')) {
if (picker._widget.classList.contains('open')) {
picker.hide();
} else {
picker.show();
}
} else {
console.error('Invalid picker element');
}
});


Problem:
when i picked any date need to set value & date.