1.2.2 • Published 8 months ago

@sbmdkl/nepali-datepicker-reactjs v1.2.2

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

@sbmdkl/nepali-datepicker-reactjs

NPM JavaScript Style Guide

A simple and reusable Datepicker component for React Read Full Documentation.

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 nameDescriptionDefault valueExample values
classNameCustom class to input field of calendar.n/a'form-control'
defaultDateDefault date to start the calendar. Date format must be YYYY-MM-DD and in english numbern/a"YYYY/MM/DD"
dateFormatInput Date Format. Supported values are: YYYY,YYY,YY, M, MM, MMMM, D, DD, DDD, DDDD.YYYY-MM-DD"YYYY/MM/DD"
languageLanguage options are: en or ne. Shows the calendar in different language.ne"ne"
minDateMininum date, below minimum date (included) all dates are disabled. Date format must be YYYY-MM-DD and in english numbern/a"2077-10-20"
maxDateMaximum date, above maximum date (included) all dates are disabled. Date format must be YYYY-MM-DD and in english numbern/a"2077-12-05"
onChangeFunction 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)
styleCustom style to input field of calendar.n/a{{color:'red'}}
themeUse multi theme availabe by defaults. Theme supports : red blue green dark deepdark default.default"red"
hideDefaultValuehide initial date value in the inputfalsetrue
placeholderYour custom placeholdern/a"Select Date"

dateFormat

Format the date to provide various output based on format string

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: सोमवार, २०७७-११-०३

<Calendar onChange={this.onChange} dateFormat='DDDD, MMMM DD, YYYY' />

output: शुक्रवार, फाल्गुन १४, २०७७

<Calendar onChange={this.onChange} language='en' dateFormat='DDDD, MMMM DD, YYYY' />

output: Friday, Falgun 14, 2077

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

License

MIT © Shubham Dhakal

1.2.2

8 months ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.0

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago