repository·master·Indexed 27 days ago
https://github.com/eonasdan/tempus-dominusA robust, modern JavaScript date and time picker library. Version 6 is a TypeScript-based rewrite that eliminates dependencies on jQuery, Moment.js, and Bootstrap, requiring only Popper2 for positioning. It features a DateTime class for date manipulation and localization, a Display class for picker visibility control, and support for various icon sets including Font Awesome 5 and Bootstrap Icons v1.
Tempus Dominus is a robust JavaScript date/time picker. Version 6 is a major rewrite written in TypeScript, optimized for modern browsers.
Key characteristics:
npm iTo view the generated documentation site locally, start a web server using the following command and navigate to http://localhost:3001/.
npm run serveTo run the web server, build the project, and start watchers for documentation, styles, and TypeScript simultaneously, use the npm start command.
Note: Do not run npm run serve at the same time as npm start.
npm startload function to apply the biOneIcons icon set to the DefaultOptions.display.icons configuration.customDateFormat plugin is no longer required as its functionality has been merged into the main Tempus Dominus picker. Using this plugin will trigger a console warning.The Font Awesome 5 plugin provides a predefined set of icon classes for Tempus Dominus components. This plugin requires Font Awesome libraries to be loaded in your environment to display the icons correctly.
To use this plugin, call the load function and pass the Tempus Dominus factory instance. This will update the DefaultOptions.display.icons configuration with the Font Awesome 5 icon set.
DateTime.fromString(input, localization) method to create a DateTime instance from a custom formatted string. This requires a FormatLocalization object that defines the format pattern to match the input.The EventEmitters class provides several event streams that allow developers to react to internal component changes. You can subscribe to these emitters to listen for specific actions or view updates.
Available emitters:
triggerEvent: Emits BaseEvent objects.viewUpdate: Emits generic updates to the view.updateDisplay: Emits ViewUpdateValues (e.g., 'calendar', 'clock', 'all').action: Emits an object containing the original event e and an optional action of type ActionTypes.updateViewDate: Emits a DateTime object when the view date changes.The Moment.js plugin allows Tempus Dominus to parse and format dates using Moment.js logic. To use this plugin, you must have moment loaded in your environment. The plugin overrides setFromInput to enable parsing based on a provided format string and overrides formatInput to format the date for the input field using that same format string.
When initializing the plugin, you provide a format string (the option parameter) which Moment.js will use for both parsing and formatting.
The Display class provides getters to access the underlying DOM elements of the picker:
widget: Returns the main HTMLElement of the picker body.dateContainer: Returns the HTMLElement containing the calendar/date components.timeContainer: Returns the HTMLElement containing the clock/time components.isVisible: Returns a boolean indicating if the picker is currently shown.inline mode, it uses Popper.js for positioning. You can manually trigger a position update using updatePopup().