# eonasdan/tempus-dominus

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/eonasdan-tempus-dominus).**

7,175 stars · 4,275 forks · HTML · MIT

## Links

- GitHub: https://github.com/Eonasdan/tempus-dominus
- Homepage: https://getdatepicker.com
- awesome-repositories: https://awesome-repositories.com/repository/eonasdan-tempus-dominus.md

## Topics

`datepicker` `datetime` `datetimepicker` `picker` `tempus-dominus`

## Description

Tempus Dominus is a JavaScript date-time picker library designed to integrate with Bootstrap-based web projects, replacing manual text entry with an interactive calendar and clock interface. It functions as a form input enhancement that provides visual selection of single dates, times, or combined date-time values through a calendar and clock widget.

The picker is built as a collection of independent UI components that manage their own state and rendering, with visual customization achieved entirely through CSS variables and class overrides without requiring JavaScript configuration. User interactions and programmatic changes trigger events through a centralized event system, while the display formatting is determined by a configurable format string that maps to locale-aware rendering rules. The picker's lifecycle is tied to its associated input element, automatically initializing and cleaning up based on DOM events, and it dynamically calculates its position relative to the viewport to ensure full visibility when opened.

The widget supports navigating through day, month, year, and decade views to locate and select specific dates, and can switch between date-only, time-only, and combined date-time modes to match input requirements. A hierarchical view system allows seamless transitions between these views through a shared navigation state.

## Tags

### User Interface & Experience

- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — A client-side library providing interactive date and time selection with multiple view modes.
- [Form-Integrated Date-Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/form-integrated-date-time-pickers.md) — Supports combined date and time selection through an integrated picker interface.
- [Bootstrap-Integrated Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/form-integrated-date-time-pickers/bootstrap-integrated-pickers.md) — Designed to integrate with Bootstrap-based web projects for consistent styling and behavior.
- [Single Value Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/form-integrated-date-time-pickers/single-value-pickers.md) — Picks one date or time value from the calendar or clock interface to populate the input field. ([source](https://getdatepicker.com/docs/versions/))
- [Date Picker Interfaces](https://awesome-repositories.com/f/user-interface-experience/date-picker-interfaces.md) — Provides an interactive calendar component for selecting specific days, months, or years within forms.
- [Calendar Input Widgets](https://awesome-repositories.com/f/user-interface-experience/form-input-widgets/calendar-input-widgets.md) — Replaces manual date entry with a visual calendar and clock picker for form inputs.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Provides visual customization entirely through CSS variables and class overrides without JavaScript configuration.
- [Mode-Switching Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/form-integrated-date-time-pickers/mode-switching-pickers.md) — Switches between date-only, time-only, and combined date-time modes to match input requirements. ([source](https://getdatepicker.com/docs/versions/))
- [Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/time-pickers.md) — Ships a time-only selection interface using a clock-style picker without a date component.
- [View Navigation](https://awesome-repositories.com/f/user-interface-experience/date-pickers/range-selection/month-and-year-pickers/view-navigation.md) — Provides controls for moving through day, month, year, and decade views to locate a specific date. ([source](https://getdatepicker.com/docs/versions/))
- [Event-Driven State Managers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers.md) — Implements a centralized event system that propagates state updates in response to user interactions.
- [DOM-Bound Lifecycle Controllers](https://awesome-repositories.com/f/user-interface-experience/input-lifecycle-controllers/dom-bound-lifecycle-controllers.md) — Automatically initializes and cleans up the picker based on the associated input element's DOM events.

### Software Engineering & Architecture

- [Date-Time Format Strings](https://awesome-repositories.com/f/software-engineering-architecture/object-schema-definitions/value-objects/monetary/display-formatting/date-time-format-strings.md) — Uses a configurable format string to drive locale-aware date and time display rendering.
- [Hierarchical View Navigation](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/tree-based-hierarchical-navigation/navigation-state-trees/hierarchical-view-navigation.md) — Provides a hierarchical view system for seamless transitions between day, month, year, and decade views.

### Web Development

- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures.md) — Ships a collection of independent UI components that manage their own state and rendering.