vysko-react-datepicker

v1.0.2

Published

a year ago

Modern customizable datepicker for react.

0High
0Medium
0Low

react date datepicker calendar react-datepicker date picker date selection UI components react components javascript frontend npm package

📅✨ vysko-react-datepicker

Are you looking for a modern datepicker solution without installing unnecessary ui libraries and a bunch of their dependencies?

In that case, this simple customizable datepicker is for you!

Developed and maintained by Jan Vyskočil (aka. Vysko).

Features

🎨 Theming: Choose between light and dark themes and specify your own primary color for the text and icons.
💬 Localization: Either use one of the predefined languages or simply provide your own translations. You can also change the date format shown in the input!
⚙️ Control: You can control the value, listen for changes. Also you can disable specific dates or set a minDate / maxDate and much more!
✅ Works with forms: If the datepicker is inside a form, formData will contain it's value if you specify inputName.

And much more!

Requirement

To use vysko-react-datepicker, you must use [email protected] or greater which includes hooks.

Instalation

$ npm install vysko-react-datepicker
# or
$ yarn add vysko-react-datepicker

📘 Basic example

import DatePicker from "vysko-react-datepicker"

const App = () => {
    return <DatePicker />
}

📚 Props

Practical examples

💬 Localization

Example 1: Pick between available locales

Available locales: English en, Czech cs, Slovak sk, German de, Spanish es, French fr

<DatePicker locale={"de"} />
// Uses German translations for days, months, placeholder...

Example 2: Custom translations

Didn't find your language in the available languages or want to specify your own translations?

<DatePicker
    customLocale={{
        months: ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"],
        days: ["M", "T", "W", "T", "F", "S", "S"]
    }}
    placeholder={"Select a date"}
/>

Example 3: Custom date format

Provide a string. MM, DD and YYYY symbols will be replaced with the selected date. The rest of the string will remain.

DD - day, MM - month, YYYY - year

    <DatePicker dateFormat={"DD/MM/YYYY"} />
    // or
    <DatePicker dateFormat={"DD. MM. YYYY"} />
    // or
    <DatePicker dateFormat={"MM-DD-YYYY"} />

🎨 Customize theme

Example 1: Dark theme

<DatePicker theme={"dark"} />

Example 2: Custom primary color

Specify custom primary color that is used for the calendar icon, hover effects etc..

<DatePicker color={"#6988d6"}>

You can also use className, inputClassName or pickerClassName 😉

Check out all the props

⚙️ Usage within a <form>

    const submitForm = (formData) => {
        var selectedDate = formData.get("date")
    }

    <form action={submitForm}>

        <DatePicker
            inputName={"date"}
            required={true}
        />
        <button type="submit">Submit form</button>

    </form>

📅 Limit date selection

    <DatePicker
        minDate={new Date("2024-10-15")}
        maxDate={new Date("2024-12-20")}
        disabledDates={[
            new Date("2024-11-05"),
            new Date("2024-11-06")
        ]}
    />

⚙️ Event handlers

    import { useState } from "react";
    
    const [value, setValue] = useState();

    function onChange(date) { setValue(date) }
    function onClose() { ... }
    function onOpen() { ... }
    function onMonthChange() { ... }
    function onYearChange() { ... }

    <DatePicker    
        value={value}

        onChange={(date) => {onChange(date)}}
        onClose={() => {onClose}}
        onOpen={() => {onOpen}}
        onMonthChange={() => {onMonthChange}}
        onYearhChange={() => {onYearChange}}
    />