我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注前端小歌謠學習前端知識

1需求

此刻日期之前的不能選擇 當天日期結束時間比開始時間打

基本樣式

<Row gutter={12}><Col span={12}><Form.Item label="活動開始時間">{getFieldDecorator('startTimeLong', {rules: [{ required: true, message: '活動開始時間不能為空'}],})(<DatePickerformat="YYYY-MM-DD HH:mm"onChange={this.onChangeStart}disabledDate={this.handleDataPick}disabledTime={this.disabledDateTime}showTime={{format: 'HH:mm',}}/>)}</Form.Item></Col></Row><Row gutter={12}><Col span={12}><Form.Item label="活動結束時間">{getFieldDecorator('endTimeLong', {rules: [{ required: true, message: '活動結束時間不能為空'}],})(<DatePickerformat="YYYY-MM-DD HH:mm"onChange={this.downChange}disabledDate={this.handleDataPickEnd}disabledTime={this.disabledDateTimeend}showTime={{format: 'HH:mm',}}/>)}</Form.Item></Col></Row>

定義方法

//活動開始時間onChangeStart = (value) => {this.setState({startValue: value,});};//活動結束時間downChange = (value) => {this.setState({endValue: value,});};range = (start, end) => {console.log(start, end);const result = [];for (let i = start; i < end; i++) {result.push(i);}return result;};disabledStartDate = (startValue) => {const endValue = this.state.endValue;const startValues = this.state.startValue;let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0) : 0;if (!endValue) {return;}return day < moment(startValue).startOf('day')|| dayStart > moment(startValue).startOf('day');};disabledEndDate = (startValue) => {const endValue = this.state.endValue;const startValues = this.state.startValue;let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0): 0;if (!endValue) {return;}return day < moment(startValue).startOf('day') || dayStart > moment(startValue).startOf('day');};//時分限制disabledDateTime = (data) => {const hours = moment(this.state.endValue).format('HH:mm:ss');const time = moment(this.state.endValue).format('YYYY-MM-DD');const currentTime = moment(data).format('YYYY-MM-DD');if (time === currentTime) {return {disabledHours: () => this.range(parseInt(hours.slice(0, 2))+ 1, 24),disabledMinutes: () => this.range(parseInt(hours.slice(3, 5)),60),};}};//時分限制disabledDateTimeend = (data) => {const hours = moment(this.state.startValue).format('HH:mm:ss');const time = moment(this.state.startValue).format('YYYY-MM-DD');const currentTime = moment(data).format('YYYY-MM-DD');if (time === currentTime) {return {disabledHours: () => this.range(0, parseInt(hours.slice(0, 2))),disabledMinutes: () => this.range(0, parseInt(hours.slice(3, 5))+ 1),};}};handleDataPick = (startValue) => {const time = new Date().getTime() - 24 * 60 * 60 * 1000;let data = moment(time);return data > moment(startValue).startOf('day');};handleDataPickEnd = (startValue) => {let startValues = new Date(this.state.startValue).getTime() - 24 * 60 * 60 * 1000;let data = moment(startValues);return data > moment(startValue).startOf('day');};

state 定義狀態

startValue: '',endValue: '',

實現效果

總結

以上是生活随笔為你收集整理的ant design datepicker处理日期范围操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。