DateRangePicker display date-range-key instead of date on selected - forms

Question

How to display date-range-key instead of date except Custom Range? eg: Display "Yesterday" not "2022-12-13 - 2022-12-13" on selected/apply. But i still want to use the actual date value for form submission. Maybe i can put the actual date on hidden input. But again how to dislay date-range-key? eg: Yesterday, Last 7 Days, This Month, etc.
Form
<input type="text" class="form-control" placeholder="" aria-label="purchaseTime" aria-describedby="basic" name="dateFilter" id="dateFilter" value="{{ $datesFilter }}" readonly>
Script
$(function() {
$('input[name="dateFilter"]').daterangepicker({
"autoApply": true,
ranges: {
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
'Last 30 Days': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
'This Month': [moment().startOf('month'), moment().subtract(1, 'days')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
"maxDate": moment().subtract(1, 'days'),
"alwaysShowCalendars": true,
opens: "left",
locale: {
direction: "ltr",
format: 'YYYY-MM-DD',
// separator: " ~ ",
}
});
});