examples/datetime-example-dark.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/extra/vanilla-datetimerange-picker-dark.css">
        <title>vanilla-datetimerange-picker simple example.</title>
        <style>
            body {
                color: white;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div><input type="text" id="datetimerange-input1" size="40" style="text-align:center"></div>
        <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.js"></script>
        <script>
            window.addEventListener("load", function (event) {
                let drp = new DateRangePicker('datetimerange-input1',
                    {
                        //startDate: '2000-01-01',
                        //endDate: '2000-01-03',
                        //minDate: '2021-07-15 15:00',
                        //maxDate: '2021-08-16 15:00',
                        //maxSpan: { "days": 9 },
                        //showDropdowns: true,
                        //minYear: 2020,
                        //maxYear: 2022,
                        //showWeekNumbers: true,
                        //showISOWeekNumbers: true,
                        timePicker: true,
                        //timePickerIncrement: 10,
                        //timePicker24Hour: true,
                        //timePickerSeconds: true,
                        //showCustomRangeLabel: false,
                        alwaysShowCalendars: true,
                        //opens: 'center',
                        //drops: 'up',
                        //singleDatePicker: true,
                        //autoApply: true,
                        //linkedCalendars: false,
                        //isInvalidDate: function(m){
                        //    return m.weekday() == 3;
                        //},
                        //isCustomDate: function(m){
                        //    return "weekday-" + m.weekday();
                        //},
                        //autoUpdateInput: false,
                        ranges: {
                            'Today': [moment().startOf('day'), moment().endOf('day')],
                            'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                            'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                            'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
                        },
                        locale: {
                            format: "YYYY-MM-DD HH:mm:ss",
                        }
                    },
                    function (start, end) {
                        alert(start.format() + " - " + end.format());
                    })
                //drp.setStartDate('2014/03/01');
                //drp.setEndDate('2014/03/03');
                window.addEventListener('apply.daterangepicker', function (ev) {
                    console.log(ev.detail.startDate.format('YYYY-MM-DD'));
                    console.log(ev.detail.endDate.format('YYYY-MM-DD'));
                });
            });
        </script>
    </body>
</html>