Nearly Perfected Mystique

    praecox-datepicker

    1.1.7 • Public • Published

    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

    Install

    npm i praecox-datepicker

    DownloadsWeekly Downloads

    378

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    401 kB

    Total Files

    27

    Last publish

    Collaborators

    • runningzs