We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Date picker

Date pickers are intuitive UI elements that allow users to date picker dates with ease. They provide a clear, interactive way to choose single or multiple dates, improving form usability and scheduling interactions.

Basic date picker

Preview

Code

Date picker Select

Date range picker

Preview

Code

Date range picker Select

Date range without dropdown and weekends

Preview

Code

Date picker Select

Optional properties

PropertyTypeDescription

size

compact | base

Controls date picker sizing. compact has less padding, base follows the standard theme.

shape

flat | pill | curve

Defines the date picker shape. pill is a fully rounded date picker, curve has rounded corners, and flat is a classic square-cornered date picker. Default is flat.

icon

string

Specifies a Font Awesome class for the date picker's icon (e.g., fa-globe).

iconPosition

left | right

Sets the icon's position relative to the date picker text. Defaults to left.

position

top | bottom | auto

Sets the position of the date picker options. top and bottom are self-explanatory, while auto intelligently positions the options to fit within the viewport. Defaults to auto.

range

boolean

true enables range date pickerion on date picker. Defaults to false.

dropdown

boolean

Setting this to true allows users to date picker a month and year directly from the dropdown in the date picker. Setting it to false disables this feature. By default, it is true.

disableWeekends

boolean

true disables date pickerion of weekends. Defaults to false.

disableInactive

boolean

true disables date pickerion of inactive dates (e.g., previous/next month). Defaults to false.

id

string

Defines the id of the date picker.

label

string

Defines the label attached to the date picker.

placeholder

string

Defines the placeholder of the date picker.

helpText

string

Defines the help text of the date picker.

breakpoints

ZapDatePickerBreakpoints

Sets the breakpoints for the date picker. Accepts an object with properties for different screen sizes.

monthsPerView

number

Specifies how many months are displayed at a time in the view.

maxPerRow

number

Sets the maximum number of months displayed per row. Works only when monthsPerView is specified.

dateFormat

string

Sets the date format of the date picker. Defaults to MMM dd, yyyy.

locale

string

Sets the locale of the date picker. Defaults to en-US.

months

string[]

Sets the months of the date picker. Order is important and reflected in the view. Defaults to ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].

daysOfWeek

string[]

Defines the labels for the days of the week in the date picker. The order of the array determines how they appear in the view. By default, it follows the standard format: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].

disableDates

Date[]

Disables specific dates in the date picker. Accepts an array of Date objects.

disableRanges

{ startDate: Date; endDate: Date }[]

Disables specific date ranges in the date picker. Accepts an array of objects with startDate and endDate properties.

minDate

Date

Sets the minimum date pickerable date in the date picker.

maxDate

Date

Sets the maximum date pickerable date in the date picker.

minYear

number

Sets the minimum date pickerable year in the date picker.

maxYear

number

Sets the maximum date pickerable year in the date picker.

years

string[]

Defines the range of years available for date pickerion in the date picker. The order of the years in the array determines how they appear in the dropdown. By default, it includes the current year, along with the previous and next 50 years.

customErrorMessages

string

Provides the ability to set custom error messages.

zapClass

string

Allows overriding default styles by passing Tailwind CSS classes. Utilize the @zaplib/zapui/tailwind plugin to target specific elements within the date picker component.

Supported directives

SelectorDirective nameDescription

zapFormFieldIcon

ZapFormFieldIconDirective

Import a directive ZapFormFieldIconDirective into your component to enables adding any type of icon to a date picker, including SVGs, font-based icons, and more.

zapFormFieldHelpText

ZapFormFieldHelpTextDirective

Import a directive ZapFormFieldHelpTextDirective into your component to enable adding any help text to an date picker.

zapLabel

ZapLabelDirective

Import a directive ZapLabelDirective into your component to enable adding any label to an inout.

Example

Preview

Code

date picker data range

Select

For accurate results:

  • date picker data not earlier than 2000

  • date picker data not later than 2024

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape - date-picker

Property

Description

shape

Defines the shape of the date picker. Can be flat, curve, or pill.

Shape - dp-calendar

Property

Description

shape

Defines the shape of the date picker. Can be flat, curve, or pill.

Shape - dp-calendar-date picker

Property

Description

shape

Defines the shape of the date picker. Can be flat, curve, or pill.

Colors - date-picker

You can provide each of these colors for different themes that you use

Property

Description

iconColor

Icon color of the date picker.

bgColor

Background color of the date picker.

textColor

Text color of the date picker.

borderColor

Border color of the date picker.

textHoverColor

Color of the text on hover

bgHoverColor

Background color of the date picker when hovered.

ringFocusColor

Ring color of the date picker when focused.

placeholderColor

Text color of the placeholder

