sc-date-time by SimeonC

Customisation

Customisation of the sc-date-time plugin has three main parts Attributes, Configs and Templates. Also covered is internationalisation

Attributes

The following attributes allow you to change settings on each instance of the date-time picker.

theme: String representing one of the supported themes, default value is set via the scDateTimeConfig.defaultTheme property.
autosave: If this attribute is present the cancel and save buttons are removed and their respective events do not fire. The model is updated as the picker changes. Default value is set via the scDateTimeConfig.autosave property.
on-cancel: Function passed in is called if the cancel button is pressed. on-cancel="cancelFn()"
on-save: Function passed in is called when the date is saved via the OK button, date value is available as $value. on-save="saveFn($value)"
default-mode: A string of value 'date'/'time', which side of the slider that should be shown initially, overridden by display-mode. Default value is set via the scDateTimeConfig.defaultMode property.
default-date: A date-time string that the selects the date should the model be null. Defaults to today (new Date()). Default can be overridden globally via scDateTimeConfig.defaultDate property.
display-mode: Options are "full"; display time and date selectors and no display, "time"; show only the time input, "date"; show only the date input. Default value is set via the scDateTimeConfig.displayMode property.
orientation: If this string value is 'true' then the picker will be in vertical mode. Otherwise it will change to vertical mode if the screen width is less than 51rem as that is the size of the editor. Default value is set via the scDateTimeConfig.defaultOrientation property.
display-twentyfour: If this value is truthy then display 24 hours in time, else use 12 hour time. Default value is set via the scDateTimeConfig.displayTwentyfour property.
compact: If this string value is 'true' then the picker will be in a compact mode, this hides the large title display to the left. Note that display-mode="full" ignores this setting. Default value is set via the scDateTimeConfig.compact property.
mindate: A date string that represents the minimum selectable date/time
maxdate: A date string that represents the maximum selectable date/time
weekdays: Optionally bind an array of strings, this defaults to the englist S, M, T, W etc. Intended for full multilanguage support on directive level.

Config

The following options are available to be set at a global level, they correspond to and override the above attributes.

.value('scDateTimeConfig', {
    defaultTheme: 'material',
    autosave: false,
    defaultMode: 'date',
    defaultDate: undefined, //should be date object!!
    displayMode: undefined,
    defaultOrientation: false,
    displayTwentyfour: false,
    compact: false
})

Templates

By default two templates are bundled with scDateTime and correspond to the themes bootstrap and material.

If you want to create or modify the template to suit your application you need to add the html template to the $templateCache with a name following the following syntax; scDateTime-{{theme name}}.tpl. The bundled theme templates can be seen in the dist folder of the repo.

internationalisation

There are 2 steps to change the language used on the date-time picker.

The first is to change the angular Locale by including correct i18n file, eg http://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_ko-kr.js

The second is overriding the default values in the scDateTimeI18n config value. The default values are below.

angular.module('testMod', ['scDateTime']).value('scDateTimeI18n', {
    previousMonth: "Previous Month",
    nextMonth: "Next Month",
    incrementHours: "Increment Hours",
    decrementHours: "Decrement Hours",
    incrementMinutes: "Increment Minutes",
    decrementMinutes: "Decrement Minutes",
    switchAmPm: "Switch AM/PM",
    now: "Now",
    cancel: "Cancel",
    save: "Save",
    weekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    switchTo: 'Switch to',
    clock: 'Clock',
    calendar: 'Calendar'
});