DatePicker

Date Picker is a composition of the following components:

• Calendar
• Date/Time/Zone input
• Shortcut

Date Range with Absolute/Quick Mode

Date Range Picker with Switchers, Quick and Absolute

HTML

<div ng-controller="daterangeWithSwitcherExampleController as controller"
     style="width: 670px; background-color: #ffffff">
    <inv-daterange-with-switcher shortcuts="controller.shortcuts"
                                 selected-shortcut="controller.selectedShortcut"
                                 selected-start="controller.selectedStart"
                                 selected-end="controller.selectedEnd"
                                 min-date="controller.minDate"
                                 max-date="controller.maxDate"
                                 entry-mode="controller.entryMode"
                                 on-date-range-changed="controller.onDateRangeChanged"
    ></inv-daterange-with-switcher>

    <dl>
        <dt>Start</dt>
        <dd>{{controller.current.start | date}}</dd>
        <dt>End</dt>
        <dd>{{controller.current.end | date}}</dd>
        <dt>Shortcut</dt>
        <dd>{{controller.current.shortcut.label}}</dd>
    </dl>
</div>

Date Range with Absolute/Quick Mode and Apply All Button

Date Range Picker with Switchers with Apply All Button

HTML

<div ng-controller="daterangeWithSwitcherExampleController as controller"
     style="width: 670px; background-color: #ffffff">
    <p>
        By setting <code>show-apply-all="true"</code> would show the Apply All button,
        and dispatch <code>on-apply-all-date-range-changed</code> event when the Apply All button is clicked.
    </p>
    <p>
       Set <code>immediate-selection-in-quick-mode="false"</code>, the picker will show
       Apply/Cancel (and Apply All if set to true) accordingly in Quick mode.
    </p>
    <inv-daterange-with-switcher shortcuts="controller.shortcuts"
                                 selected-shortcut="controller.selectedShortcut"
                                 selected-start="controller.selectedStart"
                                 selected-end="controller.selectedEnd"
                                 min-date="controller.minDate"
                                 max-date="controller.maxDate"
                                 entry-mode="controller.entryMode"
                                 show-apply-all="true"
                                 immediate-selection-in-quick-mode="false"
                                 on-apply-all-date-range-changed="controller.onApplyAllDateRangeChanged"
                                 on-date-range-changed="controller.onDateRangeChanged"
    ></inv-daterange-with-switcher>

    <dl>
        <dt>Start</dt>
        <dd>{{controller.current.start | date}}</dd>
        <dt>End</dt>
        <dd>{{controller.current.end | date}}</dd>
        <dt>Shortcut</dt>
        <dd>{{controller.current.shortcut.label}}</dd>
        <dt>Apply All</dt>
        <dd>{{controller.current.isApplyAll}}</dd>
    </dl>
</div>

Date Range with Shortcut

Date Range Picker with Shortcut

HTML

<div ng-controller="DaterangePickerWithShortcutExampleController as controller">
    <inv-daterange-picker-with-shortcut shortcuts="controller.shortcuts"
                                        selected-start="controller.selectedStart"
                                        selected-end="controller.selectedEnd"
                                        min-date="controller.minDate"
                                        max-date="controller.maxDate"
                                        entry-mode="controller.entryMode"
                                        on-date-range-changed="controller.onDateRangeChanged(start, end)"
    ></inv-daterange-picker-with-shortcut>
</div>

Date Range with Options

Date Range Picker with Options

HTML

<div>
    <div ng-controller="DaterangePickerWithOptionsExampleController as controller" style="width: 660px; background-color: #ffffff">
        <p>
            When setting options-data to and array greater than 3 it will show in a Fancy Select
            if this criteria is not meant it will show the control as radio button
        </p>
        <inv-daterange-picker-with-options shortcuts="controller.shortcuts"
                                            selected-start="controller.selectedStart"
                                            selected-end="controller.selectedEnd"
                                            min-date="controller.minDate"
                                            max-date="controller.maxDate"
                                            entry-mode="controller.entryMode"
                                            options-data="controller.optionsData"
                                            selected-option="controller.selectedOption"
                                            on-date-range-changed="controller.onDateRangeChanged(start, end, selectedShortcut, selectedOption)"
        ></inv-daterange-picker-with-options>
        <inv-daterange-picker-with-options shortcuts="controller.shortcuts"
                                           selected-start="controller.selectedStart"
                                           selected-end="controller.selectedEnd"
                                           min-date="controller.minDate"
                                           max-date="controller.maxDate"
                                           entry-mode="controller.entryMode"
                                           options-data="controller.optionsData2"
                                           selected-option="controller.selectedOption"
                                           on-date-range-changed="controller.onDateRangeChanged(start, end, selectedShortcut, selectedOption)"
        ></inv-daterange-picker-with-options>
    </div>
</div>

Date Range - Basic

Basic Date Range Picker

HTML

<div class="c-datePicker" ng-controller="daterangePickerBasicExampleController"
     style="width: 496px; background-color: rgba(255, 255, 255, 0.91); border: 1px solid #e0e2e5;">
    <inv-daterange-picker selected-start="selectedStart" selected-end="selectedEnd" entry-mode="'date'"></inv-daterange-picker>
