{
+ this.setState({ isFocus: true })
+ }}
+ onMouseLeave={() => {
+ this.setState({ isFocus: false })
+ }}
+ >
{this._input(this.state.texts[0], 'input', this.state.leftPlaceholder)}
{this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder)}
@@ -290,15 +321,30 @@ class BasePicker extends Component {
showTime,
type
} = this.props
+ const {isFocus} = this.state
+
const _cls = classNames(
'hi-datepicker__input',
+ isFocus && 'hi-datepicker__input--focus',
`hi-datepicker__input--${type}`,
disabled && 'hi-datepicker__input--disabled',
showTime && 'hi-datepicker__input--middle'
)
return (
-
- {this._input(this.state.texts[0], 'input', this.state.leftPlaceholder)}
+
{
+ this.setState({ isFocus: true })
+ }}
+ onMouseLeave={() => {
+ this.setState({ isFocus: false })
+ }}
+ >
+ {this._input(
+ this.state.texts[0],
+ 'input',
+ this.state.leftPlaceholder
+ )}
{this._icon()}
)
diff --git a/components/date-picker/Calender.js b/components/date-picker/Calender.js
index 9f7788d64..1a5c0f005 100644
--- a/components/date-picker/Calender.js
+++ b/components/date-picker/Calender.js
@@ -1,6 +1,9 @@
import React, {Component} from 'react'
-import {deconstructDate, getYearWeek} from './util'
+import { CSSTransition } from 'react-transition-group'
+import { deconstructDate, getYearWeek, showLargeCalendar } from './util'
import Provider from '../context'
+import Lunar from './toLunar'
+import {DAY_MILLISECONDS} from './constants'
import {
getDaysInMonth,
@@ -13,18 +16,21 @@ import {
addMonths,
isToday,
getYear,
+ getMonth,
toDate,
isValid
} from './dateUtil'
-import {DAY_MILLISECONDS} from './constants'
+
class Calender extends Component {
constructor (props) {
super(props)
this.state = {
- rows: [[], [], [], [], [], []]
+ rows: [[], [], [], [], [], []],
+ show: false
}
this.weekNum = 0
}
+
_getTime (week, y, m) {
const r = new Date(y, m - 1, 1)
const t = r.getTime() - week * DAY_MILLISECONDS
@@ -134,7 +140,6 @@ class Calender extends Component {
}
handlerClick (e) {
const {onPick, date, type, range} = this.props
-
let { year, month, day, hours, minutes, seconds } = deconstructDate(date)
const td = e.target
@@ -194,9 +199,168 @@ class Calender extends Component {
}
mouseMove(newDate)
}
- getTDClass (td) {
+ getMarkNode (node) {
+ return (
+
+ {node}
+
+ )
+ }
+ /**
+ * 获取完整时间
+ * @param {*} value 日
+ * @param {*} cls className
+ */
+ getFullTime (value, cls) {
+ const {
+ date,
+ type,
+ altCalendarPreset,
+ altCalendar,
+ dateMarkRender,
+ altCalendarPresetData,
+ dateMarkPresetData
+ } = this.props
+
+ let { year, month, day, hours, minutes, seconds } = deconstructDate(date)
+
+ if (cls.indexOf('disabled') !== -1) return false
+ const clickVal = parseInt(value)
+ let newDate = new Date(year, month - 1, day, hours, minutes, seconds)
+ if (type === 'year') {
+ year = parseInt(value)
+ newDate.setFullYear(year)
+ } else if (type === 'month') {
+ month = parseInt(value)
+ newDate.setMonth(month - 1)
+ } else {
+ newDate.setDate(clickVal)
+ }
+ if (cls.indexOf('prev') !== -1) {
+ newDate = addMonths(newDate, -1)
+ }
+ if (cls.indexOf('next') !== -1) {
+ newDate = addMonths(newDate, 1)
+ }
+ const _year = getYear(newDate)
+ const _month = getMonth(newDate) + 1
+ const _value = type === 'year' ? 1 : value
+ const datainfo = _year + '/' + _month + '/' + _value
+ const LunarInfo = Lunar.toLunar(_year, _month, _value)
+ let lunarcellinfo = {
+ text: altCalendarPreset === 'zh-CN' ? LunarInfo[6] : null, // 默认预置信息
+ highlight: false
+ }
+ if (altCalendar || dateMarkRender) {
+ lunarcellinfo = {
+ text: this.altCalendarText(datainfo, lunarcellinfo),
+ highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
+ nodeMark: this.markRender(datainfo)
+ }
+ }
+ if ((dateMarkPresetData && dateMarkPresetData[datainfo]) || (altCalendarPresetData && altCalendarPresetData[datainfo])) {
+ lunarcellinfo = {
+ text: this.altCalendarText(datainfo, lunarcellinfo),
+ highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
+ nodeMark: this.markRender(datainfo)
+ }
+ }
+ return {...altCalendarPresetData[datainfo], ...lunarcellinfo}
+ }
+ showHolidayTimeId = null
+ showHolidayDetail = (fullTimeInfo) => {
+ clearTimeout(this.showHolidayTimeId)
+ this.setState({
+ show: true,
+ holidayFullName: fullTimeInfo.FullText || fullTimeInfo.text
+ })
+ this.showHolidayTimeId = setTimeout(() => {
+ this.setState({
+ show: false
+ })
+ }, 2000)
+ }
+ altCalendarText = (datainfo, lunarcellinfo) => {
+ const {altCalendarPresetData} = this.props
+ if (altCalendarPresetData && altCalendarPresetData[datainfo]) {
+ return altCalendarPresetData[datainfo].text || altCalendarPresetData[datainfo]
+ }
+ return lunarcellinfo.text
+ }
+ markRender (datainfo) {
+ // 存在传入自定就优先使用自定义
+ const {dateMarkRender, dateMarkPresetData} = this.props
+ const markRenderNode = dateMarkRender ? dateMarkRender(new Date(datainfo).getTime(), new Date().getTime()) : false
+ if (markRenderNode) {
+ return this.getMarkNode(markRenderNode)
+ }
+ if (dateMarkPresetData) {
+ return dateMarkPresetData[datainfo]
+ }
+ return null
+ }
+ altCalendar = (td) => {
+ const { type: layerType, date, altCalendarPresetData, dateMarkPresetData, altCalendarPreset } = this.props
+ const nDate = getYear(new Date())
+ const propDate = getYear(date)
+ const isAddToday = nDate === propDate
+ let _class = []
+
+ switch (td.type) {
+ case 'normal':
+ _class.push('normal')
+ break
+ case 'today':
+ layerType !== 'week' && _class.push('today')
+ layerType === 'month' && !isAddToday && _class.pop()
+ break
+ case 'current':
+ _class.push('current')
+ break
+ default:
+ _class.push(td.type)
+ break
+ }
+ if ((altCalendarPresetData || dateMarkPresetData) && layerType !== 'year' && layerType !== 'month') {
+ const fullTimeInfo = this.getFullTime(td.value, _class)
+ return (
+
+ {
+ fullTimeInfo.nodeMark ? fullTimeInfo.nodeMark : null
+ }
+ {
+ fullTimeInfo.text
+ ? {
+ altCalendarPreset === 'id-ID' && this.showHolidayDetail(fullTimeInfo)
+ }}
+ >
+ {
+ fullTimeInfo.highlight
+ ?
+ {fullTimeInfo.text}
+
+ :
+ {fullTimeInfo.text}
+
+ }
+
: null
+ }
+
+ )
+ } else {
+ return null
+ }
+ }
+ getTDClass (td, _index) {
const { type: layerType, date } = this.props
let _class = ['hi-datepicker__cell']
+ if (showLargeCalendar(this.props)) {
+ _class.push('hi-datepicker__cell--large')
+ _index === 6 && _class.push('hi-datepicker__cell--large--laster')
+ }
if (td.disabled) {
_class.push('disabled')
return _class.join(' ')
@@ -239,59 +403,77 @@ class Calender extends Component {
}
}
render () {
- const {type, data} = this.props
+ const { type, data } = this.props
+ const { show, holidayFullName } = this.state
const rows = data || this.getRows()
return (
-
- {
- (type.indexOf('date') !== -1 || type.indexOf('week') !== -1 || type.indexOf('timeperiod') !== -1) && (
-
-
- {
- this.getWeeks().map((item, index) => {
- return | {item} |
- })
- }
-
-
- )
- }
-
+
+
+
+
+
+
{
- rows.map((row, index) => {
- return (
-
+ (type.indexOf('date') !== -1 || type.indexOf('week') !== -1 || type.indexOf('timeperiod') !== -1) && (
+
+
{
- row.map((cell, _index) => {
- return (
- |
-
-
- {cell.text || cell.value}
-
-
- |
- )
+ this.getWeeks().map((item, index) => {
+ return {item} |
})
}
- )
- })
+
+ )
}
-
-
+
+ {
+ rows.map((row, index) => {
+ return (
+
+ {
+ row.map((cell, _index) => {
+ return (
+
+
+
+
+ {cell.text || cell.value}
+
+
+ {
+ this.altCalendar(cell)
+ }
+ |
+ )
+ })
+ }
+
+ )
+ })
+ }
+
+
+
)
}
}
diff --git a/components/date-picker/DatePanel.js b/components/date-picker/DatePanel.js
index a2d0f5841..3ba739df1 100644
--- a/components/date-picker/DatePanel.js
+++ b/components/date-picker/DatePanel.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
import Calender from './Calender'
-import { deconstructDate } from './util'
+import { deconstructDate, showLargeCalendar } from './util'
import TimePanel from './TimePanel'
import Icon from '../icon'
import classNames from 'classnames'
@@ -157,6 +157,11 @@ class DatePanel extends Component {
const { type, onPick } = this.props
if (type === 'month') {
onPick(_date)
+ } else if (type === 'week') {
+ this.setState({
+ currentView: 'week'
+ })
+ onPick(_date, true)
} else {
this.setState({
currentView: 'date'
@@ -206,7 +211,7 @@ class DatePanel extends Component {
}
_getNormalComponent () {
const { currentView } = this.state
- const { min, max, weekOffset, date, disabledDate } = this.props
+ const { min, max, weekOffset, date, disabledDate, showLunar, altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData } = this.props
const validDate = getStartDate(date)
const { year, month } = deconstructDate(validDate)
let component = null
@@ -216,6 +221,13 @@ class DatePanel extends Component {
case 'week':
component = (