My HTML:

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.