新聞中心
使用 DatePickerIOS 來在 iOS 上呈現(xiàn)一個日期/時間選擇器(selector)。這是一個控制組件,所以為了組件更新,你必須鉤在 onDateChange 回調(diào)中,并更新 date 支持,否則用戶的變化將立即恢復(fù)以反映 props.date。

Props
Edit on GitHub
date 日期型
當(dāng)前選中的日期。
maximumDate 日期型
最大的日期。
限制可能的日期/時間值的范圍。
minimumDate 日期型
最小的日期。
限制了可能的日期/時間值的范圍。
minuteInterval 枚舉型(1,2,3,4,5,6,10,12,15,20,30)
可選擇的分鐘的間隔。
mode 枚舉型(“date”,“time”,“datetime”)
日期選擇器模式。
onDateChange 函數(shù)型
日期變更處理程序。
當(dāng)用戶更改了 UI 的日期或時間時,它就會被調(diào)用。第一個也是唯一一個參數(shù)是一個 Date 對象,代表了新的日期和時間。
timeZoneOffsetInMinutes 數(shù)字型
在幾分鐘內(nèi)時區(qū)偏移。
默認(rèn)情況下,日期選擇器將使用設(shè)備的時區(qū)。有了這個參數(shù),才有可能迫使某個時區(qū)偏移。例如,為了顯示太平洋的標(biāo)準(zhǔn)時間,傳遞 -7 * 60。
例子
Edit on GitHub
'use strict';var React = require('react-native');var {
DatePickerIOS,
StyleSheet,
Text,
TextInput,
View,
} = React;var DatePickerExample = React.createClass({
getDefaultProps: function () { return {
date: new Date(),
timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
};
},
getInitialState: function() { return {
date: this.props.date,
timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
};
},
onDateChange: function(date) { this.setState({date: date});
},
onTimezoneChange: function(event) { var offset = parseInt(event.nativeEvent.text, 10); if (isNaN(offset)) { return;
} this.setState({timeZoneOffsetInHours: offset});
},
render: function() { // Ideally, the timezone input would be a picker rather than a
// text input, but we don't have any pickers yet :(
return (
{
this.state.date.toLocaleDateString() +
' ' +
this.state.date.toLocaleTimeString()
}
hours from UTC
);
},
});var WithLabel = React.createClass({
render: function() { return (
{this.props.label}
{this.props.children}
);
}
});var Heading = React.createClass({
render: function() { return (
{this.props.label}
);
}
});
exports.title = '';
exports.description = 'Select dates and times using the native UIDatePicker.';
exports.examples = [
{
title: '',
render: function(): ReactElement { return ;
},
}];var styles = StyleSheet.create({
textinput: {
height: 26,
width: 50,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
fontSize: 13,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 2,
},
labelView: {
marginRight: 10,
paddingVertical: 2,
},
label: {
fontWeight: '500',
},
headingContainer: {
padding: 4,
backgroundColor: '#f6f7f8',
},
heading: {
fontWeight: '500',
fontSize: 14,
},
}); 當(dāng)前名稱:創(chuàng)新互聯(lián)React教程:iOS日期選擇器
標(biāo)題網(wǎng)址:http://m.fisionsoft.com.cn/article/dhjegcs.html


咨詢
建站咨詢
