react-minimal-datetime-range

React


Keywords
react, minimal, date, time, range, picker
License
MIT
Install
npm install react-minimal-datetime-range@0.0.7

Documentation

react-minimal-datetime-range

npm version npm bundle size (minified + gzip) GitHub licenseLICENSE996.icu

React verify or password code entering component. Online demo examples.

Online Demo

Online demo example

Demo source code

Codesandbox Examples

Docs Link

Custom Locale Guid(can be multiple locales)

Version of 16.8.6 or higher of react and react-dom is required.

  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }

Installation

npm install react-minimal-datetime-range --save

Donation

Thanks for donating me a donut!  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Browser support

Tested on IE9+ and Chrome and Safari(10.0.3)

Docs

import { CalendarPicker, RangePicker } from 'react-minimal-datetime-range';
import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';

<CalendarPicker
  locale={`en-us`} // 'en-us' or 'zh-cn'; default is en-us
  show={showCalendarPicker} //default is false
  onClose={() => setShowCalendarPicker(false)}
  defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "MM/DD/YYYY"
  onYearPicked={res => console.log(res)}
  onMonthPicked={res => console.log(res)}
  onDatePicked={res => console.log(res)}
  onResetDate={res => console.log(res)}
  onResetDefaultDate={res => console.log(res)}
  style={{ width: '300px', margin: '10px auto 0' }}
/>

<RangePicker
  locale={`en-us`} // default is en-us
  show={false} // default is false
  placeholder={['Start Time', 'End Time']}
  defaultDates={[`${yearS}-${monthS}-${dateS}`, `${yearE}-${monthE}-${dateE}`]} // ['YYYY-MM-DD', 'YYYY-MM-DD']
  defaultTimes={[`${hourS}:${minuteS}`, `${hourE}:${minuteE}`]} // ['hh:mm', 'hh:mm']
  onConfirm={res => console.log(res)}
  onClose={() => console.log('onClose')}
  onClear={() => console.log('onClear')}
  style={{ width: '300px', margin: '0 auto' }}
/>

Custom Locale (can be multiple locales)

By providing window.REACT_MINIMAL_DATETIME_RANGE['customLocale'], you can overwrite the current locale if you like or add a new locale.

IMPORTANT NOTE: YOU WILL NEED TO PLACE window.REACT_MINIMAL_DATETIME_RANGE BEFORE YOUR JS SCRIPT

codesandbox example(located in index.html)

        <script type="text/javascript">
        window.REACT_MINIMAL_DATETIME_RANGE = {
            customLocale: {
                "my-own-locale": {...},//structure must follow below
                'es': {
                    weeks: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
                    months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    date: 'Select date',
                    time: 'Select time',
                    confirm: 'Confirm',
                }
            }
        }
        </script>