feat: add disbale feature

src/app.js

@@ -5,7 +5,8 @@ import DatePicker from './index'
 
 const App = () => (
   <DatePicker
-    defaultDate="2018-01-01"
+    disable
+    defaultDate="2018-01-31"
     placeholder="please choose date"
     onSelectDate={day => console.log(day)}
   />

src/components/index/DatePicker.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import Styles from './picker.css'
 import {
   getDateFormatFromSepecificDate,
@@ -196,7 +197,7 @@ class DatePicker extends Component {
   }
 
   render() {
-    const { inline, placeholder } = this.props
+    const { inline, placeholder, disable } = this.props
     const { value, showModal } = this.state
 
     return (
@@ -205,14 +206,18 @@ class DatePicker extends Component {
           className={Styles.container}
           style={inline ? { display: 'inline-block' } : {}}
         >
-          <input
-            type="text"
-            placeholder={placeholder}
-            className={Styles.input}
-            value={value}
-            onChange={e => this.onInputChange(e)}
-            onFocus={e => this.onModalOpen(e)}
-          />
+          <span className={Styles.inputWrapper}>
+            <input
+              type="text"
+              disabled={disable}
+              readOnly={disable}
+              placeholder={placeholder}
+              className={classNames(Styles.input, { [Styles.disable]: disable })}
+              value={value}
+              onChange={e => this.onInputChange(e)}
+              onFocus={e => this.onModalOpen(e)}
+            />
+          </span>
           <i className={Styles.calendar} />
           <i
             className={Styles.close}
@@ -221,6 +226,7 @@ class DatePicker extends Component {
           />
           <div className={Styles.line} />
         </div>
+        { disable && <div className={Styles.inputDisable} /> }
         <DateContext.Provider
           value={
             {
@@ -253,6 +259,7 @@ DatePicker.defaultProps = {
   defaultDate: getDateFormatFromSepecificDate(),
   year: getCurrentYear(),
   month: getCurrentMonth(),
+  disable: false,
 }
 
 DatePicker.propTypes = {
@@ -262,6 +269,7 @@ DatePicker.propTypes = {
   year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onSelectDate: PropTypes.func.isRequired,
+  disable: PropTypes.bool,
 }
 
 export default DatePicker

src/components/index/picker.css

@@ -12,6 +12,22 @@
   cursor: text;
   overflow: hidden;
 }
+.input-disable {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  cursor: not-allowed;
+}
+.input-wrapper {
+  display: inline-block;
+  width: 100%;
+  height: 32px;
+}
 .input {
   width: 100%;
   height: 32px;
@@ -25,6 +41,11 @@
   border: none;
   border-bottom: 1px solid #ccc;
 }
+.disable {
+  background-color: #f5f5f5;
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.25);
+}
 .line {
   width: 100%;
   position: absolute;
@@ -75,4 +96,10 @@
 }
 .container:hover > .close {
   opacity: 1;
+}
+.input-disable:hover > .calendar {
+  opacity: 1;
+}
+.input-disable:hover > .close {
+  opacity: 0;
 }

src/components/modal/modal.css

@@ -54,7 +54,7 @@
   top: 0;
   left: 0;
   background-color: white;
-  z-index: 1;
+  z-index: 9;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 .in {

src/utils/date.js

@@ -1,4 +1,4 @@
-import warnning from './warning'
+import { error } from './throw'
 import { weekMap } from '../const'
 
 /**
@@ -46,6 +46,14 @@ export const getCurrentDay = () => formatMonthOrDay(new Date().getDate())
 export const getCurrentDate = () => `${getCurrentYear()}-${getCurrentMonth()}-${getCurrentDay()}`
 
 /**
+ * 获取指定月份的天数
+ * @param {String} year 年份
+ * @param {String} month 月份
+ */
+export const getDaysCountOfMonth = (month = getCurrentMonth(),
+  year = getCurrentYear()) => new Date(year, month, 0).getDate()
+
+/**
  * 格式化日期
  * @param {String} date 日期
  */
@@ -62,13 +70,14 @@ export const formatDate = date => {
   let day = strArr[6] || strArr[10]
 
   if (+month > 12) {
-    warnning('month exceed max month number 12')
+    error('month exceed max month number 12')
     month = 12
   }
 
-  if (+day > 31) {
-    warnning('day exceed max day number 31')
-    day = 31
+  const countOfMonth = getDaysCountOfMonth(month, year)
+  if (+day > countOfMonth) {
+    error(`day exceed max day number ${countOfMonth}`)
+    day = countOfMonth
   }
 
   month = formatMonthOrDay(month)
@@ -116,14 +125,6 @@ export const getDayFromSepecificDate = (date = getCurrentDate()) => specificDate
 export const getDateFormatFromSepecificDate = (date = getCurrentDate()) => specificDateAdapter(date)('format')
 
 /**
- * 获取指定月份的天数
- * @param {String} year 年份
- * @param {String} month 月份
- */
-export const getDaysCountOfMonth = (month = getCurrentMonth(),
-  year = getCurrentYear()) => new Date(year, month, 0).getDate()
-
-/**
  * 获取一月中的第一天是星期几
  * @param {String} month 月份
  * @param {String} year 年份

src/utils/index.js

@@ -1,4 +1,2 @@
-export * from './warning'
-export * from './isPlainObject'
 export * from './date'
 export * from './withContext'

src/utils/isPlainObject.js

@@ -1,4 +1,4 @@
-export function isPlainObject(obj) {
+const isPlainObject = obj => {
   if (typeof obj !== 'object' || obj === null) return false
 
   let proto = obj
@@ -8,3 +8,5 @@ export function isPlainObject(obj) {
 
   return Object.getPrototypeOf(obj) === proto
 }
+
+export default isPlainObject

src/utils/warning.js

@@ -4,7 +4,7 @@
  * @param {String} message The warning message.
  * @returns {void}
  */
-export function warning(message) {
+export const warnning = message => {
   /* eslint-disable no-console */
   if (typeof console !== 'undefined' && typeof console.error === 'function') {
     console.error(message)
@@ -17,3 +17,12 @@ export function warning(message) {
     throw new Error(message)
   } catch (e) {} // eslint-disable-line no-empty
 }
+
+export const error = message => {
+  /* eslint-disable no-console */
+  if (typeof console !== 'undefined' && typeof console.error === 'function') {
+    console.error(message)
+  }
+  /* eslint-enable no-console */
+  throw new Error(message)
+}