aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Date Range Picker

A JavaScript component for choosing date ranges, dates and times.
Date Range Picker documentation

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                            
    <link rel="stylesheet" href="../node_modules/daterangepicker/daterangepicker.css"> 
                        

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                            
    <script src="../node_modules/daterangepicker/moment.min.js"></script>
    <script src="../node_modules/daterangepicker/daterangepicker.js"></script> 
                        

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                            
    <script>
        // Initialization OF Date Range Picker 
        $('input[name="dates"]').daterangepicker();
    </script> 
                        

Basic example

                                            
    <input type="text" class="js-daterangepicker form-control"> 
                                        
                                            
    <script>
        $(function() {
            $('.js-daterangepicker').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> 
                                        

With time picker

                                            
    <input type="text" class="time-js-daterangepicker form-control"> 
                                        
                                            
    <script>
        $(function() {
            $('.time-js-daterangepicker').daterangepicker({
                timePicker: true,
                startDate: moment().startOf('hour'),
                endDate: moment().startOf('hour').add(32, 'hour'),
                locale: {
                format: 'M/DD hh:mm A'
                }
            });
        });
    </script> 
                                        

Initially empty

                                            
    <input type="text" class="empty-js-daterangepicker form-control"> 
                                        
                                            
    <script>
        $(function() {
            $('.empty-js-daterangepicker').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('.empty-js-daterangepicker').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            $('.empty-js-daterangepicker').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });
    </script> 
                                        

Predefined with Readonly

                                            
    <button id="predefined-js-daterangepicker" class="btn btn-white">
        <i class="bi bi-calendar4-week"></i> 
        <span></span> <i class="bi bi-caret-down-fill"></i>
    </button> 
                                        
                                            
    <script>
        $(function() {

            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#predefined-js-daterangepicker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#predefined-js-daterangepicker').daterangepicker({
                startDate: start,
                endDate: end,
                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')]
                }
            }, cb);

            cb(start, end);

        });
    </script> 
                                        

Single Date Picker

                                            
    <input type="text" class="single-js-daterangepicker form-control"> 
                                        
                                            
    <script>
        $(function() {
            $('.single-js-daterangepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxYear: parseInt(moment().format('YYYY'),10)
            }, function(start, end, label) {
                var years = moment().diff(start, 'years');
                alert("You are " + years + " years old!");
            });
        });
    </script>