## Introduction 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:** ```js // 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.'); }; ``` ```html ```