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

Viewed 25

$(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'));
    });
});
    <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" />

I want to show calendar by default on load. Can anyone help me to solve this issue.

0 Answers
Related