Browse Source

fix: fix year day choose bug

yhhu 5 years ago
parent
commit
eaf6ea6893
4 changed files with 61 additions and 9 deletions
  1. 2 4
      src/components/footer/Footer.js
  2. 28 5
      src/components/index/DatePicker.js
  3. 1 0
      src/context.js
  4. 30 0
      src/utils/date.js

+ 2 - 4
src/components/footer/Footer.js

@@ -7,15 +7,13 @@ import { getDateFormatFromSepecificDate } from '../../utils'
 const Footer = () => (
   <DateContext.Consumer>
     {
-      ({ model, onChangeModel, onSelectDay }) => (
+      ({ model, onChangeModel, onSelectToday }) => (
         <div className={Styles.wrapper}>
           <div />
           <div
             role="presentation"
             className={Styles.today}
-            onClick={() => onSelectDay({
-              full: getDateFormatFromSepecificDate(),
-            })}
+            onClick={() => onSelectToday(getDateFormatFromSepecificDate())}
           >
             <span>今天</span>
           </div>

+ 28 - 5
src/components/index/DatePicker.js

@@ -1,7 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Styles from './picker.css'
-import { getDateFormatFromSepecificDate, getCurrentYear, getCurrentMonth } from '../../utils'
+import {
+  getDateFormatFromSepecificDate,
+  getCurrentYear, getCurrentMonth,
+  isDateValid,
+  // getCurrentDate,
+} from '../../utils'
 import Modal from '../modal/Modal'
 import { CHINESE_MODEL, WESTERN_MODEL, _ } from '../../const'
 import { DateContext, initialData } from '../../context'
@@ -37,7 +42,16 @@ class DatePicker extends Component {
   }
 
   onInputChange = event => {
-    this.setState({ value: event.target.value })
+    const val = event.target.value
+    // console.log(val)
+    this.setState({ value: val }, () => {
+      // console.log(isDateValid(val))
+      if (isDateValid(val)) {
+        // this.onSelectDay(val)
+      } else {
+        // this.onSelectToday(getCurrentDate())
+      }
+    })
   }
 
   onInputClear = () => {
@@ -65,14 +79,22 @@ class DatePicker extends Component {
 
   onSelectDay = day => {
     const { days } = this.state
+    const afterSetDays = setSelectedDays(days, day.full)
+    this.setState({ value: day.full, days: afterSetDays }, () => {
+      this.onModalClose()
+    })
+  }
+
+  onSelectToday = today => {
+    const { days } = this.state
     let renderDays = days
-    if (!isInCurrentMonth(day.full)) {
+    if (!isInCurrentMonth(today)) {
       // 不是在【今天】这个月份,需要重新换数据源
       renderDays = initialData.days
     }
 
-    const afterSetDays = setSelectedDays(renderDays, day.full)
-    this.setState({ value: day.full, days: afterSetDays }, () => {
+    const afterSetDays = setSelectedDays(renderDays, today)
+    this.setState({ value: today, days: afterSetDays }, () => {
       this.onModalClose()
     })
   }
@@ -147,6 +169,7 @@ class DatePicker extends Component {
             {
               ...this.state,
               onSelectDay: this.onSelectDay,
+              onSelectToday: this.onSelectToday,
               onChangeModel: this.onChangeModel,
               onPrevMonth: this.onPrevMonth,
               onPrevYear: this.onPrevYear,

+ 1 - 0
src/context.js

@@ -12,6 +12,7 @@ export const initialData = {
   weekTags: weekTags,
   onChangeModel: noop,
   onSelectDay: noop,
+  onSelectToday: noop,
   onPrevMonth: noop,
   onPrevYear: noop,
   onNextMonth: noop,

+ 30 - 0
src/utils/date.js

@@ -150,3 +150,33 @@ export const isCurrentDay = (year, month, day) => {
   /* eslint-disable eqeqeq */
   return (currentYear == year) && (currentMonth == month) && (currentDay == day)
 }
+
+/**
+ * 判断日期是否合法
+ * @param {String} date 日期
+ */
+export const isDateValid = date => {
+  const regexp = /^(\d{4})(\s*[/\-\\:]?\s*)?(\d{1,2})(\s*[/\-\\:]?\s*)?(\d{1,2})$/
+  const strArr = trimStr(date).match(regexp)
+  const result = regexp.test(trimStr(date))
+
+  console.log(strArr)
+  console.log(result)
+
+  if (!strArr) {
+    return false
+  }
+
+  const month = strArr[3]
+  const day = strArr[5]
+
+  if (+month > 12) {
+    return false
+  }
+
+  if (+day > 31) {
+    return false
+  }
+
+  return true
+}