scDateTime (formerly mdDateTime)
Optional Recommended Requirements
- Bootstrap (Note with bootstrap <= v3 a default font-size of 16px is recommended as all sizes are set via rem)
Where to get it
npm install sc-date-time
Add a dependency to
scDateTimein your app module:angular
Some implementation settings are required to get this useful, but for basic inline use:
- theme: String representing one of the supported themes, default value is set via the
scDateTimeConfig.defaultThemeproperty. This could also be a template cache value (or url) - if the path contains a
- 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
- on-cancel: Function passed in is called if the cancel button is pressed.
- on-save: Function passed in is called when the date is saved via the OK button, date value is available as $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
- 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
- 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
- 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
- display-twentyfour: If this value is truthy then display 24 hours in time, else use 12 hour time. Default value is set via the
- 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
- 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.
Currently there is a value defined on the module which has all of the aria-label and text values for the entire picker. This can be overwritten for full multilanguage support as follows (all defaults shown):
angularvalue'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';
Default values for globally configurable options as follows:
value'scDateTimeConfig'defaultTheme: 'material'autosave: falsedefaultMode: 'date'defaultDate: undefined //should be date object!!displayMode: undefineddefaultOrientation: falsedisplayTwentyfour: falsecompact: false
It has been tested to work on Chrome, Safari, Opera, Firefox and Internet Explorer 8+. If you find something, please let me know - throw me a message, or submit an issue request!
Q. The editor appears at a strange size? A: The editor is sized using REM, so try changing the font-size, or at least the font-size at the editor base. I find the following works well:
When checking out, you need a node.js installation, running
npm install will get you setup with everything to run the compile and unit tests tasks (Coming Soon!).
All changes should be done in the lib folder, running
gulp compile to compile the app or use
gulp watch to compile the files as you save them.
Read the CONTRIBUTING.md file before starting a PR.
This project is licensed under the MIT license.
Special thanks to all the contributions thus far!
For a full list see: https://github.com/simeonc/sc-date-time/graphs/contributors