Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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" "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
pickerDone boolean false Binding with the Finish button to increase UE and facilitate control of the display

Built-in function

import Datepicker, {
  formatDatetamp,
  getNextYearAndMonth,
  getPrevYearAndMonth,
  getThisMonthData,
  testDaysInTheMouth,
  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

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.