A lightweight react date picker for mobile Sample in 2020

A lightweight react date picker for mobile Sample in 2020

tutorials -


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

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


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







Custom date unit

set dateFormat for ['YYYY', 'MM', 'DD', 'hh', 'mm'] to configure year, month, day, hour, minute.

set dateFormat for ['hh', 'mm', 'ss'] to configure hour, minute and second.

Getting Started


Using npm:

$ npm install react-mobile-datepicker --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';

Usage Example

class App extends React.Component {
	state = {
		time: new Date(),
		isOpen: false,

	handleClick = () => {
		this.setState({ isOpen: true });

	handleCancel = () => {
		this.setState({ isOpen: false });

	handleSelect = (time) => {
		this.setState({ time, isOpen: false });

	render() {
		return (
			<div className="App">
					select time

					onCancel={this.handleCancel} />

ReactDOM.render(<App />, document.getElementById('react-box'));


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'
dateFormat Array ['YYYY', 'M', 'D'] according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']
dateSteps Array [1, 1, 1] set step for each time unit
showFormat 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
customHeader ReactElement undefined customize the header, if you set this property, it will replace showFormat
confirmText String 完成 customize the selection time button text
cancelText String 取消 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


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff