Nepali Date Picker for React

Nepali Date Picker for React

An easy yet fully configurable Nepali date picker component for React.

@sbmdkl/nepali-datepicker-reactjs

Installation

npm install @sbmdkl/nepali-datepicker-reactjs
default blue
dark red
deepdark green

Usage

//Class Component
import React from 'react';

import Calendar from '@sbmdkl/nepali-datepicker-reactjs';
import '@sbmdkl/nepali-datepicker-reactjs/dist/index.css';

class App extends React.Component {
    state = {date: ''}

    onChange = ({ bsDate, adDate }) => {
        this.setState({ date: bsDate });
    };

    render() {
        return (
            <div>
                <Calendar onChange={this.onChange} />
            </div>
        );
    }
}

export default App;
//Functional Component
import React,{ useState} from "react";

import Calendar from "@sbmdkl/nepali-datepicker-reactjs";
import "@sbmdkl/nepali-datepicker-reactjs/dist/index.css";

function App() {
  const [date,setDate] = useState("");

 const handleDate = ({ bsDate, adDate }) => {
    setDate({ date: bsDate });
  };
    return (
      <div>
        <h1>Nepali Date Picker for React</h1>
        <Calendar onChange={handleDate} theme="deepdark" />
      </div>
    );
}

export default App;

User guide

Props
Prop name Description Default value Example values
className Custom class to input field of calendar. n/a 'form-control'
dateFormat Input Date Format. Supported values are: YYYY,YYY,YY, M, MM, D, DD, DDD, DDDD. YYYY-MM-DD "YYYY/MM/DD"
language Language options are: en or ne. Shows the calendar in different language. ne "ne"
onChange Function called when the user clicks an item on the most detailed view available. Returns both selected nepali date and english date. n/a (value) => alert('New date is: ', value)
style Custom style to input field of calendar. n/a {{color:'red'}}
theme Use multi theme availabe by defaults. Theme supports : red blue green dark deepdark default. default "red"

dateFormat

Format the date to provide various output based on format string

YYYY - 4 digit of year (२०७७)
YYY  - 3 digit of year (०७७)
YY   - 2 digit of year (७७)
M    - month number (१ - १२)
MM   - month number with 0 padding - (०१-१२)
D    - Day of Month (१, २, ३ ... ३१, ३२)
DD   - Day of Month with zero padding (०१, ०२, ...)
DDD  - Day of week in short form (आइत, सोम, ...)
DDDD - Day of week full form  (आइतबार, सोमबार, ...)

Date Format output will auto change with the language. If language is set to english en, then YYYY will shows 2077, 2078 ..., similarily output of DDDD will shows Sunday, Monday ...

dateFormat Usage

    <Calendar onChange={this.onChange} dateFormat="DDDD, YYYY-MM-DD" />

output: सोमवार, २०७७-११-०३

Get Ad date of selected Date

// both Ad and BS dates are passed to onChange on each date selected
    onChange = ({ bsDate, adDate }) => {
        this.setState({ date: bsDate });
    };

Using with language and theme

import React from 'react';

import Calendar from '@sbmdkl/nepali-datepicker-reactjs';
import '@sbmdkl/nepali-datepicker-reactjs/dist/index.css';

class App extends React.Component {
    state = {date: ''}

    onChange = ({ bsDate, adDate }) => {
        this.setState({ date: bsDate });
    };

    render() {
        return (
            <div>
                <Calendar onChange={this.onChange} language="en" theme="deepdark" dateFormat="DDDD, YYYY-MM-DD" />
            </div>
        );
    }
}

export default App;

Output:

output

Download Details:

Author: sbmdkl

Source Code: https://github.com/sbmdkl/nepali-datepicker-reactjs

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.