All Projects β†’ y0c β†’ React Datepicker

y0c / React Datepicker

Licence: mit
πŸ“… React DatePicker Library (Flexible, Reusable)

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Datepicker

Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+224.85%)
Mutual labels:  moment, calendar, datepicker, timepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+681.21%)
Mutual labels:  moment, datepicker, timepicker
Air Datepicker
Lightweight, dependency-free JavaScript datepicker.
Stars: ✭ 1,913 (+1059.39%)
Mutual labels:  calendar, timepicker, datepicker
Pg Calendar
πŸ“† beautiful and eidetic date picker
Stars: ✭ 109 (-33.94%)
Mutual labels:  moment, calendar, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (-29.09%)
Mutual labels:  calendar, datepicker, timepicker
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: ✭ 86 (-47.88%)
Mutual labels:  calendar, datepicker, moment
Zebra datepicker
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin
Stars: ✭ 367 (+122.42%)
Mutual labels:  calendar, datepicker, timepicker
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+328.48%)
Mutual labels:  calendar, datepicker, timepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-47.88%)
Mutual labels:  calendar, datepicker
Datetimepicker
πŸ“… Date and Time Picker
Stars: ✭ 90 (-45.45%)
Mutual labels:  datepicker, timepicker
Materialdaterangepicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker
Stars: ✭ 1,315 (+696.97%)
Mutual labels:  datepicker, timepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-48.48%)
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 (-52.12%)
Mutual labels:  calendar, datepicker
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (-30.3%)
Mutual labels:  datepicker, timepicker
Things Calendar
Simple but elegant datepicker for the web β€” inspired by Things for mac
Stars: ✭ 165 (+0%)
Mutual labels:  calendar, datepicker
Rc Datetime Picker
React component for datetime picker by Moment.js
Stars: ✭ 85 (-48.48%)
Mutual labels:  moment, datepicker
React Input Calendar
Stars: ✭ 138 (-16.36%)
Mutual labels:  moment, calendar
Jalali Angular Datepicker
Highly configurable jalali (shamsi, khorshidi, persian) date picker built for Angular ( 2 or more ) applications
Stars: ✭ 125 (-24.24%)
Mutual labels:  moment, datepicker
React Calendar
React.js Calendar Component (npm install react-calendar-component) πŸ“…
Stars: ✭ 142 (-13.94%)
Mutual labels:  calendar, datepicker
React Native Dates
React Native date / daterange picker and calendar
Stars: ✭ 145 (-12.12%)
Mutual labels:  calendar, datepicker

drawing

React DatePicker

License: MIT npm version Build Status codecov Maintainability code style: prettier dependencies Status devDependencies Status Storybook NPM Download Join the chat at https://gitter.im/react-datepicker/community

Flexible, Reusable, Mobile friendly DatePicker Component

🎬 Intro

DatePicker

datepicker

RangeDatePicker

rangedatepicker

Demo in Storybook

Edit React Datepicker

✨ Major Component

  • RangeDatePicker
  • DatePicker
  • Standalone Calendar

The components that you can use are as follows: If you want to configure the DatePicker yourself, you can configure it any way you want through the Default Calendar component.

πŸ”§ Built With

  • TypeScript
  • Sass
  • React

πŸ“¦ Dependency

  • Moment.js

In previous versions, moment.js were used. but now it is changed to Day.js to because of bundle size issue (#14)

Day.js is a javascript library for Parse, validate, manipulate, and display dates and times. this component use Day.js library to globalize and control date. You can check the locale list through this link.

πŸ“² Installation

yarn add @y0c/react-datepicker
# or 
npm install --save @y0c/react-datepicker

πŸ’‘ Examples

Simple DatePicker

// import Calendar Component 
import React, { Component } from 'react';
import { DatePicker } from '@y0c/react-datepicker';
// import calendar style 
// You can customize style by copying asset folder.
import '@y0c/react-datepicker/assets/styles/calendar.scss';

class DatePickerExample extends Component {

  onChange = (date) => {
    // Day.js object
    console.log(date);

    // to normal Date object
    console.log(date.toDate());
  }
  
  render() {
    return (
      <DatePicker onChange={this.onChange}/>
    )
  }
}

You can find more Exmaples and Demo in story book link

🌎 i18n

Features for i18n are provided by Day.js by default.

see locale list https://github.com/iamkun/dayjs/tree/dev/src/

and you can customize the locale object

// use day.js locale
import 'dayjs/locale/ko'

// delivery prop locale string  
<DatePicker locale="ko" />

// or define customize locale object 
const locale = {
  name: 'ko',
  weekdays: 'μΌμš”μΌ_μ›”μš”μΌ_ν™”μš”μΌ_μˆ˜μš”μΌ_λͺ©μš”일_κΈˆμš”μΌ_ν† μš”μΌ'.split('_'),
  weekdaysShort: '일_μ›”_ν™”_수_λͺ©_금_ν† '.split('_'),
  months: '1μ›”_2μ›”_3μ›”_4μ›”_5μ›”_6μ›”_7μ›”_8μ›”_9μ›”_10μ›”_11μ›”_12μ›”'.split('_'),
};

// delivery propr locale object
<DatePicker locale={locale} />

Defaults locale en

🎨 Themeing

  1. Copy this project asset folder under scss file
  2. Override scss variable you want(_variable.scss) ( red theme examples )
// red_theme.scss
$base-font-size: 12px;
$title-font-size: 1.3em;

// override scss variable
$primary-color-dark: #e64a19;
$primary-color: #ff5722;
$primary-color-light: #ffccbc;
$primary-color-text: #ffffff;
$accent-color: #ff5252;
$primary-text-color: #212121;
$secondary-text-color: #757575;
$divider-color: #e4e4e4;
$today-bg-color: #fff9c4;

// import mixin 
@import "../node_modules/@y0c/react-datepicker/assets/styles/_mixin.scss";
// import app scss
// if you want other style customize 
// app.scss copy & rewrite !
@import "../node_modules/@y0c/react-datepicker/assets/styles/app.scss";

if you want custom css rewrite app.scss file

Try this example!

Edit 1rw1lp8w7j

βš™οΈ Local Development

This component is managed by a storybook which is combined with develop environment and documentation. If you want develop in local environment, clone project and develop through a storybook

# clone this project
git clone https://github.com/y0c/react-datepicker.git
# install dependency
yarn
# start storybook 
yarn run storybook

Open your browser and connect http://localhost:6006

πŸ’Ό Get Support

Please fork and use https://codesandbox.io/s/pw6n17pk57 to reproduce your problem.

  • Open a new issue(Bug or Feature) on Github
  • Join the Gitter room to chat with other developers.

πŸ‘¨β€πŸ‘¦β€πŸ‘¦ Contribution

Issue and Pull Request are always welcome!

πŸ“ License

MIT

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].