</div>

Date Range - Date/Time with Restriction

Date Range Picker with time entry

HTML

<div class="c-datePicker" ng-controller="daterangePickerDateTimeExampleController"
     style="width: 496px; background-color: rgba(255, 255, 255, 0.91); border: 1px solid #e0e2e5;">
    <inv-daterange-picker selected-start="selectedStart"
                          selected-end="selectedEnd"
                          min-date="minDate"
                          max-date="maxDate"
                          entry-mode="'date-time'"></inv-daterange-picker>
</div>

Date Time

Date Picker with ability to set the date, time, and/or offset.

HTML

<div style="padding-bottom: 8px">
    <div><b>hide-input:</b> (boolean) Hide the input field.</div>
    <div><b>hide-time:</b> (boolean) Hide the time portion of the date. The time will be set at 00:00 or 00:00:00 depending on the show-seconds attribute.</div>
    <div><b>hide-offset:</b> (boolean) Hide the time zone offset portion of the date. The UTC offset will be whatever was passed on the model date.</div>
    <div><b>hide-clear:</b> (boolean) Hide the clear button.</div>
    <div><b>min-date:</b> (date) The minimum allowed date.</div>
    <div><b>max-date:</b> (date) The maximum allowed date.</div>
    <div><b>show-seconds:</b> (boolean) Show the seconds portion of the time.</div>
    <div><b>end-of-day:</b> (boolean) The time will be set at 23:59 or 23:59:59 depending on the show-seconds attribute.</div>
</div>
<div class="c-datePicker"
     style="display: flex; flex-wrap: wrap;"
     ng-controller="dateTimePickerExampleController as controller">
    <div style="margin: 15px; height: fit-content; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.noInputDate"
            hide-input="true"
            hide-clear="true">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.date"
            hide-time="true"
            hide-offset="true"
            min-date="controller.minDate"
            max-date="controller.maxDate">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.dateTime"
            hide-offset="true">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.dateTimeSeconds"
            show-seconds="true"
            hide-offset="true">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.dateTimeOffset">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.noDate">
        </inv-date-time-picker>
    </div>

    <div style="margin: 15px; border: 1px solid #e0e2e5;">
        <inv-date-time-picker
            ng-model="controller.endOfDayDate"
            hide-offset="true"
            end-of-day="true">
        </inv-date-time-picker>
    </div>
</div>

Date Time Input

Date Text Entry that includes a dropdown date calendar picker. This should be utilized in most cases where you need a date time picker.

HTML

<div class="t-content" ng-controller="dateTimeInputExampleController">
    <form class="c-generalForm" autocomplete="off" ng-submit="" novalidate>
        <div class="c-fieldset" inv-focus-group>
            <form-error-messages>
            </form-error-messages>
            <div>
                Default Version
            </div>
            <div class="c-fieldset-item"
                form-field-error-state="defaultExample"
                form-field-locale-key="'Default date time input example'">
                <label for="defaultExample">Default Date Time Input</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    input-id="'defaultExample'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="defaultExample"></form-field-error-messages>
                </div>
            </div>
            <div>
                Preset Date Version
            </div>
            <div class="c-fieldset-item"
                form-field-error-state="presetDateTimeInput"
                form-field-locale-key="'Default date time input example'">
                <label for="presetDateTimeInput">Preset Date Time Input</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    date="presetDate"
                    input-id="'presetDateTimeInput'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="presetDateTimeInput"></form-field-error-messages>
                </div>
            </div>
            <div class="c-fieldset-item"
                 form-field-error-state="presetDateTimeSecondsInput"
                 form-field-locale-key="'Default date time input example'">
                <label for="presetDateTimeSecondsInput">Preset Date Time Seconds Input</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    date="presetDate"
                    input-id="'presetDateTimeSecondsInput'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                    is-seconds-shown="true"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="presetDateTimeSecondsInput"></form-field-error-messages>
                </div>
            </div>
            <div>
                Hide hour version with passed down input-id
            </div>
            <div class="c-fieldset-item"
                form-field-error-state="hideTimeDateTimeExample"
                form-field-locale-key="'Default date time input example'">
                <label for="hideTimeDateTimeExample">Hide Time Example</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    hide-time="true"
                    input-id="'hideTimeDateTimeExample'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="hideTimeDateTimeExample"></form-field-error-messages>
                </div>
            </div>
            <div>
                Hide the Clear button from the picker
            </div>
            <div class="c-fieldset-item"
                form-field-error-state="hideClearButtonExample"
                form-field-locale-key="'Default date time input example'">
                <label for="hideClearButtonExample">Hide Clear Button Example</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    date="presetDate"
                    hide-time="true"
                    hide-clear="true"
                    input-id="'hideClearButtonExample'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="hideClearButtonExample"></form-field-error-messages>
                </div>
            </div>
            <div>
                Minimum / max date version with passed down input-id
            </div>
            <div>Minimum date: <span ng-bind="minDateString"></span></div>
            <div>Maximum date: <span ng-bind="maxDateString"></span></div>
            <div class="c-fieldset-item"
                form-field-error-state="minMaxDateTimeExample"
                form-field-locale-key="'Default date time input example'">
                <label for="minMaxDateTimeExample">Min / Max Date Example</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    min-date="minDate"
                    max-date="maxDate"
                    input-id="'minMaxDateTimeExample'"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
                <div class="u-sizeFullWidth">
                    <form-field-error-messages name="minMaxDateTimeExample"></form-field-error-messages>
                </div>
            </div>
            <div>
                Disabled Version
            </div>
            <div class="c-fieldset-item">
                <label for="disabledExample">Disabled Date Input</label>
                <inv-date-time-input
                    class="u-flexItemGrow c-fieldset-itemInput"
                    input-id="'disabledExample'"
                    is-disabled="true"
                    hide-time="true"
                    on-date-changed="onExampleDateChanged.bind(dateTimeInputExampleController)"
                ></inv-date-time-input>
            </div>
        </div>
    </form>
