Svelte Date (Range) Picker

Simple and reusable date (range) picker.

Installation

The package can be installed via npm:

npm install @kamrade/svelte-datepicker --save

or via yarn:

yarn add @kamrade/svelte-datepicker

Props

Calendar

  dateRange: boolean;
  datePrimary: Date | boolean;
  dateSecondary: Date | boolean;
  onChange: (datePrimary?: Date, dateSecondary?: Date) => void;
  styles: ICalendarOptions;
  weekStartsFrom: 'Monday' | 'Sunday;
  dateLimitation: (Date | null)[] // 1st value = from, 2nd = to
  showDescription: boolean;

  interface ICalendarOptions {
    textColorBase?: string;
    textColorSecondary?: string;
    textColorPrimary?: string;
    textColorMuted?: string;
    textColorBaseInverted?: string;
    textColorSecondaryInverted?: string;
    textColorPrimaryInverted?: string;

    lineColorPrimary?: string;

    surfaceColorBase?: string;
    surfaceColorDateActive100?: string;
    surfaceColorDateActive200?: string;
    surfaceColorDateFrame100?: string;
    surfaceColorDateFrame200?: string;
    surfaceColorDateSelection100?: string;
    surfaceColorDateSelection200?: string;

    spacingNull?: number;
    spacingSmall?: number;
    spacingBase?: number;
    spacingCalendarPadding?: number;
    spacingDateSize?: number;

    radiusNull?: number;
    radiusDay?: number;
    radiusControl?: number;
    radiusPanel?: number;

    disabledDaysOpacity?: string;
    otherMonthsOpacity?: string;
    baseFontSize?: string;
  }

All of the ICalendarOptions are synced with Figma variables ot styles.

Figma Showcase

Duplicate this figma file. Change the variables and import to your figma project. Figma variables are synchronized with package.

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

Roadmap

All

• Unit tests

Dropdown

[ ] Correct direction according to the position on the screen

Calendar

• value + onChange mechanism
• styling options (css variables and js object)
• reassign variables
• week starts from ...
• value - only in Range
  • can't be bigger than ...
  • can't be smaller than ...
  • check input dates
  • prohibit to set range over the limiters
• additional buttons for change year
• Custom icons
• Dropdown for Month and Year
• Internationalization
• 2 month
• Appearing animation
• Allow single date range
• Single date control

DateRangePicker

• value + onChange mechanism

• Calendar props (styling, weekStarts)

• Disabled, disabled start date, disabled end date

• Readonly

• Clear dates button

• Custom display format

• Calendar icon, customization

• Control styling