All Projects β†’ mberneti β†’ React Datepicker2

mberneti / React Datepicker2

Licence: mit
react datepicker component.(include persian jalaali calendar)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Datepicker2

Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+504.71%)
Mutual labels:  calendar, datepicker
Pg Calendar
πŸ“† beautiful and eidetic date picker
Stars: ✭ 109 (-42.93%)
Mutual labels:  calendar, datepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-58.64%)
Mutual labels:  calendar, datepicker
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+341.36%)
Mutual labels:  calendar, datepicker
React Native Dates
React Native date / daterange picker and calendar
Stars: ✭ 145 (-24.08%)
Mutual labels:  calendar, datepicker
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-82.2%)
Mutual labels:  calendar, datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-54.97%)
Mutual labels:  calendar, datepicker
React Modern Calendar Datepicker
A modern, beautiful, customizable date picker for React
Stars: ✭ 555 (+190.58%)
Mutual labels:  calendar, datepicker
React Calendar
React.js Calendar Component (npm install react-calendar-component) πŸ“…
Stars: ✭ 142 (-25.65%)
Mutual labels:  calendar, datepicker
Calendar
πŸ“† calendar ζ—₯εŽ†
Stars: ✭ 119 (-37.7%)
Mutual labels:  calendar, datepicker
Vue Calendar
πŸ† 基于 vue 2.0 εΌ€ε‘ηš„θ½»ι‡οΌŒι«˜ζ€§θƒ½ζ—₯εŽ†η»„δ»Ά
Stars: ✭ 828 (+333.51%)
Mutual labels:  calendar, datepicker
Things Calendar
Simple but elegant datepicker for the web β€” inspired by Things for mac
Stars: ✭ 165 (-13.61%)
Mutual labels:  calendar, datepicker
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+270.16%)
Mutual labels:  calendar, datepicker
Laydate
layDate(ζ—₯ζœŸδΈŽζ—Άι—΄η»„δ»ΆοΌ‰ 是 layui η‹¬η«‹η»΄ζŠ€ηš„δΈ‰ε€§η»„δ»ΆδΉ‹δΈ€
Stars: ✭ 1,066 (+458.12%)
Mutual labels:  calendar, datepicker
Vue Hotel Datepicker
Vue date range picker component
Stars: ✭ 665 (+248.17%)
Mutual labels:  calendar, datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-55.5%)
Mutual labels:  calendar, datepicker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+180.63%)
Mutual labels:  calendar, datepicker
Ion2 Calendar
πŸ“… A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+181.15%)
Mutual labels:  calendar, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (-38.74%)
Mutual labels:  calendar, datepicker
Air Datepicker
Lightweight, dependency-free JavaScript datepicker.
Stars: ✭ 1,913 (+901.57%)
Mutual labels:  calendar, datepicker

React DatePicker2

All Contributors

npm npm Build Status Dependency Status

A simple and reusable Datepicker component for React (with persian jalali calendar support) Demo.

This package uses react-persian-datepicker project under the hood.

Installation

The package can be installed via NPM:

npm install react-datepicker2 --save

At this point you can import react-datepicker2 and its styles in your application as follows:

import DatePicker from 'react-datepicker2';

Below is a simple example on how to use the Datepicker in a React view.

import React from 'react'
import moment from 'moment-jalaali'
import DatePicker from 'react-datepicker2';

export default class ReactClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: moment() };
  }
  render() {
    return <DatePicker
      onChange={value => this.setState({ value })}
      value={this.state.value}
    />
  }
}

Configuration

The most basic use of the DatePicker can be described with:

<DatePicker onChange={value => this.setState({ value })} value={this.state.value} />

Local Development

The master branch contains the latest version of the Datepicker2 component. To start your example app, you can run npm install then npm start. This starts a simple webserver on http://localhost:8080.

Todo

  • [x] Write some tests
  • [x] Improve documentation
  • [x] Remove css loading dependency
  • [x] UI improvements
  • [x] Adding new highlight feature
  • [x] Adding new year picker feature
  • [x] Adding typescript support
  • [ ] Adding new rangepicker feature

Built With

  • moment-jalaali - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.

Thanks

Special thanks to @mohebifar for his open-source project which this component is based on.

Contributing

Contributions are welcome and will be fully credited. I'd be happy to accept PRs for that.

License

Copyright (c) 2016 mberneti Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


mohammadreza berneti

πŸ’» πŸ€” πŸ“– πŸ› 🎨 πŸ’‘ 🚧 πŸ“¦ πŸ’¬ πŸ‘€ πŸ“†

Mohamad Mohebifar

πŸ€” πŸ“– πŸ’»

Ali Akbar Azizi

🚧 πŸ“¦ πŸ’» πŸ› πŸ’¬

Ali Najafi

🚧 πŸ’»

Mehrdad Mehralian

πŸ’» 🎨

mojtaba Shayegh

πŸ› πŸ’»

mory rezaee

🚧 πŸ’»

Mathieu Saubin

🚧 πŸ’»

alireza molaee

🚧 πŸ’»

Ali MoghaddasZadeh

πŸ›

amir zamani

🚧 πŸ“¦ πŸ’» πŸ› πŸ’¬

Afsane Fadaei

🚧 πŸ’¬

Hossein Aghatabar

πŸ›

Mahdi

πŸ’»

Hosein BehkamaL

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].