labelColor

Text color of the label

helpTextColor

Text color of the help text

disabledBgColor

Background color of the date picker when disabled.

disabledBorderColor

Border color of the date picker when disabled.

disabledTextColor

Text color of the date picker when disabled.

disabledLabelColor

Color of the label when disabled.

disabledHelpTextColor

Color of the help text when disabled.

Colors - dp-calendar

You can provide each of these colors for different themes that you use

Property

Description

borderColor

Border color of the date picker.

handlerBorderColor

Border color of the handler of the date picker.

handlerBgColor

Background color of the handler of the date picker.

handlerColor

Color of the handler in the date picker.

handlerBgHoverColor

Background color of the handler when hovered in the date picker.

handlerBorderHoverColor

Border color of the handler when hovered in the date picker.

dayTextColor

Text color of the day element in the date picker.

dayBgColor

Background color of the day element in the date picker.

dayBorderColor

Border color of the day element in the date picker.

dayTextHoverColor

Text color of the day element when hovered.

dayBgHoverColor

Background color of the day element when hovered.

dayBorderHoverColor

Border color of the day element when hovered.

dayOfWeekTextColor

Text color of the day-of-week elements in the date picker.

dayOfWeekBgColor

Background color of the day-of-week elements in the date picker.

dayOfWeekBorderColor

Border color of the day-of-week elements in the date picker.

dayOfWeekTextHoverColor

Text color of the day-of-week elements when hovered.

dayOfWeekBgHoverColor

Background color of the day-of-week elements when hovered.

dayOfWeekBorderHoverColor

Border color of the day-of-week elements when hovered.

inRangeBgColor

Background color of the day elements that fall within the selected range.

inRangeBorderColor

Border color of the day elements that fall within the selected range.

inRangeTextColor

Text color of the day elements that fall within the selected range.

dayActiveMonthBgColor

Background color of day elements that belong to the active month.

dayActiveMonthBorderColor

Border color of day elements that belong to the active month.

dayActiveMonthTextColor

Text color of day elements that belong to the active month.

dayActiveMonthTextHoverColor

Text color of day elements that belong to the active month when hovered.

dayActiveMonthBgHoverColor

Background color of day elements that belong to the active month when hovered.

dayActiveMonthBorderHoverColor

Border color of day elements that belong to the active month when hovered.

todayTextColor

Text color of the day element representing today.

todayBgColor

Background color of the day element representing today.

todayBorderColor

Border color of the day element representing today.

todayTextHoverColor

Text color of the day element representing today when hovered.

todayBgHoverColor

Background color of the day element representing today when hovered.

todayBorderHoverColor

Border color of the day element representing today when hovered.

inRangeActiveMonthBgColor

Background color of day elements in the active month when they fall within the selected range.

inRangeActiveMonthBorderColor

Border color of day elements in the active month when they fall within the selected range.

inRangeActiveMonthTextColor

Text color of day elements in the active month when they fall within the selected range.

selectedActiveMonthBgColor

Background color of the selected day elements in the active month.

selectedActiveMonthBorderColor

Border color of the selected day elements in the active month.

selectedActiveMonthTextColor

Text color of the selected day elements in the active month.

selectedActiveMonthTextHoverColor

Text color of the selected day elements in the active month when hovered.

selectedActiveMonthBgHoverColor

Background color of the selected day elements in the active month when hovered.

selectedActiveMonthBorderHoverColor

Border color of the selected day elements in the active month when hovered.

selectedBgColor

Background color of the selected day elements.

selectedBorderColor

Border color of the selected day elements.

selectedTextColor

Text color of the selected day elements.

selectedTextHoverColor

Text color of the selected day elements when hovered.

selectedBgHoverColor

Background color of the selected day elements when hovered.

selectedBorderHoverColor

Border color of the selected day elements when hovered.

Colors - dp-calendar-select

You can provide each of these colors for different themes that you use

Property

Description

bgColor

Background color of the date picker.

textColor

Text color of the date picker.

borderColor

Border color of the date picker.

bgHoverColor

Background color of the date picker when hovered.

textHoverColor

Color of the text on hover

borderHoverColor

Border color of the date picker when hovered.

optionsBgColor

Background color of the options dropdown in the date picker.

optionsTextColor

Text color of the options dropdown in the date picker.

optionsBorderColor

Border color of the options dropdown in the date picker.

optionTextColor

Text color of an individual option in the date picker dropdown.

optionBgColor

Background color of an individual option in the date picker dropdown.

optionBorderColor

Border color of an individual option in the date picker dropdown.

optionBgHoverColor

Background color of an individual option in the date picker dropdown when hovered.

optionTextHoverColor

