Skip to content
Get Pro
Forms

Date Picker

A date field with a calendar popup. One highlight slides between days, months slide sideways with both grids in view, and in range mode a continuous band grows to follow the pointer.

$149 once · every Pro piece

Customize

Install

npx shadcn@latest add @obsyde/date-picker

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { DatePicker } from '@/components/obsyde/ember/date-picker/DatePicker';

export function Example() {
  return (
    <DatePicker label="Date" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/date-picker/DatePicker.tsxcomponent
  • ember/date-picker/date-picker.cssstyles
  • ember/date-picker/dates.tsmodule
  • ember/date-picker/DatePickerDemo.tsxdemo
  • ember/nav-kit/icons.tsxshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/nav-kit/motion.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
labelLabelstring'Date'
modeMode'single' | 'range''single'
valueValue (yyyy-mm-dd)string—
valueEndRange end (yyyy-mm-dd)string—
weekStartWeek starts'monday' | 'sunday''monday'
minEarliest (yyyy-mm-dd)string—
maxLatest (yyyy-mm-dd)string—
disabledDisabledbooleanfalse