Date Pickers

Bootstrap date pickers

to

Dependent Files & Codes

                                /**
                                 * Dependent Files
                                 * bootstrap-datepicker.js
                                 * datepicker.css
                                 **/

                                if ($.fn.datepicker) {
                                    $('.input-date-picker').DatePicker({
                                        orientation: "bottom",
                                        daysOfWeekDisabled: "6",
                                        calendarWeeks: true,
                                        autoclose: true,
                                        todayHighlight: true
                                    });
                                    $('.cal-date-picker').DatePicker({
                                        orientation: "bottom",
                                        daysOfWeekDisabled: "6",
                                        calendarWeeks: true,
                                        autoclose: true,
                                        todayHighlight: true
                                    });

                                    $('.addon-datepicker').DatePicker({
                                        orientation: "bottom",
                                        daysOfWeekDisabled: "1",
                                        calendarWeeks: true,
                                        autoclose: true,
                                        todayHighlight: true
                                    });

                                    $('.inline-date-picker').DatePicker({
                                        daysOfWeekDisabled: "1",
                                        calendarWeeks: true,
                                        autoclose: true,
                                        todayHighlight: true
                                    });

                                    $('.input-daterange').DatePicker({
                                        orientation: "top",
                                        daysOfWeekDisabled: "1",
                                        calendarWeeks: true,
                                        autoclose: true,
                                        todayHighlight: true
                                    });

                                }
                            

Date Range Pickers

Bootstrap date range pickers

Dependent Files & Codes

                                /**
                                 * Dependent Files
                                 * daterangepicker.js
                                 * daterangepicker.css
                                 **/

                                if ($.fn.daterangepicker) {
                                    $('.input-daterange-datepicker').daterangepicker();
                                    $('.input-daterange-timepicker').daterangepicker({
                                        timePicker: true,
                                        format: 'MM/DD/YYYY h:mm A',
                                        timePickerIncrement: 30,
                                        timePicker12Hour: true,
                                        timePickerSeconds: false
                                    });
                                    $('.input-limit-datepicker').daterangepicker({
                                        format: 'MM/DD/YYYY',
                                        minDate: '06/01/2015',
                                        maxDate: '06/30/2015',
                                        dateLimit: {
                                            days: 6
                                        }
                                    });

                                    $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

                                    $('#reportrange').daterangepicker({
                                        format: 'MM/DD/YYYY',
                                        startDate: moment().subtract(29, 'days'),
                                        endDate: moment(),
                                        minDate: '01/01/2012',
                                        maxDate: '12/31/2015',
                                        dateLimit: {
                                            days: 60
                                        },
                                        showDropdowns: true,
                                        showWeekNumbers: true,
                                        timePicker: false,
                                        timePickerIncrement: 1,
                                        timePicker12Hour: true,
                                        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')]
                                        },
                                        opens: 'left',
                                        drops: 'down',
                                        buttonClasses: ['btn', 'btn-sm'],
                                        applyClass: 'btn-primary',
                                        cancelClass: 'btn-default',
                                        separator: ' to ',
                                        locale: {
                                            applyLabel: 'Submit',
                                            cancelLabel: 'Cancel',
                                            fromLabel: 'From',
                                            toLabel: 'To',
                                            customRangeLabel: 'Custom',
                                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                                            firstDay: 1
                                        }
                                    }, function (start, end, label) {
                                        console.log(start.toISOString(), end.toISOString(), label);
                                        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                                    });

                                }