extends ../layout
block content
    a.lang-link(href='index-ru.html')
        img(src='img/ru.png')
        span На русском языке

    h1.promo-header
        | AIR DATEPICKER
        span lightweight cross-browser jQuery datepicker
    p.-text-center-
        .datepicker-here.datepicker-promo
        script.
            var $promo = $('.datepicker-promo');
            $promo.datepicker({
                language: 'en'
            })
    article
        h2#intro Description
        p
            | Light (<i><strong>~36kb</strong> minified js file and <strong>~9kb</strong> gziped</i>) customizable cross-browser calendar, built with
            +example-inline('es5')
            | and
            +example-inline('css flexbox', 'js')
            | .Works in all modern browsers:
            | <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.
    article
        h2#install Installation
        +example-code('html') bower i --save air-datepicker
        p Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a>
    article
        h2#usage Usage
        p
            | Include styles and scripts from
            +example-inline('/dist')
            | directory:
        +example-code('html')
            :code
                <html>
                    <head>
                        <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
                        <script src="dist/js/datepicker.min.js"></script>

                        <!-- Include English language -->
                        <script src="dist/js/i18n/datepicker.en.js"></script>
                    </head>
                </html>
        p
            | Datepicker will automatically initialize on elements with class
            +example-inline('.datepicker-here', 'css')
            | , options may be sent via
            +example-inline('data', 'html')
            | attributes.
        +example-code('html')
            :code
                <input type='text' class="datepicker-here" data-position="right top" />
        h3 Manual initialization
        +example-code('js').
            // Initialization
            $('#my-element').datepicker([options])
            // Access instance of plugin
            $('#my-element').data('datepicker')
    article
        h2#examples Examples
        h3#example-default Initialization with default options
        +example
            +example-content
                input(type='text', data-language='en').datepicker-here
            +example-code('html')
                :code
                    <input type='text' class='datepicker-here' data-language='en' />
        h3#example-multiple Selecting multiple dates
        p
            | Pass parameter
            +example-inline('{multipleDates: true}','js')
            | for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number
            +example-inline('{multipleDates: 3}','js')
            | .
        +example
            +example-content
                input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left', data-language='en').datepicker-here
            +example-code('html')
                :code
                    <input type="text"
                           class="datepicker-here"
                           data-language='en'
                           data-multiple-dates="3"
                           data-multiple-dates-separator=", "
                           data-position='top left'/>
        h3#example-inline Permanently visible calendar
        p
            | Initialize plugin on non text input element, such as
            +example-inline('<div> …  </div>', 'html')
            | ,or pass the parameter
            +example-inline('{inline: true}', 'js')
            | .
        +example
            +example-content
                div.datepicker-here(data-language='en')
            +example-code('html')
                :code
                    <div class="datepicker-here" data-language='en'></div>
        h3#example-months Month selection
        +example
            +example-content
                input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy' data-language='en')
            +example-code('html')
                :code
                    <input type="text"
                           class="datepicker-here"
                           data-language='en'
                           data-min-view="months"
                           data-view="months"
                           data-date-format="MM yyyy" />
        h3#example-min-max Minimum and maximum dates
        p
            | To limit date selection, use
            +example-inline('minDate', 'js')
            | and
            +example-inline('maxDate', 'js')
            | , they must receive JavaScript Date object.
        +example
            +example-content
                input#minMaxExample(type='text')
                script.
                    $('#minMaxExample').datepicker({
                        language: 'en',
                        minDate: new Date() // Now can select only dates, which goes after today
                    })
            +example-code('js').
                $('#minMaxExample').datepicker({
                    language: 'en',
                    minDate: new Date() // Now can select only dates, which goes after today
                })

        h3#example-range Range of dates
        p Use
            +example-inline('{range: true}')
            | for choosing range of dates. As dates separator
            +example-inline('multipleDatesSeparator')
            | will be used.
        p For possibility to select same date two times, you should set
            +example-inline('{toggleSelected: false}')
            | .

        +example
            +example-content
                input(type='text' data-range='true' data-multiple-dates-separator=' - ' data-language='en').datepicker-here
            +example-code('html')
                :code
                    <input type="text"
                        data-range="true"
                        data-multiple-dates-separator=" - "
                        data-language="en"
                        class="datepicker-here"/>


        h3#example-disabled-days Disable days of week
        p For disabling days, use
            +example-inline('onRenderCell')
            | .
        +example
            +example-content
                input(type='text' id='disabled-days')
                script.
                    // Make Sunday and Saturday disabled
                    var disabledDays = [0, 6];

                    $('#disabled-days').datepicker({
                        language: 'en',
                        onRenderCell: function (date, cellType) {
                            if (cellType == 'day') {
                                var day = date.getDay(),
                                        isDisabled = disabledDays.indexOf(day) != -1;
                                return {
                                    disabled: isDisabled
                                }
                            }
                        }
                    })
            +example-code('js').
                // Make Sunday and Saturday disabled
                var disabledDays = [0, 6];

                $('#disabled-days').datepicker({
                    language: 'en',
                    onRenderCell: function (date, cellType) {
                        if (cellType == 'day') {
                            var day = date.getDay(),
                                isDisabled = disabledDays.indexOf(day) != -1;

                            return {
                                disabled: isDisabled
                            }
                        }
                    }
                })

        h3#example-custom-content Custom cells content
        p Air Datepicker allows you to change contents of cells like you want. You could use
            +example-inline('onRenderCell')
            | for this purpose.
            | Lets add extra elements to several dates, and show `lorem` text when selecting them.
        +example
            +example-content
                .list-inline
                    div
                        div#custom-cells
                    div#custom-cells-events
                        strong
                        p
                script.
                    var eventDates = [1, 10, 12, 22],
                            $picker = $('#custom-cells'),
                            $content = $('#custom-cells-events'),
                            sentences = [
                                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
                                'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
                                'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
                                'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
                            ]
                    $picker.datepicker({
                        language: 'en',
                        onRenderCell: function (date, cellType) {
                            var currentDate = date.getDate();
                            if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
                                return {
                                    html: currentDate + '<span class="dp-note"></span>'
                                }
                            }
                        },
                        onSelect: function onSelect(fd, date) {
                            var title = '', content = ''
                            if (date && eventDates.indexOf(date.getDate()) != -1) {
                                title = fd;
                                content = sentences[Math.floor(Math.random() * eventDates.length)];
                            }
                            $('strong', $content).html(title)
                            $('p', $content).html(content)
                        }
                    })
                    var currentDate = new Date();
                    $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
            +example-code('js')
                :code
                    var eventDates = [1, 10, 12, 22],
                        $picker = $('#custom-cells'),
                        $content = $('#custom-cells-events'),
                        sentences = [ &hellip; ];

                    $picker.datepicker({
                        language: 'en',
                        onRenderCell: function (date, cellType) {
                            var currentDate = date.getDate();
                            // Add extra element, if `eventDates` contains `currentDate`
                            if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
                                return {
                                    html: currentDate + '<span class="dp-note"></span>'
                                }
                            }
                        },
                        onSelect: function onSelect(fd, date) {
                            var title = '', content = ''
                            // If date with event is selected, show it
                            if (date && eventDates.indexOf(date.getDate()) != -1) {
                                title = fd;
                                content = sentences[Math.floor(Math.random() * eventDates.length)];
                            }
                            $('strong', $content).html(title)
                            $('p', $content).html(content)
                        }
                    })

                    // Select initial date from `eventDates`
                    var currentDate = currentDate = new Date();
                    $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

        h3#example-show-hide Showing and hiding calendar
        p For adding some actions while datepicker is showing or hiding, use
            +example-inline('onShow')
            | and
            +example-inline('onHide')
            | callbacks.

        +example
            +example-content
                .row
                    .col
                        input#example-show-hide-callbacks(type='text')
                    .col
                        div.logger#example-show-hide-log
                script.
                    ;(function () {
                        var log = logger('#example-show-hide-log', 'Clear')
                        $('#example-show-hide-callbacks').datepicker({
                            language: 'en',
                            onShow: function (dp, animationCompleted) {
                                if (!animationCompleted) {
                                    log('start showing')
                                } else {
                                    log('finished showing')
                                }
                            },
                            onHide: function (dp, animationCompleted) {
                                if (!animationCompleted) {
                                    log('start hiding')
                                } else {
                                    log('finished hiding')
                                }
                            }
                        })
                    })();
            +example-code
                :code
                    $('#example-show-hide-callbacks').datepicker({
                        language: 'en',
                        onShow: function(dp, animationCompleted){
                            if (!animationCompleted) {
                                log('start showing')
                            } else {
                                log('finished showing')
                            }
                        },
                        onHide: function(dp, animationCompleted){
                            if (!animationCompleted) {
                                log('start hiding')
                            } else {
                                log('finished hiding')
                            }
                        }
                    })
    article
        h2#timepicker Timepicker
        p To enable timepicker use option
            +example-inline('{timepicker: true}', 'js')
            | - it will add current time and a couple of range sliders by which one can pick time.
        p By default current user time will be set. This value can be changed by
            +example-inline('startDate', 'js')
            | parameter.

        +example
            +example-content
                div.datepicker-here(data-timepicker='true', data-language='en')
            +example-code
                :code
                    <div class="datepicker-here" data-timepicker="true" data-language='en'></div>
        p
            i More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.


        h3#timepicker-format Time format
        p Time format is defined in localization object or in
            +example-inline('timeFormat', 'js')
            | parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add
            +example-inline('aa', 'js')
            | or
            +example-inline('AA', 'js')
            | symbol in
            +example-inline('timeFormat', 'js')
            | . After what 'AM' and 'PM' sings will appear in timepicker widget.

        p Lets use 12 hours mode in Russian language:

        +example
            +example-content
                input.datepicker-here(type='text' data-timepicker='true', data-time-format='hh:ii aa')
            +example-code
                :code
                    <div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>

        h3#timeformat-actions Actions with time
        p For setting max/min hours or minutes values use
            +example-inline('maxHours','js')
            | ,
            +example-inline('minHours','js')
            | ,
            +example-inline('maxMinutes','js')
            | ,
            +example-inline('minMinutes','js')
            | . You also could set time in
            +example-inline('minDate','js')
            | and
            +example-inline('maxDate','js')
            | . For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.
        p Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.

        +example
            +example-content
                input(type='text')#timepicker-actions-exmpl
                script.
                    // Create start date
                    var start = new Date(),
                            prevDay,
                            startHours = 9;

                    // 09:00 AM
                    start.setHours(9);
                    start.setMinutes(0);

                    // If today is Saturday or Sunday set 10:00 AM
                    if ([6, 0].indexOf(start.getDay()) != -1) {
                        start.setHours(10);
                        startHours = 10
                    }

                    $('#timepicker-actions-exmpl').datepicker({
                        timepicker: true,
                        language: 'en',
                        startDate: start,
                        minHours: startHours,
                        maxHours: 18,
                        onSelect: function (fd, d, picker) {
                            // Do nothing if selection was cleared
                            if (!d) return;

                            var day = d.getDay();
                            // Trigger only if date is changed
                            if (prevDay != undefined && prevDay == day) return;
                            prevDay = day;
                            console.log('updat')
                            // If chosen day is Saturday or Sunday when set
                            // hour value for weekends, else restore defaults
                            if (day == 6 || day == 0) {
                                picker.update({
                                    minHours: 10,
                                    maxHours: 16
                                })
                            } else {
                                picker.update({
                                    minHours: 9,
                                    maxHours: 18
                                })
                            }
                        }
                    })
            +example-code
                :code
                    <input type='text' id='timepicker-actions-exmpl' />
                    <script>
                        // Create start date
                        var start = new Date(),
                            prevDay,
                            startHours = 9;

                        // 09:00 AM
                        start.setHours(9);
                        start.setMinutes(0);

                        // If today is Saturday or Sunday set 10:00 AM
                        if ([6, 0].indexOf(start.getDay()) != -1) {
                            start.setHours(10);
                            startHours = 10
                        }

                        $('#timepicker-actions-exmpl').datepicker({
                            timepicker: true,
                            language: 'en',
                            startDate: start,
                            minHours: startHours,
                            maxHours: 18,
                            onSelect: function (fd, d, picker) {
                                // Do nothing if selection was cleared
                                if (!d) return;

                                var day = d.getDay();

                                // Trigger only if date is changed
                                if (prevDay != undefined && prevDay == day) return;
                                prevDay = day;

                                // If chosen day is Saturday or Sunday when set
                                // hour value for weekends, else restore defaults
                                if (day == 6 || day == 0) {
                                    picker.update({
                                        minHours: 10,
                                        maxHours: 16
                                    })
                                } else {
                                    picker.update({
                                        minHours: 9,
                                        maxHours: 18
                                    })
                                }
                            }
                        })
                    </script>

    article
        h2#localization Localization
        p
            | You can add your localization to object
            +example-inline('$.fn.datepicker.language["my-lang"]', 'js')
            | and pass it name to parameter
            +example-inline('language', 'js')
        +example-code('js').
            // Add custom localization
            $.fn.datepicker.language['my-lang'] = {...}

            // Initialize datepicker with it
            $('.my-datepicker').datepicker({
                language: 'my-lang'
            })
        p
            | You can also pass localization object directly in
            +example-inline('language', 'js')
        +example-code('js').
            $('.my-datepicker').datepicker({
                language: {
                    days: [...]
                    ...
                }
            })
        p If some fields are missing, they will be taken from default localization object ('Russian').
        h3 Example of localization object
        +example-code('js').
            $.fn.datepicker.language['en'] = {
                days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
                monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                today: 'Today',
                clear: 'Clear',
                dateFormat: 'mm/dd/yyyy',
                timeFormat: 'hh:ii aa'
                firstDay: 0
            };
        p Available localizations located in
            +example-inline('dist/js/i18n', 'js')
            | directory.
    article
        h2#options Options
        .param
            +param-header('classes', 'string', '""')
            p Extra css classes for datepicker.

        .param
            +param-header('inline', 'boolean', 'false')
            p If true, then datepicker will be always visible.
        .param
            +param-header('language', 'string|object', '"ru"')
            p
                | Datepicker's language. If string is passed, then language will be searched in
                +example-inline('Datepicker.language', 'js')
                | object.
                | If object is passed, then data will be taken from this object directly.
            p If some fields are missing, they will be taken from default localization object ('Russian').
        .param
            +param-header('startDate', 'Date', 'new Date()')
            p This date will be shown at first initialization.
        .param
            +param-header('firstDay', 'number', '""')
            p.
                Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday.
                By default value is taken from current localization, but if it passed here then it will have higher priority.
        .param
            +param-header('weekends', 'array', '[6, 0]')
            p
                | Array of day's indexes which will be considered as weekends. Class
                +example-inline('.-weekend-','css')
                | will be added to relevant cells.
                | . By default its Saturday and Sunday.
        .param
            +param-header('dateFormat', 'string', '""')
            p Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.
            ul
                li
                    +param('@')
                    | - time in milliseconds
                li
                    +param('d')
                    | - date number
                li
                    +param('dd')
                    | - date with leading zero
                li
                    +param('D')
                    | - short day name
                li
                    +param('DD')
                    | - full day name
                li
                    +param('m')
                    | - month number
                li
                    +param('mm')
                    | - month number with leading zero
                li
                    +param('M')
                    | - short month name
                li
                    +param('MM')
                    | - full month name
                li
                    +param('yy')
                    | - two digit year number
                li
                    +param('yyyy')
                    | - four digit year number
                li
                    +param('yyyy1')
                    | - first year of decade, which included current year
                li
                    +param('yyyy2')
                    | - last year of decade, which included current year
        .param
            +param-header('altField', 'string|jQuery', '""')
            p Alternative text input. Use
                +example-inline('altFieldDateFormat')
                | for date formatting.
        .param
            +param-header('altFieldDateFormat', 'string', '"@"')
            p Date format for alternative field.

        .param
            +param-header('toggleSelected', 'boolean', 'true')
            p If true, then clicking on selected cell will remove selection.

        .param
            +param-header('keyboardNav', 'boolean', 'true')
            p If true, then one can navigate through calendar by keyboard.
            p Hot keys:
            ul
                li
                    +param('Ctrl + &rarr; | &uarr;')
                    | - move one month forwards
                li
                    +param('Ctrl + &larr; | &darr;')
                    | - move one month backwards
                li
                    +param('Shift + &rarr; | &uarr;')
                    | - move one year forwards
                li
                    +param('Shift + &larr; | &darr;')
                    | - move one year backwards
                li
                    +param('Alt + &rarr; | &uarr;')
                    | - move 10 years forwards
                li
                    +param('Alt + &larr; | &darr;')
                    | - move 10 years backwards
                li
                    +param('Ctrl + Shift + &uarr;')
                    | - move to next view
                li
                    +param('Esc')
                    | - hides datepicker

        .param
            +param-header('position', 'string', '"bottom left"')
            p
                | Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
                | For example
                +example-inline('{position: "right top"}', 'js')
                | - will set datepicker's position from right side on top of text input.
        .param
            +param-header('offset','number', 12)
            p Offset from the main positioning axes.
        .param
            +param-header('view', 'string', '"days"')
            p Start datepicker view. Possible values are:
                ul
                    li
                        +example-inline('days','js')
                        | - display days of one month
                    li
                        +example-inline('months','js')
                        | - display months of one year
                    li
                        +example-inline('years','js')
                        | - display years of one decade
        .param
            +param-header('minView', 'string', '"days"')
            p
                | Minimal datepicker's view, on that view selecting cells will not trigger rendering next view, instead it will activate it.
                | Possible values are the same as in
                +example-inline('view')
                | .
        .param
            +param-header('showOtherMonths', 'boolean', 'true')
            p If true, then days from other months will be visible.
        .param
            +param-header('selectOtherMonths', 'boolean', 'true')
            p If true, then one can select days form other months.
        .param
            +param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
            p If true, then selecting days from other month, will cause transition to that month.
        .param
            +param-header('showOtherYears', 'boolean', 'true')
            p If true, then years from other decades will be visible.
        .param
            +param-header('selectOtherYears', 'boolean', 'true')
            p If true, then on can select years from other decades
        .param
            +param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
            p If true, then selecting year from other decade, will cause transition to that decade.
        .param
            +param-header('minDate', 'Date', '""')
            p The minimum date for selection. All dates, running before it can't be activated.
        .param
            +param-header('maxDate', 'Date', '""')
            p The maximum date for selection. All dates which comes after it cannot be selected.
        .param
            +param-header('disableNavWhenOutOfRange', 'boolean', 'true')
            p If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.
        .param
            +param-header('multipleDates', 'boolean|number', 'false')
            p If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.
        .param
            +param-header('multipleDatesSeparator', 'string', '","')
            p Dates separator, which will be used when concatenating dates to string.
        .param
            +param-header('range', 'boolean', 'false')
            p For selecting dates range, turn this option to true.
                +example-inline('multipleDatesSeparator')
                | will be used as dates separator.
        .param
            +param-header('todayButton', 'boolean|Date', 'false')
            p If true, then button "Today" will be visible. If Date is passed then click event will also select passed date.
            +example-code('js').
                // Select today
                $('.datepicker').datepicker({
                    todayButton: new Date()
                })
        .param
            +param-header('clearButton', 'boolean', 'false')
            p If true, then button "Clear" will be visible.
        .param
            +param-header('showEvent','string','"focus"')
            p Event type, on which datepicker should be shown.
        .param
            +param-header('autoClose', 'boolean', 'false')
            p If true, then after date selection, datepicker will be closed.
        .param
            +param-header('prevHtml', 'string', '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>')
            p Contents of 'next' button.
        .param
            +param-header('nextHtml', 'string', '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>')
            p Contents of 'prev' button.
        .param
            +param-header('navTitles', 'object')
                +example-code('js')
                    :code
                        navTitles = {
                              days: 'MM, <i>yyyy</i>',
                              months: 'yyyy',
                              years: 'yyyy1 - yyyy2'
                          };
            p
                | Content of datepicker's title depending on current view, can use same notation as in parameter
                +example-inline('dateFormat', 'js')
                | . Missing fields will be taken from default values. Html tags are also possible.
            +example-code('js')
                :code
                    $('#my-datepicker').datepicker({
                           navTitles: {
                               days: '<h3>Check in date:</h3> MM, yyyy'
                           }
                       })
        .param
            +param-header('monthsField','string','"monthsShort"')
            p Field name from localization object which should be used as months names, when view is 'months'.

        .param
            +param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
            p If
                +example-inline('true')
                | , when timepicker widget will be added.

        .param
            +param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
            p Separator between date and time

        .param
            +param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
            p
                | Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
                | For using 12 hours mode, add "aa" or "AA" to your
                +example-inline('timeFormat','js')
                | parameter, e.g.
                +example-inline('{timeFormat: "hh:ii AA"}','js')
                | Possible values are:
            ul
                li
                    +param('h')
                    | - hours
                li
                    +param('hh')
                    | - hours with leading zero
                li
                    +param('i')
                    | - minutes
                li
                    +param('ii')
                    | - minutes with leading zero
                li
                    +param('aa')
                    | - day period - 'am' or 'pm'
                li
                    +param('AA')
                    | - day period capitalized

        .param
            +param-header('minHours', 'number', '0', 'opts-minHours')
            p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.

        .param
            +param-header('maxHours', 'number', '23', 'opts-maxHours')
            p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.

        .param
            +param-header('minMinutes', 'number', '0', 'opts-minMinutes')
            p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.

        .param
            +param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
            p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.

        .param
            +param-header('hoursStep', 'number', '1', 'opts-hoursStep')
            p Hours step in slider.

        .param
            +param-header('minutesStep', 'number', '1', 'opts-minutesStep')
            p Minutes step in slider.

    article
        h2#events Events
        .param
            +param-header('onSelect(formattedDate, date, inst)', 'function', 'null')
            p Callback when selecting date
            ul
                li
                    +param('formattedDate', 'string')
                    | - formatted date.
                li
                    +param('date', 'Date|array')
                    | - JavaScript Date object
                    | if
                    +example-inline('{multipleDates: true}', 'js')
                    | , then it will be an array of js dates.
                li
                    +param('inst','object')
                    | - plugin instance.
        .param
            +param-header('onShow(inst, animationCompleted)', 'function', 'null')
            p Callback when calendar is showing.
            ul
                li
                    +param('inst', 'Object')
                    | - plugin instance.
                li
                    +param('animationCompleted','boolean')
                    | - animation indicator.
                    | if its
                    +example-inline('false')
                    | , when animation has just begun, if
                    +example-inline('true')
                    | - already ended.

        .param
            +param-header('onHide(inst, animationCompleted)', 'function', 'null')
            p Callback when calendar is hiding.
            ul
                li
                    +param('inst', 'Object')
                    | - plugin instance.
                li
                    +param('animationCompleted','boolean')
                    | - animation indicator.
                    | if its
                    +example-inline('false')
                    | , when animation has just begun, if
                    +example-inline('true')
                    | - already ended.

        .param
            +param-header('onChangeMonth(month, year)','function','null')
            p Callback when months are changed.
            ul
                li
                    +param('month','number')
                    | - month number (from 0 to 12), to which transition is done.
                li
                    +param('year','number')
                    | - year, to which transition is done.
        .param
            +param-header('onChangeYear(year)','function', 'null')
            p Callback when year is changed
            ul
                li
                    +param('year','number')
                    | - year, to which transition is done.
        .param
            +param-header('onChangeDecade(decade)','function', 'null')
            p Callback when decade is changed
            ul
                li
                    +param('decade','array')
                    | - array which consists of two years: first year in decade and last year in decade.
        .param
            +param-header('onChangeView(view)', 'function', 'null')
            p Callback when datepicker's view is changed
            ul
                li
                    +param('view', 'string')
                    | - view name, to which transition is done (days, months, years).
        .param
            +param-header('onRenderCell(date, cellType)', 'function', 'null')
            p Callback when datepicker's cell is rendered.
            ul
                li
                    +param('date', 'Date')
                    | - current cell date
                li
                    +param('cellType', 'string')
                    | - current cell type (day, month, year).
            p The callback must return object which may consists of three fields:
            +example-code('js').
                {
                    html: '', // Custom cell content
                    classes: '', // Extra css classes to cell
                    disabled: '' // true/false, if true, then cell will be disabled
                }
            h4 Example
            +example-code('js').
                $('#my-datepicker').datepicker({
                    // Let's make a function which will add class 'my-class' to every 11 of the month
                    // and make these cells disabled.
                    onRenderCell: function(date, cellType) {
                        if (cellType == 'day' && date.getDate() == 11) {
                            return {
                                classes: 'my-class',
                                disabled: true
                            }
                        }
                    }
                })
    article
        h2#api API
        p
            | Plugin instance is accessible through
            +example-inline('data')
            | attribute.
        +example-code('js').
            var myDatepicker = $('#my-elem').datepicker().data('datepicker');
            myDatepicker.show();
        .param
            +param-header('show()')
            p Shows datepicker.
        .param
            +param-header('hide()')
            p Hides datepicker.
        .param
            +param-header('destroy()')
            p Destroys datepicker.
        .param
            +param-header('next()')
            p Renders next month, year or decade, depending on current view.
        .param
            +param-header('prev()')
            p Renders previous month, year or decade, depending on current view.
        .param
            +param-header('selectDate(date)')
            ul
                li
                    +param('date','Date|Array')
                    | - JavaScript
                    +example-inline('Date()', 'js')
                    | , or array of dates.
            p
                | Activates passed date or multiple dates if array is passed. If
                +example-inline('{multipleDates: false}','js')
                | and date is already active, then it will be deactivated. If
                +example-inline('{multipleDates: true}','js')
                | then another active date will be added.
        .param
            +param-header('removeDate(date)')
            ul
                li
                    +param('date','Date')
                    | - JavaScript
                    +example-inline('Date()', 'js')
            p
                | Removes selection from passed date.

        .param
            +param-header('clear()')
            p Clears all selected dates.

        .param
            +param-header('update(field[, value])')
            ul
                li
                    +param('field','string|object')
                    | - field name which must be updated.
                li
                    +param('field','string|*')
                    | - new value.
            p.
                This method updates datepicker's options. After calling this method, datepicker will be redrawn.
                You can update several parameters at one time, just pass in object with necessary fields.
            +example-code('js').
                var datepicker = $('#my-elem').datepicker().data('datepicker');
                // Single parameter update
                datepicker.update('minDate', new Date())
                // Multiple parameters
                datepicker.update({
                    position: "top right",
                    maxDate: new Date(),
                    todayButton: true
                })
        .param
            +param-header('view')
            p Sets new view for datepicker.
            +example-code('js').
                datepicker.view = 'months';
        .param
            +param-header('date')
            p
                | Sets new viewing date for datepicker, must pass a JavaScript Date object
                +example-inline('Date()')
            +example-code('js').
                datepicker.date = new Date();

        .param
            +param-header('$el')
            p Datepicker's DOM element

        .param
            +param-header('selectedDates')
            p Array of selected dates