@ -0,0 +1,477 @@ |
|||
import baseComponent from '../helpers/baseComponent' |
|||
import classNames from '../helpers/classNames' |
|||
import locales from './locales/index' |
|||
import { props } from './props' |
|||
|
|||
const DATETIME = 'datetime' |
|||
const DATE = 'date' |
|||
const TIME = 'time' |
|||
const MONTH = 'month' |
|||
const YEAR = 'year' |
|||
const ONE_DAY = 24 * 60 * 60 * 1000 |
|||
|
|||
function fomartArray(min, max, step = 1) { |
|||
let i = min |
|||
let result = [] |
|||
while (i <= max) { |
|||
result.push(i) |
|||
i+=step |
|||
} |
|||
return result |
|||
} |
|||
|
|||
function getDaysInMonth(date) { |
|||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() |
|||
} |
|||
|
|||
function pad(n) { |
|||
return n < 10 ? `0${n}` : n + '' |
|||
} |
|||
|
|||
function cloneDate(date) { |
|||
return new Date(+date) |
|||
} |
|||
|
|||
function setMonth(date, month) { |
|||
date.setDate(Math.min(date.getDate(), getDaysInMonth(new Date(date.getFullYear(), month)))) |
|||
date.setMonth(month) |
|||
} |
|||
|
|||
function valueToDate(value, props = {}) { |
|||
if (!Array.isArray(value)) { |
|||
if (typeof value === 'string') { |
|||
value = value.replace(/\-/g, '/') |
|||
} |
|||
if (!isNaN(Number(value))) { |
|||
value = Number(value) |
|||
} |
|||
return new Date(value) |
|||
} |
|||
|
|||
const { mode, use12Hours } = props |
|||
const now = new Date() |
|||
const year = now.getFullYear() |
|||
const month = now.getMonth() |
|||
const day = now.getDate() |
|||
const newValue = value.map((v) => Number(v)) |
|||
if (use12Hours && [DATETIME, TIME].includes(mode)) { |
|||
const hourIndex = mode === DATETIME ? 3 : 0 |
|||
const ampmIndex = newValue.length - 1 |
|||
const ampm = Number(newValue[ampmIndex]) |
|||
let nhour = Number(newValue[hourIndex]) |
|||
|
|||
if (ampm === 1) { |
|||
if (nhour <= 12) { |
|||
nhour += 12 |
|||
} |
|||
nhour = nhour >= 24 ? 0 : nhour |
|||
} else { |
|||
if (nhour === 0) { |
|||
nhour = 12 |
|||
} |
|||
if (nhour > 12) { |
|||
nhour -= 12 |
|||
} |
|||
nhour = nhour >= 12 ? 0 : nhour |
|||
} |
|||
|
|||
newValue.splice(hourIndex, 1, nhour) |
|||
newValue.splice(ampmIndex, 1) |
|||
} |
|||
if (mode === TIME) { |
|||
newValue.unshift(day) |
|||
newValue.unshift(month) |
|||
newValue.unshift(year) |
|||
} else if (mode === MONTH) { |
|||
newValue.push(day) |
|||
} else if (mode === YEAR) { |
|||
newValue.push(month) |
|||
newValue.push(day) |
|||
} |
|||
while (newValue.length <= 6) { |
|||
newValue.push(0) |
|||
} |
|||
return new Date(...newValue) |
|||
} |
|||
|
|||
baseComponent({ |
|||
properties: props, |
|||
data: { |
|||
inputValue: [], |
|||
options: [], |
|||
}, |
|||
observers: { |
|||
inputValue() { |
|||
this.updatedCols() |
|||
}, |
|||
value(value) { |
|||
this.setValue(value) |
|||
}, |
|||
['mode, minuteStep, use12Hours, minDate, maxDate, minHour, maxHour, minMinute, maxMinute, lang']() { |
|||
this.setValue(this.data.inputValue) |
|||
}, |
|||
}, |
|||
methods: { |
|||
getDefaultMinDate() { |
|||
if (!this.defaultMinDate) { |
|||
this.defaultMinDate = new Date(2000, 1, 1, 0, 0, 0) |
|||
} |
|||
return this.defaultMinDate |
|||
}, |
|||
getDefaultMaxDate() { |
|||
if (!this.defaultMaxDate) { |
|||
this.defaultMaxDate = new Date(2030, 1, 1, 23, 59, 59) |
|||
} |
|||
return this.defaultMaxDate |
|||
}, |
|||
getMinDate() { |
|||
return this.data.minDate ? valueToDate(this.data.minDate, this.data) : this.getDefaultMinDate() |
|||
}, |
|||
getMaxDate() { |
|||
return this.data.maxDate ? valueToDate(this.data.maxDate, this.data) : this.getDefaultMaxDate() |
|||
}, |
|||
getDateMember(type = 'min', member = 'year') { |
|||
const methods = { |
|||
min: 'getMinDate', |
|||
max: 'getMaxDate', |
|||
year: 'getFullYear', |
|||
month: 'getMonth', |
|||
day: 'getDate', |
|||
hour: 'getHours', |
|||
minute: 'getMinutes', |
|||
} |
|||
return this[methods[type]]()[methods[member]]() |
|||
}, |
|||
getDisplayHour(rawHour) { |
|||
// 12 hour am (midnight 00:00) -> 12 hour pm (noon 12:00) -> 12 hour am (midnight 00:00)
|
|||
if (this.data.use12Hours) { |
|||
if (rawHour === 0) { |
|||
rawHour = 12 |
|||
} |
|||
if (rawHour > 12) { |
|||
rawHour -= 12 |
|||
} |
|||
return rawHour |
|||
} |
|||
return rawHour |
|||
}, |
|||
setHours(date, hour) { |
|||
if (this.data.use12Hours) { |
|||
const dh = date.getHours() |
|||
let nhour = hour |
|||
nhour = dh >= 12 ? hour + 12 : hour |
|||
nhour = nhour >= 24 ? 0 : nhour // Make sure no more than one day
|
|||
date.setHours(nhour) |
|||
} else { |
|||
date.setHours(hour) |
|||
} |
|||
}, |
|||
setAmPm(date, index) { |
|||
if (index === 0) { |
|||
date.setTime(+date - ONE_DAY / 2) |
|||
} else { |
|||
date.setTime(+date + ONE_DAY / 2) |
|||
} |
|||
}, |
|||
getNewDate(values, index) { |
|||
const value = parseInt(values[index], 10) |
|||
const { mode } = this.data |
|||
let newValue = cloneDate(this.getDate()) |
|||
if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { |
|||
switch (index) { |
|||
case 0: |
|||
newValue.setFullYear(value) |
|||
break |
|||
case 1: |
|||
setMonth(newValue, value) |
|||
break |
|||
case 2: |
|||
newValue.setDate(value) |
|||
break |
|||
case 3: |
|||
this.setHours(newValue, value) |
|||
break |
|||
case 4: |
|||
newValue.setMinutes(value) |
|||
break |
|||
case 5: |
|||
this.setAmPm(newValue, value) |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
} else if (mode === TIME) { |
|||
switch (index) { |
|||
case 0: |
|||
this.setHours(newValue, value) |
|||
break |
|||
case 1: |
|||
newValue.setMinutes(value) |
|||
break |
|||
case 2: |
|||
this.setAmPm(newValue, value) |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
} |
|||
return this.clipDate(newValue) |
|||
}, |
|||
clipDate(date) { |
|||
const { mode } = this.data |
|||
const minDate = this.getMinDate() |
|||
const maxDate = this.getMaxDate() |
|||
if (mode === DATETIME) { |
|||
if (date < minDate) { |
|||
return cloneDate(minDate) |
|||
} |
|||
if (date > maxDate) { |
|||
return cloneDate(maxDate) |
|||
} |
|||
} else if (mode === DATE || mode === YEAR || mode === MONTH) { |
|||
if (+date + ONE_DAY <= minDate) { |
|||
return cloneDate(minDate) |
|||
} |
|||
if (date >= +maxDate + ONE_DAY) { |
|||
return cloneDate(maxDate) |
|||
} |
|||
} else if (mode === TIME) { |
|||
const maxHour = maxDate.getHours() |
|||
const maxMinutes = maxDate.getMinutes() |
|||
const minHour = minDate.getHours() |
|||
const minMinutes = minDate.getMinutes() |
|||
const hour = date.getHours() |
|||
const minutes = date.getMinutes() |
|||
if (hour < minHour || hour === minHour && minutes < minMinutes) { |
|||
return cloneDate(minDate) |
|||
} |
|||
if (hour > maxHour || hour === maxHour && minutes > maxMinutes) { |
|||
return cloneDate(maxDate) |
|||
} |
|||
} |
|||
return date |
|||
}, |
|||
getDate(d) { |
|||
const date = d ? d : this.data.value |
|||
return this.clipDate(date ? valueToDate(date, this.data) : this.getMinDate()) |
|||
}, |
|||
getDateData(date) { |
|||
const { mode, lang } = this.data |
|||
const locale = locales[lang] |
|||
const selYear = date.getFullYear() |
|||
const selMonth = date.getMonth() |
|||
|
|||
const minDateYear = this.getDateMember('min', 'year') |
|||
const maxDateYear = this.getDateMember('max', 'year') |
|||
const minDateMonth = this.getDateMember('min', 'month') |
|||
const maxDateMonth = this.getDateMember('max', 'month') |
|||
const minDateDay = this.getDateMember('min', 'day') |
|||
const maxDateDay = this.getDateMember('max', 'day') |
|||
|
|||
const years = fomartArray(minDateYear, maxDateYear).map((i) => ({ |
|||
value: i + '', |
|||
label: i + locale.year + '', |
|||
})) |
|||
|
|||
if (mode === YEAR) { |
|||
return [years] |
|||
} |
|||
|
|||
const minMonth = minDateYear === selYear ? minDateMonth : 0 |
|||
const maxMonth = maxDateYear === selYear ? maxDateMonth : 11 |
|||
const months = fomartArray(minMonth, maxMonth).map((i) => ({ |
|||
value: i + '', |
|||
label: i + 1 + locale.month + '', |
|||
})) |
|||
|
|||
if (mode === MONTH) { |
|||
return [years, months] |
|||
} |
|||
|
|||
const minDay = minDateYear === selYear && minDateMonth === selMonth ? minDateDay : 1 |
|||
const maxDay = maxDateYear === selYear && maxDateMonth === selMonth ? maxDateDay : getDaysInMonth(date) |
|||
|
|||
const days = fomartArray(minDay, maxDay).map((i) => ({ |
|||
value: i + '', |
|||
label: i + locale.day + '', |
|||
})) |
|||
|
|||
return [years, months, days] |
|||
}, |
|||
getTimeData(date) { |
|||
let { minHour, maxHour, minMinute, maxMinute } = this.data |
|||
const { mode, minuteStep, use12Hours, lang } = this.data |
|||
const locale = locales[lang] |
|||
const minDateMinute = this.getDateMember('min', 'minute') |
|||
const maxDateMinute = this.getDateMember('max', 'minute') |
|||
const minDateHour = this.getDateMember('min', 'hour') |
|||
const maxDateHour = this.getDateMember('max', 'hour') |
|||
const hour = date.getHours() |
|||
|
|||
if (mode === DATETIME) { |
|||
const year = date.getFullYear() |
|||
const month = date.getMonth() |
|||
const day = date.getDate() |
|||
const minDateYear = this.getDateMember('min', 'year') |
|||
const maxDateYear = this.getDateMember('max', 'year') |
|||
const minDateMonth = this.getDateMember('min', 'month') |
|||
const maxDateMonth = this.getDateMember('max', 'month') |
|||
const minDateDay = this.getDateMember('min', 'day') |
|||
const maxDateDay = this.getDateMember('max', 'day') |
|||
if (minDateYear === year && minDateMonth === month && minDateDay === day) { |
|||
minHour = minDateHour |
|||
if (minDateHour === hour) { |
|||
minMinute = minDateMinute |
|||
} |
|||
} |
|||
if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) { |
|||
maxHour = maxDateHour |
|||
if (maxDateHour === hour) { |
|||
maxMinute = maxDateMinute |
|||
} |
|||
} |
|||
} else { |
|||
minHour = minDateHour |
|||
if (minDateHour === hour) { |
|||
minMinute = minDateMinute |
|||
} |
|||
maxHour = maxDateHour |
|||
if (maxDateHour === hour) { |
|||
maxMinute = maxDateMinute |
|||
} |
|||
} |
|||
|
|||
let hours = [] |
|||
if (minHour === 0 && maxHour === 0 || minHour !== 0 && maxHour !== 0) { |
|||
minHour = this.getDisplayHour(minHour) |
|||
} else if (minHour === 0 && use12Hours) { |
|||
minHour = 1 |
|||
hours.push({ |
|||
value: '0', |
|||
label: locale.hour ? '12' + locale.hour : '12', |
|||
}) |
|||
} |
|||
maxHour = this.getDisplayHour(maxHour) |
|||
hours = [...hours, ...fomartArray(minHour, maxHour).map((i) => ({ |
|||
value: i + '', |
|||
label: locale.hour ? i + locale.hour + '' : pad(i), |
|||
}))] |
|||
|
|||
const minutes = [] |
|||
const selMinute = date.getMinutes() |
|||
for (let i = minMinute; i <= maxMinute; i += minuteStep) { |
|||
minutes.push({ |
|||
value: i + '', |
|||
label: locale.minute ? i + locale.minute + '' : pad(i), |
|||
}) |
|||
if (selMinute > i && selMinute < i + minuteStep) { |
|||
minutes.push({ |
|||
value: selMinute + '', |
|||
label: locale.minute ? selMinute + locale.minute + '' : pad(selMinute), |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const ampm = [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }] |
|||
|
|||
return [hours, minutes].concat(use12Hours ? [ampm] : []) |
|||
}, |
|||
getValueCols(d) { |
|||
const { mode, use12Hours } = this.data |
|||
const date = this.getDate(d) |
|||
let cols = [] |
|||
let value = [] |
|||
|
|||
if (mode === YEAR) { |
|||
return { |
|||
cols: this.getDateData(date), |
|||
value: [date.getFullYear() + ''], |
|||
} |
|||
} |
|||
|
|||
if (mode === MONTH) { |
|||
return { |
|||
cols: this.getDateData(date), |
|||
value: [date.getFullYear() + '', date.getMonth() + ''], |
|||
} |
|||
} |
|||
|
|||
if (mode === DATETIME || mode === DATE) { |
|||
cols = this.getDateData(date) |
|||
value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + ''] |
|||
} |
|||
|
|||
if (mode === DATETIME || mode === TIME) { |
|||
cols = cols.concat(this.getTimeData(date)) |
|||
const hour = date.getHours() |
|||
const selMinute = date.getMinutes() |
|||
let dtValue = [hour + '', selMinute + ''] |
|||
let nhour = hour |
|||
if (use12Hours) { |
|||
nhour = hour === 0 ? 12 : (hour > 12 ? hour - 12 : hour) |
|||
dtValue = [nhour + '', selMinute + '', (hour >= 12 ? 1 : 0) + ''] |
|||
} |
|||
value = value.concat(dtValue) |
|||
} |
|||
|
|||
return { |
|||
value, |
|||
cols, |
|||
} |
|||
}, |
|||
onValueChange(e) { |
|||
const { value, index } = e.detail |
|||
const newDate = this.getNewDate(value, index) |
|||
const { value: newValue, cols: newCols } = this.getValueCols(newDate) |
|||
const values = this.getValue(newValue, newCols) |
|||
this.triggerEvent('valueChange', { ...e.detail, ...values, date: +newDate }) |
|||
}, |
|||
updatedCols() { |
|||
const { cols } = this.getValueCols() |
|||
this.setData({ cols }) |
|||
}, |
|||
updated(inputValue) { |
|||
if (this.data.inputValue !== inputValue) { |
|||
this.setData({ |
|||
inputValue, |
|||
}) |
|||
} |
|||
}, |
|||
setValue(value = this.data.inputValue) { |
|||
const { value: inputValue } = this.getValueCols() |
|||
this.updated(inputValue) |
|||
}, |
|||
getValue(value = this.data.inputValue, cols = this.data.cols) { |
|||
this.picker = this.picker || this.selectComponent('#wux-picker') |
|||
return { |
|||
...this.picker.getValue(value, cols), |
|||
date: +this.getDate(), |
|||
} |
|||
}, |
|||
}, |
|||
attached() { |
|||
this.setValue(this.data.value) |
|||
}, |
|||
}) |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"wux-multi-picker-view": "../multi-picker-view/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<wux-multi-picker-view |
|||
id="wux-picker" |
|||
wx:if="{{ cols.length > 0 }}" |
|||
prefixCls="{{ multiPickerPrefixCls }}" |
|||
pickerPrefixCls="{{ pickerPrefixCls }}" |
|||
value="{{ inputValue }}" |
|||
itemHeight="{{ itemHeight }}" |
|||
itemStyle="{{ itemStyle }}" |
|||
indicatorStyle="{{ indicatorStyle }}" |
|||
indicatorClass="{{ indicatorClass }}" |
|||
maskStyle="{{ maskStyle }}" |
|||
maskClass="{{ maskClass }}" |
|||
labelAlign="{{ labelAlign }}" |
|||
options="{{ cols }}" |
|||
bind:valueChange="onValueChange" |
|||
/> |
|||
@ -0,0 +1,9 @@ |
|||
export default { |
|||
year: '', |
|||
month: '', |
|||
day: '', |
|||
hour: '', |
|||
minute: '', |
|||
am: 'AM', |
|||
pm: 'PM', |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
import en from './en' |
|||
import zh_CN from './zh_CN' |
|||
import zh_TW from './zh_TW' |
|||
|
|||
export default { |
|||
en, |
|||
zh_CN, |
|||
zh_TW, |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
export default { |
|||
year: '年', |
|||
month: '月', |
|||
day: '日', |
|||
hour: '时', |
|||
minute: '分', |
|||
am: '上午', |
|||
pm: '下午', |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
export default { |
|||
year: '年', |
|||
month: '月', |
|||
day: '日', |
|||
hour: '時', |
|||
minute: '分', |
|||
am: '上午', |
|||
pm: '下午', |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
export const props = { |
|||
prefixCls: { |
|||
type: String, |
|||
value: 'wux-date-picker', |
|||
}, |
|||
multiPickerPrefixCls: { |
|||
type: String, |
|||
value: 'wux-picker', |
|||
}, |
|||
pickerPrefixCls: { |
|||
type: String, |
|||
value: 'wux-picker-col', |
|||
}, |
|||
value: { |
|||
type: null, |
|||
value: null, |
|||
}, |
|||
itemHeight: { |
|||
type: Number, |
|||
value: 34, |
|||
}, |
|||
itemStyle: { |
|||
type: [String, Object, Array], |
|||
value: '', |
|||
}, |
|||
indicatorStyle: { |
|||
type: [String, Object, Array], |
|||
value: '', |
|||
}, |
|||
indicatorClass: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
maskStyle: { |
|||
type: [String, Object, Array], |
|||
value: '', |
|||
}, |
|||
maskClass: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
labelAlign: { |
|||
type: String, |
|||
value: 'center', |
|||
}, |
|||
mode: { |
|||
type: String, |
|||
value: 'datetime', |
|||
}, |
|||
minuteStep: { |
|||
type: Number, |
|||
value: 1, |
|||
}, |
|||
use12Hours: { |
|||
type: Boolean, |
|||
value: false, |
|||
}, |
|||
minDate: { |
|||
type: null, |
|||
value: null, |
|||
}, |
|||
maxDate: { |
|||
type: null, |
|||
value: null, |
|||
}, |
|||
minHour: { |
|||
type: Number, |
|||
value: 0, |
|||
}, |
|||
maxHour: { |
|||
type: Number, |
|||
value: 23, |
|||
}, |
|||
minMinute: { |
|||
type: Number, |
|||
value: 0, |
|||
}, |
|||
maxMinute: { |
|||
type: Number, |
|||
value: 59, |
|||
}, |
|||
lang: { |
|||
type: String, |
|||
value: 'zh_CN', |
|||
}, |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
import baseComponent from '../helpers/baseComponent' |
|||
import popupMixin from '../helpers/popupMixin' |
|||
import { props } from '../date-picker-view/props' |
|||
import { formatDate } from './utils' |
|||
|
|||
const platformProps = { |
|||
labelPropName: 'label', |
|||
format(values, props) { |
|||
const o = { |
|||
datetime: 'yyyy-MM-dd hh:mm', |
|||
date: 'yyyy-MM-dd', |
|||
year: 'yyyy', |
|||
month: 'yyyy-MM', |
|||
time: 'hh:mm', |
|||
} |
|||
return formatDate(values.date, o[props.mode]) |
|||
}, |
|||
} |
|||
|
|||
baseComponent({ |
|||
behaviors: [popupMixin('#wux-picker', platformProps)], |
|||
properties: props, |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"wux-popup": "../popup/index", |
|||
"wux-date-picker-view": "../date-picker-view/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
<wux-popup |
|||
position="bottom" |
|||
visible="{{ popupVisible }}" |
|||
hasHeader="{{ false }}" |
|||
hasFooter="{{ false }}" |
|||
mountOnEnter="{{ false }}" |
|||
safeArea="bottom" |
|||
bind:close="close" |
|||
bind:closed="onClosed" |
|||
> |
|||
<view class="{{ classes.wrap }}" wx:if="{{ mounted }}"> |
|||
<view class="{{ classes.toolbar }}" wx:if="{{ toolbar }}" catchtouchmove="noop"> |
|||
<view class="{{ classes.inner }}"> |
|||
<view class="{{ classes.cancel }}" hover-class="{{ classes.hover }}" bindtap="onCancel" wx:if="{{ toolbar.cancelText }}">{{ toolbar.cancelText }}</view> |
|||
<view class="{{ classes.title }}">{{ toolbar.title }}</view> |
|||
<view class="{{ classes.confirm }}" hover-class="{{ classes.hover }}" bindtap="onConfirm" wx:if="{{ toolbar.confirmText }}">{{ toolbar.confirmText }}</view> |
|||
</view> |
|||
</view> |
|||
<wux-date-picker-view |
|||
id="wux-picker" |
|||
multiPickerPrefixCls="{{ multiPickerPrefixCls }}" |
|||
pickerPrefixCls="{{ pickerPrefixCls }}" |
|||
value="{{ inputValue }}" |
|||
itemHeight="{{ itemHeight }}" |
|||
itemStyle="{{ itemStyle }}" |
|||
indicatorStyle="{{ indicatorStyle }}" |
|||
indicatorClass="{{ indicatorClass }}" |
|||
maskStyle="{{ maskStyle }}" |
|||
maskClass="{{ maskClass }}" |
|||
labelAlign="{{ labelAlign }}" |
|||
mode="{{ mode }}" |
|||
minuteStep="{{ minuteStep }}" |
|||
use12Hours="{{ use12Hours }}" |
|||
minDate="{{ minDate }}" |
|||
maxDate="{{ maxDate }}" |
|||
minHour="{{ minHour }}" |
|||
maxHour="{{ maxHour }}" |
|||
minMinute="{{ minMinute }}" |
|||
maxMinute="{{ maxMinute }}" |
|||
lang="{{ lang }}" |
|||
bind:valueChange="onValueChange" |
|||
/> |
|||
</view> |
|||
</wux-popup> |
|||
<slot></slot> |
|||
@ -0,0 +1,57 @@ |
|||
.wux-date-picker__toolbar { |
|||
position: relative; |
|||
width: 100%; |
|||
font-size: 34rpx; |
|||
line-height: 1.5; |
|||
color: rgba(0,0,0,.85); |
|||
background-color: #f7f7f8 |
|||
} |
|||
.wux-date-picker__toolbar::before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 1PX; |
|||
border-top: 1PX solid #d9d9d9; |
|||
color: #d9d9d9; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(.5) |
|||
} |
|||
.wux-date-picker__inner { |
|||
height: 88rpx; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
text-align: center |
|||
} |
|||
.wux-date-picker__title { |
|||
position: absolute; |
|||
display: block; |
|||
width: 100%; |
|||
padding: 0; |
|||
font-size: 34rpx; |
|||
font-weight: 400; |
|||
line-height: 88rpx; |
|||
color: rgba(0,0,0,.85); |
|||
text-align: center; |
|||
white-space: nowrap |
|||
} |
|||
.wux-date-picker__button { |
|||
position: absolute; |
|||
box-sizing: border-box; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
padding: 0 30rpx; |
|||
z-index: 10 |
|||
} |
|||
.wux-date-picker__button--cancel { |
|||
left: 0; |
|||
color: #b2b2b2 |
|||
} |
|||
.wux-date-picker__button--confirm { |
|||
right: 0; |
|||
color: #33cd5f |
|||
} |
|||
.wux-date-picker__button--hover { |
|||
background-color: #ececec |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
export function formatDate(date, fmt) { |
|||
if (!(date instanceof Date)) { |
|||
date = new Date(date) |
|||
} |
|||
const o = { |
|||
'M+': date.getMonth() + 1, |
|||
'd+': date.getDate(), |
|||
'h+': date.getHours(), |
|||
'm+': date.getMinutes(), |
|||
's+': date.getSeconds(), |
|||
'q+': Math.floor((date.getMonth() + 3) / 3), |
|||
'S': date.getMilliseconds(), |
|||
} |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) |
|||
} |
|||
for (const k in o) { |
|||
if (new RegExp(`(${k})`).test(fmt)) { |
|||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) |
|||
} |
|||
} |
|||
return fmt |
|||
} |
|||
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 606 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -1,3 +1,11 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
"usingComponents": { |
|||
"wux-actionsheet": "../../../../../components/dist/actionsheet/index", |
|||
"wux-segmented-control": "../../../../../components/dist/segmented-control/index", |
|||
"wux-date-picker": "../../../../../components/dist/date-picker/index", |
|||
"wux-cell-group": "../../../../../components/dist/cell-group/index", |
|||
"wux-picker": "../../../../../components/dist/picker/index" |
|||
|
|||
}, |
|||
"navigationBarTitleText": "诉求摸排" |
|||
} |
|||