Learning UIUX - Courses Education Bootstrap 5 Mobile HTML template - Admin Dashboard

Standard Date Range Picker

the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".

checkout more details


            <div class="input-group">
            <span class="input-group-text text-secondary" id="calendarpciker">
            <i data-feather="calendar"></i>
            </span>
            <input type="text" class="form-control" id="daterangepicker" />
            </div>
            <script>
            /* This script with id already added in function.js */
            if($('#daterangepicker').length > 0) {
                $('#daterangepicker').daterangepicker({
                    "minYear": 2023,
                    "autoApply": true,
                    "linkedCalendars": false,
                    "alwaysShowCalendars": true,
                    "startDate": "19/03/2024",
                    "endDate": "25/03/2024",
                    "opens": "center",
                    "buttonClasses": "btn",
                    "drops": "down",
                    "locale": {
                        "format": 'DD/MM/YYYY'
                    },
                    "applyButtonClasses": "btn-theme",
                    "cancelClass": "btn-light"
                }, function (start, end, label) {
                 //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            }
            </script>

Single Date Picker


            <div class="input-group">
                <span class="input-group-text text-secondary"> <i data-feather="calendar"></i> </span>
                <input type="text" class="form-control" id="datepicker" />
            </div>
            
            <script>
            /* This script with id already added in function.js */
            if ($('#datepicker').length > 0) {
                $('#datepicker').daterangepicker({
                    "singleDatePicker": true,
                    "minYear": 2023,
                    "autoApply": true,
                    "linkedCalendars": false,
                    "alwaysShowCalendars": true,
                    "startDate": "19/03/2024",
                    "endDate": "25/03/2024",
                    "opens": "center",
                    "buttonClasses": "btn",
                    "drops": "up",
                    "locale": {
                        "format": 'DD/MM/YYYY'
                    },
                    "applyButtonClasses": "btn-theme",
                    "cancelClass": "btn-light"
                }, function (start, end, label) {
                    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            }
            </script>

Date Range Picker with Ranges


            <div class="input-group">
                <span class="input-group-text text-secondary" id="calendarpcikerrange">
                    <i data-feather="calendar"></i>
                </span>
                <input type="text" class="form-control" id="daterangepickerranges" />
            </div>
                    
            <script>
            /* This script with id already added in function.js */
            if ($('#daterangepicker').length > 0) {
                $('#daterangepicker').daterangepicker({
                    "minYear": 2023,
                    "autoApply": true,
                    "linkedCalendars": false,
                    "alwaysShowCalendars": true,
                    "startDate": "19/03/2024",
                    "endDate": "25/03/2024",
                    "opens": "center",
                    "buttonClasses": "btn",
                    "drops": "down",
                    "locale": {
                        "format": 'DD/MM/YYYY'
                    },
                    "applyButtonClasses": "btn-theme",
                    "cancelClass": "btn-light",
                    "ranges": {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                }, function (start, end, label) {
                    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            }
            </script>

Inline Calendar

<div class="inlinewrap1 inline-calendar mx-auto"></div>
                                <input type="text" id="inlinewrap1" class="d-none">
                                
                                <script>
                                /* This script with id already added in function.js */
                                if ($('#inlinewrap1').length > 0) {
                                
                                $('#inlinewrap1').daterangepicker({
                                "singleDatePicker": true,
                                "minYear": 2023,
                                "autoApply": true,
                                "linkedCalendars": false,
                                "alwaysShowCalendars": true,
                                "parentEl": ".inlinewrap1",
                                "startDate": "19/03/2024",
                                "endDate": "25/03/2024",
                                "opens": "center",
                                "buttonClasses": "btn",
                                "drops": "up",
                                "locale": {
                                "format": 'DD/MM/YYYY'
                                },
                                "applyButtonClasses": "btn-theme",
                                "cancelClass": "btn-light"
                                }, function (start, end, label) {
                                //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                                });
                                
                                /* inline calendar activate */
                                $('#inlinewrap1').click();
                                
                                }
                                </script>