165 lines
4.0 KiB
JavaScript
165 lines
4.0 KiB
JavaScript
|
|
import * as moment from 'moment'
|
|
import Calendar from '../vc-calendar'
|
|
import VcDatePicker from '../vc-calendar/src/Picker'
|
|
import Icon from '../icon'
|
|
import { hasProp, getOptionProps, initDefaultProps } from '../_util/props-util'
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
import { WeexPickerProps } from './interface'
|
|
|
|
function formatValue (value, format) {
|
|
return (value && value.format(format)) || ''
|
|
}
|
|
function noop () {}
|
|
|
|
export default {
|
|
// static defaultProps = {
|
|
// format: 'YYYY-wo',
|
|
// allowClear: true,
|
|
// };
|
|
|
|
// private input: any;
|
|
props: initDefaultProps(WeexPickerProps(), {
|
|
format: 'YYYY-wo',
|
|
allowClear: true,
|
|
}),
|
|
name: 'WeekPicker',
|
|
mixins: [BaseMixin],
|
|
data () {
|
|
const value = this.value || this.defaultValue
|
|
if (value && !moment.isMoment(value)) {
|
|
throw new Error(
|
|
'The value/defaultValue of DatePicker or MonthPicker must be ' +
|
|
'a moment object',
|
|
)
|
|
}
|
|
return {
|
|
sValue: value,
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.setState({ sValue: val })
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
weekDateRender (current) {
|
|
const selectedValue = this.sValue
|
|
const { prefixCls } = this
|
|
if (selectedValue &&
|
|
current.year() === selectedValue.year() &&
|
|
current.week() === selectedValue.week()) {
|
|
return (
|
|
<div class={`${prefixCls}-selected-day`}>
|
|
<div class={`${prefixCls}-date`}>
|
|
{current.date()}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return (
|
|
<div class={`${prefixCls}-calendar-date`}>
|
|
{current.date()}
|
|
</div>
|
|
)
|
|
},
|
|
handleChange (value) {
|
|
if (!hasProp(this, 'value')) {
|
|
this.setState({ sValue: value })
|
|
}
|
|
this.$emit('change', value, formatValue(value, this.format))
|
|
},
|
|
clearSelection (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
this.handleChange(null)
|
|
},
|
|
|
|
focus () {
|
|
this.$refs.input.focus()
|
|
},
|
|
|
|
blur () {
|
|
this.$refs.input.blur()
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const props = getOptionProps(this)
|
|
const {
|
|
prefixCls, disabled, pickerClass, popupStyle,
|
|
pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
|
|
sValue: pickerValue, $listeners, $scopedSlots,
|
|
} = this
|
|
const { focus = noop, blur = noop } = $listeners
|
|
|
|
if (pickerValue && localeCode) {
|
|
pickerValue.locale(localeCode)
|
|
}
|
|
|
|
const placeholder = hasProp(this, 'placeholder') ? this.placeholder : locale.lang.placeholder
|
|
const weekDateRender = this.dateRender || $scopedSlots.dateRender || this.weekDateRender
|
|
const calendar = (
|
|
<Calendar
|
|
showWeekNumber
|
|
dateRender={weekDateRender}
|
|
prefixCls={prefixCls}
|
|
format={format}
|
|
locale={locale.lang}
|
|
showDateInput={false}
|
|
showToday={false}
|
|
disabledDate={disabledDate}
|
|
/>
|
|
)
|
|
const clearIcon = (!disabled && allowClear && this.sValue) ? (
|
|
<Icon
|
|
type='cross-circle'
|
|
class={`${prefixCls}-picker-clear`}
|
|
onClick={this.clearSelection}
|
|
/>
|
|
) : null
|
|
const input = ({ value }) => {
|
|
return (
|
|
<span>
|
|
<input
|
|
ref='input'
|
|
disabled={disabled}
|
|
readOnly
|
|
value={(value && value.format(format)) || ''}
|
|
placeholder={placeholder}
|
|
class={pickerInputClass}
|
|
onFocus={focus}
|
|
onBlur={blur}
|
|
/>
|
|
{clearIcon}
|
|
<span class={`${prefixCls}-picker-icon`} />
|
|
</span>
|
|
)
|
|
}
|
|
const vcDatePickerProps = {
|
|
props: {
|
|
...props,
|
|
calendar,
|
|
prefixCls: `${prefixCls}-picker-container`,
|
|
value: pickerValue,
|
|
},
|
|
on: {
|
|
...$listeners,
|
|
change: this.handleChange,
|
|
},
|
|
style: popupStyle,
|
|
}
|
|
return (
|
|
<span class={pickerClass}>
|
|
<VcDatePicker
|
|
{...vcDatePickerProps}
|
|
>
|
|
{input}
|
|
</VcDatePicker>
|
|
</span>
|
|
)
|
|
},
|
|
}
|
|
|