Date picker by raficraft

A multilingual date picker from scratch for react. Code source

Live demo host on netlify

Supported language

• English (gb)
• English (us)
• French (fr)
• German (de)
• Spanish (sp)
• Italian (it)

Other languages ​​will be added. Stay tuned. ^^

Install

In your terminal

npm i datepicker_by_raficraft

in your React.js project

import { DatePicker } from "datepicker_by_raficraft";

Use

    //In a simple way

    <DatePicker></DatePicker>

    // Or whit props , all pros are optional
    // Supported language [fr, gb, us, it, de, es]

    <DatePicker
        start={date.start} 
        end={date.end}        
        language="es"
        label="Espagnol picker"
        forHtml="es_picker"
        key="es"  // If you use, multiple picker. Define a unique key identifier
        autocomplete="false"
        readonly="null"
        required="true"
    ></DatePicker>

    //You can launch the 

Settings

By default the calendar is calculated by contribution to the current year. The calendar limits are calculated fifty years before the current year and fifty years after ex: for the year 2022, we get a calendar that starts in 1972 and ends in 2052.

The different props that you can pass in your component

//Default Value 

    // [ label ] Optional, if you define it, a label will be associated with the input of the date picker
    label = "date picker",  

    // [ forHtml ] Add a "for" attribute in the label and an "ID" attribute in the input. If no label, only the
    // ID will be added. Indispensable if you have several date pickers on the same page. ^^
    forHtml = "datePicker", 

    // [ language ] Defines the date format and language
    // Supported language [fr, gb, us, it, de, es]
    language = "gb",

    // [ start || end ]  First and last year of the calendar.

    start = new Date().getFullYear() - 50,
    end = new Date().getFullYear() + 50,

    // [ autocomplete ] Disable autocompletion. For enabled change the paramters to "on"
    autocomplete = "off",  

    // [ readonly ] Prevent the user from modifying the field manually
    readonly="null", 

    // [ required ] Make the field mandatory for the validation of your form. 
    // For disabled change the paramter to false
    requrired="true",

Change style

You can change the styles of the picker by overriding the classes of the latter. HTML structure of the picker.

<div class="container_dataPicker_by_raficraft">
    <label forhtml="es_picker">Espagnol picker</label>
    <input type="text" class="fakeInput" placeholder="dd-mm-yy" name="es_picker" id="es_picker" 
            data-format="date" autocomplete="off">
    <div class="carousel">
        <header class="head">
            ...Contains the navigation button, the select button and the home button
        </header>
        <div class="carousel_container">
            <table>
                <thead>
                    ...Contains the days of the week
                <thead>
                <tbody>
                    ...Contains the days of the month 
                    <tr>
                        <td class="current" data-fulldate="14-01-22" data-year="2022" 
                            data-month="enero">14</td>
                        OR
                        <td class="currentDay" data-fulldate="14-01-22" data-year="2022" 
                            data-month="enero">14</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

// Don't do That 

table{
    background-color : red;
}

//If you do this then the background color of the picker will be red.

Manage Error

For error handling, you can directly target this dom element to manage its display

<span class="error_message_container">
    <p class="error_message"></p>
</span>

Author

Hi, I am a front-end developer specializing in react.js and javascript. What I like the most developed are tools and components designed to improve the productivity of front-line developers. Join me on linkedin so as not to miss any of my work. See you soon !! ^^

SoftSkill profil

Linkedin profil

Github repository

Patch Notes

15/01/2022

• Add new props "required"
• Add new props "readonly"