timepill-app/src/component/dateInput.js
xuwenyang 0a7175a277 1. 日记本“新增”按钮
2. 创建日记本页面(未完成)
3. 试用react-native-datepicker,用于选择日记本过期时间
   - ios下月份显示英文,暂时没有配置项可以显示数字
   - 安卓下界面良好
2019-05-24 02:08:36 +08:00

82 lines
2.2 KiB
JavaScript

import React, {Component} from 'react';
import {StyleSheet, Text, View, InteractionManager} from 'react-native';
import {Navigation} from 'react-native-navigation';
import DatePicker from 'react-native-datepicker'
function now() {
const d = new Date();
const localTime = d.getTime();
const localOffset = d.getTimezoneOffset() * 60000;
const utc = localTime + localOffset;
const offset = 8; //东 8 区
const beijingTime = utc + (3600000 * offset);
return new Date(beijingTime);
}
export default class DateInput extends Component {
constructor(props) {
super(props);
this.updateDate();
this.state = {
date: this.formatDate(this.nowDate)
};
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.updateDate();
});
}
updateDate() {
this.nowDate = now();
let nowMSec = this.nowDate.getTime();
let minExpiredMSec = 7 * 24 * 3600000; // at least 7 days to expire
let minExpiredDate = new Date(nowMSec + minExpiredMSec);
this.minDate = this.formatDate(minExpiredDate);
let maxExpiredMSec = 3650 * 24 * 3600000; // at most 10 years to expire
let maxExpireDate = new Date(nowMSec + maxExpiredMSec);
this.maxDate = this.formatDate(maxExpireDate);
}
formatDate(date) {
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
return year + '-' + month + '-' + day;
}
getDate() {
return this.state.date;
}
render() {
return (
<DatePicker mode="date" format="YYYY-MM-DD" showIcon={false}
style={this.props.style}
customStyles={this.props.customStyles}
confirmBtnText="确认"
cancelBtnText="取消"
placeholder="过期日期"
minDate={this.minDate}
maxDate={this.maxDate}
date={this.state.date}
onDateChange={(date) => {
this.setState({date: date})
}}
androidMode={'spinner'}
/>
);
}
}