Weekday Range Selector

Select time periods like Mo-Fr.

Usage

Change values at start, setting the data attributes for each canvas or setting the option start.

<div id="container" class="slider-weekday-container" data-start="0" data-stop="4">
[...]
</div>

<script>
    var selector = WeekDayRangeSelector('container');
</script>

Options

Start values can be set with option start weekday number [0-6] and stop weekday number [0-6].

Events are onMove and onChange.

WeekDayRangeSelector(
    'container',
    {
        start: 0,
        stop: 5,
        locale: ['en-US', {weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'}],
        onMove: function(event) {
            console.log(event.start, event.stop);
        },
        onChange: function(event) {
            event.preventDefault();
        }
    }
);

Form values

The value for Monday to Friday is 0-4.

<input type="hidden" name="weekdayrange" class="input" value="5-6">

License

GPLv3 License