react react-native日付プラグインm-date-picker/rmc-date-pickerの使用
9995 ワード
m-date-pickerはReactに基づいてiOSスタイルの日付選択方式を提供し、原生Datepickerと非常に似ている.ホームページ:https://github.com/react-component/m-date-picker Demo: http://react-component.github.io/m-date-picker/examples/popup.html おすすめ:★★★★★メリット:流暢な使用で、原生のDatepickerによく似ています.機能が強く、一般的なニーズを満たすことができます.
公式に与えられたdemoはソースコードの内部参照に基づいており、実際のnpm i以降の統合使用とは異なり、実際の参照コードを提供します.
公式に与えられたdemoはソースコードの内部参照に基づいており、実際のnpm i以降の統合使用とは異なり、実際の参照コードを提供します.
npm i rmc-date-picker --s
rmc-date-picker@6.0.8
import 'rmc-picker/assets/index.css';
import 'rmc-date-picker/assets/index.css';
import 'rmc-picker/assets/popup.css';
import zh_CN from 'rmc-date-picker/lib/locale/zh_CN';
import DatePicker from 'rmc-date-picker/lib/DatePicker';
import PopPicker from 'rmc-date-picker/lib/Popup';
class Demo extends React.Component{
constructor(props) {
super(props);
this.state = {
date: null,
};
}
onChange = (date) => {
console.log('onChange', this.format(date));
this.setState({
date,
});
}
format=(date)=>{
let mday = date.getDate();
let month = date.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
mday = mday < 10 ? `0${mday}` : mday;
return `${date.getFullYear()}-${month}-${mday} ${date.getHours()}:${date.getMinutes()}`;
}
onDismiss = () => {
console.log('onDismiss');
}
render() {
const { date } = this.state;
const datePicker = (
<DatePicker
rootNativeProps={{'data-xx': 'yy'}}
minDate={new Date(2015, 8, 15, 10, 30, 0)}
maxDate={new Date(2019, 8, 15, 10, 30, 0)}
defaultDate={new Date()}
mode={'date'}
locale={zh_CN}
/>
);
return margin: '10px 30px' }}>
popup date picker</h2>
>
//
</PopPicker>
>
</div>;
}
}
Screenshots
web
ios
android
API
DatePicker props
name
description
type
default
className(web)
additional css class of root dom node
String
”
prefixCls(web)
prefix class
String
‘rmc-date-picker’
pickerPrefixCls(web)
picker prefix class
String
‘rmc-picker’
defaultDate
default selected date.
Date
date
The currently selected date.
Date
mode
The date picker mode.
String
‘date’ enum(‘date’, ‘time’, ‘datetime’, ‘year’, ‘month’)
minDate
min date
Date
2000-1-1
maxDate
max date
Date
2030-1-1
locale
the locale of area
Object
import from ‘rmc-date-picker/lib/locale/en_US’
use12Hours
12 hours display mode
Boolean
false
minuteStep
The amount of time, in minutes, between each minute item.
Number
1
onDateChange
Date change handler.
Function(date: Date)
”
onValueChange
fire when picker change
(vals: any, index: number) => void
formatMonth
Customize display value of months
(month:number, current:Date) => React.Node
formatDay
Customize display value of days
(day:number, current:Date) => React.Node
rmc-date-picker/lib/Popup props
name
description
type
default
className(web)
additional css class of modal node
String
”
style(web)
additional modal style
object
{}
popupTransitionName(web)
String
maskTransitionName(web)
String
prefixCls(web)
popup’s prefix class
String
‘rmc-picker-popup’
styles(react-native)
PopupPicker’s styles
StyleSheet.create
datePicker
DatePicker element
React DatePicker element
date
The currently selected date.
Date
visible
whether pop picker is visible
Boolean
false
onChange
exec on ok
Function(date: Date)
onVisibleChange
called when pop picker visible change
Function
onDismiss
exec on dismiss
function
okText
ok button text
string/React.ReactElement
‘Ok’
dismissText
dismiss button text
string/React.ReactElement
‘Dismiss’
title
Popup title
string/React.ReactElement
”