Text color of an individual option in the date picker dropdown when hovered.

optionBorderHoverColor

Border color of an individual option in the date picker dropdown when hovered.

selectedTextColor

Text color of the selected option in the date picker dropdown.

selectedBgColor

Background color of the selected option in the date picker dropdown.

selectedBorderColor

Border color of the selected option in the date picker dropdown.

selectedBgHoverColor

Background color of the selected option in the date picker dropdown when hovered.

Other styles - date-picker

You can provide a bunch of other styles, that are not theme based but rather generic

Property

Description

borderRadius

Defines the radius of the date picker's corners.

paddingLeft

Left padding of the date picker.

paddingRight

Right padding of the date picker.

paddingTop

Top padding of the date picker.

paddingBottom

Bottom padding of the date picker.

padding

Padding around the date picker's content.

placeholderFontSize

Font size of the date picker's placeholder.

placeholderFontWeight

Font weight of the date picker's placeholder.

placeholderLineHeight

Line height of the date picker's placeholder.

placeholderLetterSpacing

Letter spacing of the date picker's placeholder.

labelFontSize

Font size of the date picker's label.

labelFontWeight

Font weight of the date picker's label.

labelLineHeight

Line height of the date picker's label.

labelLetterSpacing

Letter spacing of the date picker's label.

helpTextFontSize

Font size of the date picker's help text.

helpTextFontWeight

Font weight of the date picker's help text.

helpTextLineHeight

Line height of the date picker's help text.

helpTextLetterSpacing

Letter spacing of the date picker's help text.

Other styles - dp-calendar

You can provide a bunch of other styles, that are not theme based but rather generic

Property

Description

borderRadius

Defines the radius of the calendar's corners.

paddingLeft

Left padding of the calendar.

paddingRight

Right padding of the calendar.

paddingTop

Top padding of the calendar.

paddingBottom

Bottom padding of the calendar.

padding

Padding around the calendar's content.

handlerBorderRadius

Defines the border radius of the calendar handler.

handlerHeight

Specifies the height of the calendar handler.

handlerWidth

Specifies the width of the calendar handler.

handlerPaddingLeft

Defines the left padding of the calendar handler.

handlerPaddingRight

Defines the right padding of the calendar handler.

handlerPaddingTop

Defines the top padding of the calendar handler.

handlerPaddingBottom

Defines the bottom padding of the calendar handler.

handlerPadding

Specifies the overall padding applied to the calendar handler.

dayHeight

Defines the height of individual day elements in the calendar.

dayWidth

Defines the width of individual day elements in the calendar.

dayBorderRadius

Defines the border radius of individual day elements in the calendar.

dayOfWeekHeight

Specifies the height of day-of-week elements in the calendar.

dayOfWeekWidth

Specifies the width of day-of-week elements in the calendar.

dayOfWeekBorderRadius

Defines the border radius of day-of-week elements in the calendar.

Other styles - dp-calendar-select

You can provide a bunch of other styles, that are not theme based but rather generic

Property

Description

borderRadius

Defines the border radius of the select dropdown in the calendar.

paddingLeft

Specifies the left padding inside the select dropdown.

paddingRight

Specifies the right padding inside the select dropdown.

paddingTop

Defines the top padding inside the select dropdown.

paddingBottom

Defines the bottom padding inside the select dropdown.

padding

Specifies the overall padding applied to the select dropdown.

fontSize

Defines the font size of the text inside the select dropdown.

fontWeight

Sets the font weight of the text inside the select dropdown.

lineHeight

Defines the line height of text inside the select dropdown.

letterSpacing

Specifies the letter spacing of text inside the select dropdown.

optionsBorderRadius

Defines the border radius of the options within the select dropdown.

optionPaddingLeft

Specifies the left padding inside each option in the select dropdown.

optionPaddingRight

Specifies the right padding inside each option in the select dropdown.

optionPaddingTop

Defines the top padding inside each option in the select dropdown.

optionPaddingBottom

Defines the bottom padding inside each option in the select dropdown.

optionPadding

Specifies the overall padding applied to each option in the select dropdown.

optionFontSize

Defines the font size of the options in the select dropdown.

optionFontWeight

Sets the font weight of the options in the select dropdown.

optionLineHeight

Defines the line height of the options in the select dropdown.

optionLetterSpacing

Specifies the letter spacing of the options in the select dropdown.

selectedFontSize

Defines the font size of the selected option in the select dropdown.

selectedFontWeight

Sets the font weight of the selected option in the select dropdown.

selectedLineHeight

Defines the line height of the selected option in the select dropdown.

selectedLetterSpacing

Specifies the letter spacing of the selected option in the select dropdown.