{% extends "demo/_layout" %}

{% set pageTitle = "Adjustments to a Date Field Date/Time Picker | Extras" %}

{# Replace 'freeformDatePicker' with your form handle #}
{% set demoFormHandle = "freeformDatePicker" %}

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

    <div class="freeform-page-heading">
        <h2>Adjustments to a Date Field Date/Time Picker</h2>
        <p>The following example shows some ways to manipulate a Date &amp; Time field type using Freeform's developer events.</p>
    </div>

    {% if form %}

        {{ form.render() }}

        <script>
            {# Replace flatpickr instance options as you wish #}
            document.addEventListener("flatpickr-before-init", (event) => {
                // event.options object contains the whole options object that will be passed to the flatpickr instance
                event.options.defaultHour = 8; // starts the time picker at 8:00 am
                event.options.minuteIncrement = 15; // moves the time picker in 15 minute increments instead of 1
                event.options.minTime = "08:00"; // sets minimum start time to 8:00 am
                event.options.maxTime = "17.00"; // sets maximum start time to 5:00 pm
                flatpickr.l10ns.default.firstDayOfWeek = 1; // sets first day of week to Monday
                event.options.disable = [ // disables Sundays and Saturdays from being available options in datepicker
                    function(date) {
                        return (date.getDay() === 0 || date.getDay() === 6);
                    }
                ];
            })
        </script>

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or your test form:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
                <li>
                    Make sure your test form includes the following field (at minimum):
                    <ul>
                        <li>Date field of the Date &amp; Time field type (Pro only).</li>
                        <li>
                            Set the following configuration for this field as:
                            <ul>
                                <li><b>Type</b> set to <i>Both</i></li>
                                <li><b>Use built-in datepicker</b> checked/enabled</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ol>
        </p>
    </div>

{% endblock %}