react-mobile-datepicker-ts

a lightweight react date picker for mobile, Not more than 4k

react-mobile-datepicker-ts provides a component that can set year, month, day, hour, minute and second by sliding up or down.

Features

• is only 4k.
• It does not depend on moment.js

Theme

default

dark

ios

android

android-dark

Custom date unit

set dateConfig to configure year, month, day, hour, minute and second.

[{
  type: 'year',
  format: 'YYYY',
  caption: 'Year',
  step: 1,
}, {
  type: 'month',
  format: 'MM',
  caption: 'Mon',
  step: 1,
}, {
  type: 'date',
  format: 'DD',
  caption: 'Day',
  step: 1,
}, {
  type: 'hour',
  format: 'hh',
  caption: 'Hour',
  step: 1,
}, {
  type: 'minute',
  format: 'mm',
  caption: 'Min',
  step: 1,
}, {
  type: 'second',
  format: 'ss',
  caption: 'Sec',
  step: 1,
}]

set dateConfig to configure hour, minute and second.

[{
  type: 'hour',
  format: 'hh',
  caption: 'Hour',
  step: 1,
}, {
  type: 'minute',
  format: 'mm',
  caption: 'Min',
  step: 1,
}, {
  type: 'second',
  format: 'ss',
  caption: 'Sec',
  step: 1,
}]

customize the content mapping shown in the month.

const monthMap = {
  '1': 'Jan',
  '2': 'Feb',
  '3': 'Mar',
  '4': 'Apr',
  '5': 'May',
  '6': 'Jun',
  '7': 'Jul',
  '8': 'Aug',
  '9': 'Sep',
  '10': 'Oct',
  '11': 'Nov',
  '12': 'Dec',
};

const dateConfig = [{
  type: 'year',
  format: 'YYYY',
  caption: 'Year',
  step: 1,
}, {
  type: 'month',
  format: value => monthMap[value.getMonth() + 1],
  caption: 'Mon',
  step: 1,
}, {
  type: 'date',
  format: 'DD',
  caption: 'Day',
  step: 1,
}];

<DatePicker
  dateConfig={dateConfig}
/>

set showCaption to display date captions, matches the dateConfig property's caption.

const dateConfig = [{
  type: 'hour',
  format: 'hh',
  caption: 'Hour',
  step: 1,
}, {
  type: 'minute',
  format: 'mm',
  caption: 'Min',
  step: 1,
}, {
  type: 'second',
  format: 'ss',
  caption: 'Sec',
  step: 1,
}];

<DatePicker
  showCaption={true}
  dateConfig={dateConfig}
/>

Getting Started

Install

Using npm:

$ npm install react-mobile-datepicker-ts --save

Import what you need

The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.

// Using an ES6 transpiler like Babel
import  React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-mobile-datepicker';
import 'react-mobile-datepicker-ts/dist/main.css'

Usage Example

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DatePicker from 'react-mobile-datepicker';
import 'react-mobile-datepicker-ts/dist/main.css'

const App = () => {
  const [time, setTime] = React.useState(new Date());
  const [isOpen, setIsOpen] = React.useState(false);
  const handleToggle = (nextIsOpen: typeof isOpen) => {
    setIsOpen(nextIsOpen);
  }

  const handleSelect = (nextTime: typeof time) => {
    setTime(nextTime);
    setIsOpen(false);
  }

  return (
    <div>
      <p>
        {time.toLocaleDateString()}
      </p>
      <div>
        <button onClick={() => handleToggle(true)}>
          select time
        </button>
      </div>
      <DatePicker
        value={time}
        isOpen={isOpen}
        onSelect={handleSelect}
        onCancel={() => handleToggle(false)}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

PropTypes

| Property | Type | Default | Description | |:------------- |:------------- |:-------------- |:---------- | | isPopup | Boolean | true | whether as popup add a overlay | | isOpen | Boolean | false | whether to open datepicker | | theme | String | default | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' | | dateConfig | Object | See DateConfig format for details | configure date unit information | |headerFormat | String | 'YYYY/MM/DD' | customize the format of the display title | | value | Date | new Date() | date value | | min | Date | new Date(1970, 0, 1) | minimum date | | max | Date | new Date(2050, 0, 1) | maximum date | | showHeader | Boolean | true | whether to show the header | | showFooter | Boolean | true | whether to show the footer | | customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace showFormat| | confirmText | String | 'Done' | customize the selection time button text | | cancelText | String | 'Cancel' | customize the cancel button text | | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter | | onCancel | Function | () => {} | the callback function after click button of cancel | | onChange | Function | () => {} | the callback function after date be changed | | scrollSpeedFactor | number | 1 | the factor that affect wheel scroll speed | | scrollSpeedLimit | number | DEFAULT_DATE_HEIGHT | the factor that maximum amount of scrolling (If not to changed the css, I recommend keeping the default settings.) |

DateConfig

all default date configuration information, as follows

• type: date unit
• format: date unit display format
• caption: date unit caption
• step: date unit change interval

[{
  type: 'year',
  format: 'YYYY',
  caption: 'Year',
  step: 1,
}, {
  type: 'month',
  format: 'MM',
  caption: 'Mon',
  step: 1,
}, {
  type: 'date',
  format: 'DD',
  caption: 'Day',
  step: 1,
}, {
  type: 'hour',
  format: 'hh',
  caption: 'Hour',
  step: 1,
}, {
  type: 'minute',
  format: 'mm',
  caption: 'Min',
  step: 1,
},
'second': {
  type: 'second',
  format: 'ss',
  caption: 'Sec',
  step: 1,
}]

Changelog

• Changelog

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.