Code Monkey home page Code Monkey logo

praecox-datepicker's Introduction

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

praecox-datepicker's People

Contributors

asahelk avatar bighamster avatar dependabot[bot] avatar dluigirafael avatar mriot avatar nkalousis avatar soymanuvalle avatar taffit avatar tiovoit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

praecox-datepicker's Issues

I have translated to Dutch language (nl)

I wanted to create a pull request, but github said the following: "Choose different branches or forks above to discuss and review changes."

Anyway, here is dutch translatation:

  nl: {
    weekShortAbbreviation: ["m", "d", "w", "d", "v", "z", "z"],
    weekAbbreviation: ["ma", "di", "wo", "do", "vr", "za", "zo"],
    weekFullName: ["maandag", "dinsdag", "woensdag", "Thursday", "Friday", "Saturday", "Sunday"],
    monthAbbreviation: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
    monthFullName: [
      "januari",
      "februari",
      "maart",
      "april",
      "mei",
      "juni",
      "juli",
      "augustus",
      "september",
      "oktober",
      "november",
      "december",
    ],
    today: "Vandaag",
    doneName: "Klaar",
    prevName: "Vorige",
    nextName:"Volgende"
  },

Days and months are lowercase on prupose. This is the correct way in dutch.

I would really apreciate if you could add this. I want to use it in my project real bad :)

Spanish support

Id like to include the spanish support for the timepicker

Highlight pre-selected dates

Is there a way to style dates that have been previously selected? For example, as a user selects dates, possibly store those in an array and then add some type of styling to the calendar (change of color, dot on the date, etc.) that indicates the user has already interacted with that date?

Performance optimization

When I wrote the REPL Demo on the svelte.dev site, I found that there may be performance issues.

Some disabled dates in string format doesn't become disabled

See REPL

<script>
  import { beforeUpdate } from "svelte";
  import Datepicker from "praecox-datepicker";

  let ty = new Date().getFullYear();
  let tm = new Date().getMonth() + 1;
  let disabled = [];
  beforeUpdate(() => {
    disabled = [
      ['2021-10-13'] // must be disabled but not
    ];
  });
</script>

<Datepicker {disabled} nowDate={'2021-10-1'} />

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.