how to show daterangepicker by default onload in jquery without using bootstrap - html

Question

I want to show calendar by default on load. Can anyone help me to solve this issue.
<li class="contact-us__input-box-type">
<a data-open="datetimepicker" class="datetimepickerInitialze">10 Apr 2022 - 10 May 2022</a>
</li>
<div class="reveal generic_modal ap-modal look-up__modal mobile-height look-up__modal--siteReport" id="datetimepicker" data-options="closeOnClick:false;closeOnEsc:false;" data-reveal>
<div class="ap-modal__header border-bottom">
</div>
<div class="ap-modal__body ap-modal__body--reserve text-center">
<form id="contact-form" setAttribute="addForm">
<div class="ap-tabs" data-simplebar>
<div class="ap-tabs__content">
<div class="ap-tabs__content-block details-tab">
<div class="ap-form">
<div class="form-group__list ap-form__row text-left">
<div class="grid-x grid-padding-x cell">
<div class="small-12 medium-4 large-4 range-setting">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-6 large-6 cell pl0" id="stuff">
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>