123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360 |
- <template>
- <u-picker
- ref="picker"
- :show="show"
- :closeOnClickOverlay="closeOnClickOverlay"
- :columns="columns"
- :title="title"
- :itemHeight="itemHeight"
- :showToolbar="showToolbar"
- :visibleItemCount="visibleItemCount"
- :defaultIndex="innerDefaultIndex"
- :cancelText="cancelText"
- :confirmText="confirmText"
- :cancelColor="cancelColor"
- :confirmColor="confirmColor"
- @close="close"
- @cancel="cancel"
- @confirm="confirm"
- @change="change"
- >
- </u-picker>
- </template>
- <script>
- function times(n, iteratee) {
- let index = -1
- const result = Array(n < 0 ? 0 : n)
- while (++index < n) {
- result[index] = iteratee(index)
- }
- return result
- }
- import props from './props.js';
- import dayjs from '../../libs/util/dayjs.js';
-
- export default {
- name: 'datetime-picker',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- columns: [],
- innerDefaultIndex: [],
- innerFormatter: (type, value) => value
- }
- },
- watch: {
- show(newValue, oldValue) {
- if (newValue) {
- this.updateColumnValue(this.innerValue)
- }
- },
- propsChange() {
- this.init()
- }
- },
- computed: {
-
- propsChange() {
- return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.innerValue = this.correctValue(this.value)
- this.updateColumnValue(this.innerValue)
- },
-
- setFormatter(e) {
- this.innerFormatter = e
- },
-
- close() {
- if (this.closeOnClickOverlay) {
- this.$emit('close')
- }
- },
-
- cancel() {
- this.$emit('cancel')
- },
-
- confirm() {
- this.$emit('confirm', {
- value: this.innerValue,
- mode: this.mode
- })
- this.$emit('input', this.innerValue)
- },
-
- intercept(e,type){
- let judge = e.match(/\d+/g)
-
- if(judge.length>1){
- uni.$u.error("请勿在过滤或格式化函数时添加数字")
- return 0
- }else if(type&&judge[0].length==4){
- return judge[0]
- }else if(judge[0].length>2){
- uni.$u.error("请勿在过滤或格式化函数时添加数字")
- return 0
- }else{
- return judge[0]
- }
- },
-
- change(e) {
- const { indexs, values } = e
- let selectValue = ''
- if(this.mode === 'time') {
-
- selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
- } else {
-
- const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
- const month = parseInt(this.intercept(values[1][indexs[1]]))
- let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
- let hour = 0, minute = 0
-
- const maxDate = dayjs(`${year}-${month}`).daysInMonth()
-
- if (this.mode === 'year-month') {
- date = 1
- }
-
- date = Math.min(maxDate, date)
- if (this.mode === 'datetime') {
- hour = parseInt(this.intercept(values[3][indexs[3]]))
- minute = parseInt(this.intercept(values[4][indexs[4]]))
- }
-
- selectValue = Number(new Date(year, month - 1, date, hour, minute))
- }
-
- selectValue = this.correctValue(selectValue)
- this.innerValue = selectValue
- this.updateColumnValue(selectValue)
-
- this.$emit('change', {
- value: selectValue,
-
-
- picker: this.$refs.picker,
-
- mode: this.mode
- })
- },
-
- updateColumnValue(value) {
- this.innerValue = value
- this.updateColumns()
- this.updateIndexs(value)
- },
-
- updateIndexs(value) {
- let values = []
- const formatter = this.formatter || this.innerFormatter
- const padZero = uni.$u.padZero
- if (this.mode === 'time') {
-
- const timeArr = value.split(':')
-
- values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
- } else {
- const date = new Date(value)
- values = [
- formatter('year', `${dayjs(value).year()}`),
-
- formatter('month', padZero(dayjs(value).month() + 1))
- ]
- if (this.mode === 'date') {
-
- values.push(formatter('day', padZero(dayjs(value).date())))
- }
- if (this.mode === 'datetime') {
-
- values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
- }
- }
-
- const indexs = this.columns.map((column, index) => {
-
- return Math.max(0, column.findIndex(item => item === values[index]))
- })
- this.innerDefaultIndex = indexs
- },
-
- updateColumns() {
- const formatter = this.formatter || this.innerFormatter
-
- const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
- this.columns = results
- },
- getOriginColumns() {
-
- const results = this.getRanges().map(({ type, range }) => {
- let values = times(range[1] - range[0] + 1, (index) => {
- let value = range[0] + index
- value = type === 'year' ? `${value}` : uni.$u.padZero(value)
- return value
- })
-
- if (this.filter) {
- values = this.filter(type, values)
- }
- return { type, values }
- })
- return results
- },
-
- generateArray(start, end) {
- return Array.from(new Array(end + 1).keys()).slice(start)
- },
-
- correctValue(value) {
- const isDateMode = this.mode !== 'time'
- if (isDateMode && !uni.$u.test.date(value)) {
-
- value = this.minDate
- } else if (!isDateMode && !value) {
-
- value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
- }
-
- if (!isDateMode) {
- if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误,请传递如12:24的格式')
- let [hour, minute] = value.split(':')
-
- hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
- minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
- return `${ hour }:${ minute }`
- } else {
-
- value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
- value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
- return value
- }
- },
-
- getRanges() {
- if (this.mode === 'time') {
- return [
- {
- type: 'hour',
- range: [this.minHour, this.maxHour],
- },
- {
- type: 'minute',
- range: [this.minMinute, this.maxMinute],
- },
- ];
- }
- const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
- const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
- const result = [
- {
- type: 'year',
- range: [minYear, maxYear],
- },
- {
- type: 'month',
- range: [minMonth, maxMonth],
- },
- {
- type: 'day',
- range: [minDate, maxDate],
- },
- {
- type: 'hour',
- range: [minHour, maxHour],
- },
- {
- type: 'minute',
- range: [minMinute, maxMinute],
- },
- ];
- if (this.mode === 'date')
- result.splice(3, 2);
- if (this.mode === 'year-month')
- result.splice(2, 3);
- return result;
- },
-
- getBoundary(type, innerValue) {
- const value = new Date(innerValue)
- const boundary = new Date(this[`${type}Date`])
- const year = dayjs(boundary).year()
- let month = 1
- let date = 1
- let hour = 0
- let minute = 0
- if (type === 'max') {
- month = 12
-
- date = dayjs(value).daysInMonth()
- hour = 23
- minute = 59
- }
-
- if (dayjs(value).year() === year) {
- month = dayjs(boundary).month() + 1
- if (dayjs(value).month() + 1 === month) {
- date = dayjs(boundary).date()
- if (dayjs(value).date() === date) {
- hour = dayjs(boundary).hour()
- if (dayjs(value).hour() === hour) {
- minute = dayjs(boundary).minute()
- }
- }
- }
- }
- return {
- [`${type}Year`]: year,
- [`${type}Month`]: month,
- [`${type}Date`]: date,
- [`${type}Hour`]: hour,
- [`${type}Minute`]: minute
- }
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- @import '../../libs/css/components.scss';
- </style>
|