Skip to content
This repository has been archived by the owner on Apr 3, 2023. It is now read-only.
/ praecox-datepicker Public archive

A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.

License

Notifications You must be signed in to change notification settings

TIOvOIT/praecox-datepicker

Repository files navigation

Praecox-datepicker

A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.

Screenshot

Theme
theme

Demo

Preview Multiple disabled Custom styles

Install

npm install --save praecox-datepicker

Usage

import Datepicker from "praecox-datepicker";
<Datepicker />

Props

Props Type Default Description
nowDate Date new Date() Current date
lang "en" | "zh" | "ru" | "ro" |"es" | "de" | "it" | "el" "en" Language
viewDate Date nowDate Current view date
pickerRule "single" | "range" | "free" "single" Date picker mode
disabled Date Array [] Disable date. When the value type is not an array, the length is not 2, and a single disabled mode is adopted. If it is 2 and the first value is smaller than the second value, it is a range disabled mode; when the value of Array[0] is an array , Can be disabled multiple times
selected string | Array [] Selected date, supports two-way binding, can be used to bind external results Issues
marked Date Array [] Date marked
weekNameMode "weekShortAbbreviation" | "weekAbbreviation" | "weekFullName" "weekAbbreviation"
monthNameMode "monthAbbreviation" | "monthFullName" "monthFullName"
theme "light" | "dark" "light"
reSelected boolean false When the range is selected, the value can be reset Issues
finishBtn boolean true Used to control whether finishBtn is displayed
reloadDisabled function undefined External function that get used to reload the disabled array on Next/Prev action
pickerDone boolean false Binding with the Finish button to increase UE and facilitate control of the display, if finishBtn prop is false, do not use this prop.

Built-in function

import Datepicker, {
  formatDatestamp,
  getNextYearAndMonth,
  getPrevYearAndMonth,
  getThisMonthData,
  testDaysInTheMonth,
  testLeapYear,
  testSolarMonthOf31Days,
  thisMonthHasManyWeek,
  theDayOfTheWeek,
} from "praecox-datepicker";

Custom styles

List of custom style variable names

--praecox-calendar-custom-width: 330px;
--praecox-calendar-custom-height: 310px;
--praecox-calendar-custom-inner-width: 310px;
--praecox-calendar-custom-inner-height: 220px;
--praecox-calendar-custom-head-height: 48px;
--praecox-calendar-custom-icon-size: 20px;
--praecox-calendar-custom-border-radius: 3px;
--praecox-calendar-custom-font-family: sans-serif;
--praecox-calendar-custom-number-font-family: "Open Sans", sans-serif;

--praecox-calendar-custom-main-color: #0060df;
--praecox-calendar-custom-main-color-hover: #0a84ff;
--praecox-calendar-custom-main-color-active: #0060df;
--praecox-calendar-custom-focused-color: #12bc00;
--praecox-calendar-custom-adjunctive-color: rgba(0, 96, 223, 0.1);
--praecox-calendar-custom-secondary-color: rgba(0, 96, 223, 0.2);
--praecox-calendar-custom-selected-color: #002275;

--praecox-calendar-custom-weekend-color: #f9f9fa;
--praecox-calendar-custom-outsidemonth-color: #b1b1b3;
--praecox-calendar-custom-overbackground-color: #f5f8ff;

--praecox-calendar-custom-font-main-color: #181818;
--praecox-calendar-custom-font-disabled-color: #d7d7db;
--praecox-calendar-custom-font-secondary-color: #b1b1b3;

--praecox-calendar-custom-background: #ffffff;
--praecox-calendar-custom-background-hover: #f5f8ff;
--praecox-calendar-custom-border: 1px solid #ededf0;
--praecox-calendar-custom-boxshadow: 0px 1px solid #ededf0;

License

MIT

About

A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published