Introduction - angular-time-picker - Wingify Engineering Labs

IntroductionEdit this page on GitHub

A very basic and lightweight time picker directive for Angular.js.

Features

With no external dependency, angular-time-picker is lighter and faster.
It can be used for picking a single time or a range of time.
Many different configurable options like:
- Setting the initial display time as per the requirements
- Two minimalistic different themes viz light and dark
- Precisely configure/update the range of time as per the needs
- Robust validation exclusively for time range picker
- Provide custom callbacks for apply / cancel operations

Options

There are a number of options that can be configured with inline attributes. All are optional.

Option	Default	Possible Values	Description
data-dropdown	false	`false`, `true`	Time picker dropdown initial state.
data-time-settings	{}	`-`	Initial time settings eg. {fromHour: '01',fromMinute: '00',toHour: '20',toMinute: '50'}
data-theme	light	`light`, `dark`	Theme for the time picker button and the dropdown
data-no-range	null	`false`, `true`	Pick just a ime or a range of time
data-format	24	`12`, `24`	Time Format(hours)
data-no-validation	null	`false`, `true`	Validation checks for time range picker(useful for preventing misleading data)
data-apply-callback	null	`function`	Callback to be invoked when APPLY button is being pressed to update time
data-clear-callback	null	`function`	Callback to be invoked when CANCEL button is being pressed to cancel current operation

Example:

// Set initial time range to be 05:30 - 10:10
$scope.settings = {
    dropdownToggleState: false,
    time: {
        fromHour: '05',
        fromMinute: '30',
        toHour: '10',
        toMinute: '10'
    },
    theme: 'dark',
    noRange: false,
    format: 24,
    noValidation: false
};
$scope.onApplyTimePicker = function () {
    console.log('Time range applied.');
};
$scope.onClearTimePicker = function () {
    console.log('Time range current operation cancelled.');
};

<wy-time-picker
    data-dropdown-toggle-state="settings.dropdownToggleState"
    data-time-settings="settings.time"
    data-theme="settings.theme"
    data-no-range="settings.noRange"
    data-format="settings.format"
    data-no-validation="settings.noValidation"
    data-apply-callback="onApplyTimePicker()"
    data-clear-callback="onClearTimePicker()">
</wy-time-picker>