</div>

Calendar - Basic

Basic calendar by default display today's or selected-date's month

HTML

<inv-datepicker-calendar></inv-datepicker-calendar>

Calendar - date range display

Calendar also set to display a span of days by setting the `selected-start` and `selected-end` property.

HTML

<div ng-controller="datePickerCalendarSpanExampleController">
    <inv-datepicker-calendar render-mode="'range'"
                             selected-start="dateSpan.start" selected-end="dateSpan.end"
                             selected-date="dateSpan.start"></inv-datepicker-calendar>
    <inv-datepicker-calendar render-mode="'range'"
                             selected-start="dateSpan.start" selected-end="dateSpan.end"
                             selected-date="dateSpan.end"></inv-datepicker-calendar>
</div>

Calendar - restrict selection

By setting the `min-date`, `max-date` or both, the calendar can restrict date selection.

HTML

<inv-datepicker-calendar min-date="'2016-08-15'" max-date="'2016-08-29'"></inv-datepicker-calendar>

Calendar - Kitchen Sink

Use for Calendar interactive tester, change the html to an invalid file to disable

HTML

<div ng-controller="datePickerCalendarKitchenSinkExampleController">
    <p>
        <input type="text" siz="50" ng-model="test.entry" maxlength="12" placeholder="yyyy-mm-dd" />
        <button ng-click="setDate('selectedDate')">Set selected-date</button>
        <button ng-click="setDate('selectedStart')">Set selected-start</button>
        <button ng-click="setDate('selectedEnd')">Set selected-end</button>
        <button ng-click="setDate('minDate')">Set min-date</button>
        <button ng-click="setDate('maxDate')">Set max-date</button>
    </p>
    <p>
        Render Mode:
        <label>
            <input type="radio" name="renderMode" value="single" ng-click="setRangeType('single')" />
            Single
        </label>
          
        <label>
            <input type="radio" name="renderMode" value="range" ng-click="setRangeType('range')" checked />
            Range
        </label>
    </p>

    <div style="margin: 10px 0;">
        <div><strong>selected-start:</strong> <span ng-bind="test.selectedStart"></span></div>
        <div><strong>selected-end:</strong> <span ng-bind="test.selectedEnd"></span></div>
        <div><strong>selected-selected:</strong> <span ng-bind="test.selectedDate"></span></div>
        <div><strong>min-date:</strong> <span ng-bind="test.minDate"></span></div>
        <div><strong>max-date:</strong> <span ng-bind="test.maxDate"></span></div>
    </div>

    <inv-datepicker-calendar render-mode="test.renderMode"
                             selected-start="test.selectedStart" selected-end="test.selectedEnd"
                             selected-date="test.selectedDate"
                             min-date="test.minDate" max-date="test.maxDate"></inv-datepicker-calendar>


</div>

Date Entry

Date-only entry

HTML

<div ng-controller="datetimeEntryExampleController">
    <inv-datetime-entry></inv-datetime-entry>
</div>

Date/Time Entry

Date/Time Entry entry

HTML

<div ng-controller="datetimeEntryExampleController">
    <inv-datetime-entry entry-mode="date-time" selected-start="selectedStart" selected-end="selectedEnd"></inv-datetime-entry>
</div>

Date Entry with Restriction

Date Entry with restriction by setting min-date/max-date

HTML

<div ng-controller="datetimeEntryExampleController">
    Pick your favorite day in this year:
    <inv-datetime-entry entry-mode="date" min-date="quiz.minDate" max-date="quiz.maxDate" value="quiz.defaultDate"></inv-datetime-entry>
</div>

Shortcut List

Date Range Shortcut List

HTML

<div ng-controller="DaterangeShortcutExampleController as controller"
style="width: 200px; background-color: #ffffff">
    <inv-daterange-shortcut-list shortcuts="controller.shortcuts"
                                 selected-start="controller.selectedStart"
                                 selected-end="controller.selectedEnd"></inv-daterange-shortcut-list>
</div>