From 4616cff3a14b81c4d488697f43fc7aad3cf3f10f Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期一, 14 七月 2025 09:27:49 +0800
Subject: [PATCH] no message
---
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue | 1796 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 898 insertions(+), 898 deletions(-)
diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
index c48a096..743663a 100644
--- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
+++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
@@ -1,898 +1,898 @@
-<template>
- <view class="uni-calendar" @mouseleave="leaveCale">
- <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
- @click="clean"></view>
- <view v-if="insert || show" class="uni-calendar__content"
- :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
- <view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
- <view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
- <view class="uni-calendar__header-btn uni-calendar--left"></view>
- </view>
- <picker mode="date" :value="date" fields="month" @change="bindDateChange">
- <text
- class="uni-calendar__header-text">{{ (nowDate.year||'') + ' 骞� ' + ( nowDate.month||'') +' 鏈�'}}</text>
- </picker>
- <view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
- <view class="uni-calendar__header-btn uni-calendar--right"></view>
- </view>
- <view v-if="!insert" class="dialog-close" @click="clean">
- <view class="dialog-close-plus" data-id="close"></view>
- <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
- </view>
-
- <!-- <text class="uni-calendar__backtoday" @click="backtoday">鍥炲埌浠婂ぉ</text> -->
- </view>
- <view class="uni-calendar__box">
- <view v-if="showMonth" class="uni-calendar__box-bg">
- <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
- </view>
- <view class="uni-calendar__weeks" style="padding-bottom: 7px;">
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{monText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{THUText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
- </view>
- <view class="uni-calendar__weeks-day">
- <text class="uni-calendar__weeks-day-text">{{SATText}}</text>
- </view>
- </view>
- <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
- <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
- <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
- :selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate"
- @handleMouse="handleMouse">
- </calendar-item>
- </view>
- </view>
- </view>
- <view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"
- style="padding: 0 80px;">
- <view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
- <time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time"
- :disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
- </time-picker>
- </view>
-
- <view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top">
- <view class="uni-date-changed--time-start">
- <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
- </view>
- <time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
- :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
- </time-picker>
- </view>
- <uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
- <view class="uni-date-changed--time-end">
- <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
- <time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
- :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
- </time-picker>
- </view>
- </view>
- <view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
- <!-- <view class="uni-calendar__header-btn-box">
- <text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
- </view> -->
- <view class="uni-datetime-picker--btn" @click="confirm">纭</view>
- </view>
- </view>
- </view>
-</template>
-
-<script>
- import Calendar from './util.js';
- import calendarItem from './calendar-item.vue'
- import timePicker from './time-picker.vue'
- import {
- initVueI18n
- } from '@dcloudio/uni-i18n'
- import messages from './i18n/index.js'
- const {
- t
- } = initVueI18n(messages)
- /**
- * Calendar 鏃ュ巻
- * @description 鏃ュ巻缁勪欢鍙互鏌ョ湅鏃ユ湡锛岄�夋嫨浠绘剰鑼冨洿鍐呯殑鏃ユ湡锛屾墦鐐规搷浣溿�傚父鐢ㄥ満鏅锛氶厭搴楁棩鏈熼璁€�佺伀杞︽満绁ㄩ�夋嫨璐拱鏃ユ湡銆佷笂涓嬬彮鎵撳崱绛�
- * @tutorial https://ext.dcloud.net.cn/plugin?id=56
- * @property {String} date 鑷畾涔夊綋鍓嶆椂闂达紝榛樿涓轰粖澶�
- * @property {Boolean} lunar 鏄剧ず鍐滃巻
- * @property {String} startDate 鏃ユ湡閫夋嫨鑼冨洿-寮�濮嬫棩鏈�
- * @property {String} endDate 鏃ユ湡閫夋嫨鑼冨洿-缁撴潫鏃ユ湡
- * @property {Boolean} range 鑼冨洿閫夋嫨
- * @property {Boolean} insert = [true|false] 鎻掑叆妯″紡,榛樿涓篺alse
- * @value true 寮圭獥妯″紡
- * @value false 鎻掑叆妯″紡
- * @property {Boolean} clearDate = [true|false] 寮圭獥妯″紡鏄惁娓呯┖涓婃閫夋嫨鍐呭
- * @property {Array} selected 鎵撶偣锛屾湡寰呮牸寮廩{date: '2019-06-27', info: '绛惧埌', data: { custom: '鑷畾涔変俊鎭�', name: '鑷畾涔夋秷鎭ご',xxx:xxx... }}]
- * @property {Boolean} showMonth 鏄惁閫夋嫨鏈堜唤涓鸿儗鏅�
- * @event {Function} change 鏃ユ湡鏀瑰彉锛宍insert :ture` 鏃剁敓鏁�
- * @event {Function} confirm 纭閫夋嫨`insert :false` 鏃剁敓鏁�
- * @event {Function} monthSwitch 鍒囨崲鏈堜唤鏃惰Е鍙�
- * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
- */
- export default {
- components: {
- calendarItem,
- timePicker
- },
- props: {
- date: {
- type: String,
- default: ''
- },
- defTime: {
- type: [String, Object],
- default: ''
- },
- selectableTimes: {
- type: [Object],
- default () {
- return {}
- }
- },
- selected: {
- type: Array,
- default () {
- return []
- }
- },
- lunar: {
- type: Boolean,
- default: false
- },
- startDate: {
- type: String,
- default: ''
- },
- endDate: {
- type: String,
- default: ''
- },
- range: {
- type: Boolean,
- default: false
- },
- typeHasTime: {
- type: Boolean,
- default: false
- },
- insert: {
- type: Boolean,
- default: true
- },
- showMonth: {
- type: Boolean,
- default: true
- },
- clearDate: {
- type: Boolean,
- default: true
- },
- left: {
- type: Boolean,
- default: true
- },
- right: {
- type: Boolean,
- default: true
- },
- checkHover: {
- type: Boolean,
- default: true
- },
- hideSecond: {
- type: [Boolean],
- default: false
- },
- pleStatus: {
- type: Object,
- default () {
- return {
- before: '',
- after: '',
- data: [],
- fulldate: ''
- }
- }
- }
- },
- data() {
- return {
- show: false,
- weeks: [],
- calendar: {},
- nowDate: '',
- aniMaskShow: false,
- firstEnter: true,
- time: '',
- timeRange: {
- startTime: '',
- endTime: ''
- },
- tempSingleDate: '',
- tempRange: {
- before: '',
- after: ''
- }
- }
- },
- watch: {
- date: {
- immediate: true,
- handler(newVal, oldVal) {
- if (!this.range) {
- this.tempSingleDate = newVal
- setTimeout(() => {
- this.init(newVal)
- }, 100)
- }
- }
- },
- defTime: {
- immediate: true,
- handler(newVal, oldVal) {
- if (!this.range) {
- this.time = newVal
- } else {
- // console.log('-----', newVal);
- this.timeRange.startTime = newVal.start
- this.timeRange.endTime = newVal.end
- }
- }
- },
- startDate(val) {
- this.cale.resetSatrtDate(val)
- this.cale.setDate(this.nowDate.fullDate)
- this.weeks = this.cale.weeks
- },
- endDate(val) {
- this.cale.resetEndDate(val)
- this.cale.setDate(this.nowDate.fullDate)
- this.weeks = this.cale.weeks
- },
- selected(newVal) {
- this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
- this.weeks = this.cale.weeks
- },
- pleStatus: {
- immediate: true,
- handler(newVal, oldVal) {
- const {
- before,
- after,
- fulldate,
- which
- } = newVal
- this.tempRange.before = before
- this.tempRange.after = after
- setTimeout(() => {
- if (fulldate) {
- this.cale.setHoverMultiple(fulldate)
- if (before && after) {
- this.cale.lastHover = true
- if (this.rangeWithinMonth(after, before)) return
- this.setDate(before)
- } else {
- this.cale.setMultiple(fulldate)
- this.setDate(this.nowDate.fullDate)
- this.calendar.fullDate = ''
- this.cale.lastHover = false
- }
- } else {
- this.cale.setDefaultMultiple(before, after)
- if (which === 'left') {
- this.setDate(before)
- this.weeks = this.cale.weeks
- } else {
- this.setDate(after)
- this.weeks = this.cale.weeks
- }
- this.cale.lastHover = true
- }
- }, 16)
- }
- }
- },
- computed: {
- reactStartTime() {
- const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
- const res = activeDate === this.startDate ? this.selectableTimes.start : ''
- return res
- },
- reactEndTime() {
- const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
- const res = activeDate === this.endDate ? this.selectableTimes.end : ''
- return res
- },
- /**
- * for i18n
- */
- selectDateText() {
- return t("uni-datetime-picker.selectDate")
- },
- startDateText() {
- return this.startPlaceholder || t("uni-datetime-picker.startDate")
- },
- endDateText() {
- return this.endPlaceholder || t("uni-datetime-picker.endDate")
- },
- okText() {
- return t("uni-datetime-picker.ok")
- },
- monText() {
- return t("uni-calender.MON")
- },
- TUEText() {
- return t("uni-calender.TUE")
- },
- WEDText() {
- return t("uni-calender.WED")
- },
- THUText() {
- return t("uni-calender.THU")
- },
- FRIText() {
- return t("uni-calender.FRI")
- },
- SATText() {
- return t("uni-calender.SAT")
- },
- SUNText() {
- return t("uni-calender.SUN")
- },
- },
- created() {
- // 鑾峰彇鏃ュ巻鏂规硶瀹炰緥
- this.cale = new Calendar({
- // date: new Date(),
- selected: this.selected,
- startDate: this.startDate,
- endDate: this.endDate,
- range: this.range,
- // multipleStatus: this.pleStatus
- })
- // 閫変腑鏌愪竴澶�
- // this.cale.setDate(this.date)
- this.init(this.date)
- // this.setDay
- },
- methods: {
- leaveCale() {
- this.firstEnter = true
- },
- handleMouse(weeks) {
- if (weeks.disable) return
- if (this.cale.lastHover) return
- let {
- before,
- after
- } = this.cale.multipleStatus
- if (!before) return
- this.calendar = weeks
- // 璁剧疆鑼冨洿閫�
- this.cale.setHoverMultiple(this.calendar.fullDate)
- this.weeks = this.cale.weeks
- // hover鏃讹紝杩涘叆涓�涓棩鍘嗭紝鏇存柊鍙︿竴涓�
- if (this.firstEnter) {
- this.$emit('firstEnterCale', this.cale.multipleStatus)
- this.firstEnter = false
- }
- },
- rangeWithinMonth(A, B) {
- const [yearA, monthA] = A.split('-')
- const [yearB, monthB] = B.split('-')
- return yearA === yearB && monthA === monthB
- },
-
- // 鍙栨秷绌块��
- clean() {
- this.close()
- },
-
- clearCalender() {
- if (this.range) {
- this.timeRange.startTime = ''
- this.timeRange.endTime = ''
- this.tempRange.before = ''
- this.tempRange.after = ''
- this.cale.multipleStatus.before = ''
- this.cale.multipleStatus.after = ''
- this.cale.multipleStatus.data = []
- this.cale.lastHover = false
- } else {
- this.time = ''
- this.tempSingleDate = ''
- }
- this.calendar.fullDate = ''
- this.setDate()
- },
-
- bindDateChange(e) {
- const value = e.detail.value + '-1'
- this.init(value)
- },
- /**
- * 鍒濆鍖栨棩鏈熸樉绀�
- * @param {Object} date
- */
- init(date) {
- this.cale.setDate(date)
- this.weeks = this.cale.weeks
- this.nowDate = this.calendar = this.cale.getInfo(date)
- },
- // choiceDate(weeks) {
- // if (weeks.disable) return
- // this.calendar = weeks
- // // 璁剧疆澶氶��
- // this.cale.setMultiple(this.calendar.fullDate, true)
- // this.weeks = this.cale.weeks
- // this.tempSingleDate = this.calendar.fullDate
- // this.tempRange.before = this.cale.multipleStatus.before
- // this.tempRange.after = this.cale.multipleStatus.after
- // this.change()
- // },
- /**
- * 鎵撳紑鏃ュ巻寮圭獥
- */
- open() {
- // 寮圭獥妯″紡骞朵笖娓呯悊鏁版嵁
- if (this.clearDate && !this.insert) {
- this.cale.cleanMultipleStatus()
- // this.cale.setDate(this.date)
- this.init(this.date)
- }
- this.show = true
- this.$nextTick(() => {
- setTimeout(() => {
- this.aniMaskShow = true
- }, 50)
- })
- },
- /**
- * 鍏抽棴鏃ュ巻寮圭獥
- */
- close() {
- this.aniMaskShow = false
- this.$nextTick(() => {
- setTimeout(() => {
- this.show = false
- this.$emit('close')
- }, 300)
- })
- },
- /**
- * 纭鎸夐挳
- */
- confirm() {
- this.setEmit('confirm')
- this.close()
- },
- /**
- * 鍙樺寲瑙﹀彂
- */
- change() {
- if (!this.insert) return
- this.setEmit('change')
- },
- /**
- * 閫夋嫨鏈堜唤瑙﹀彂
- */
- monthSwitch() {
- let {
- year,
- month
- } = this.nowDate
- this.$emit('monthSwitch', {
- year,
- month: Number(month)
- })
- },
- /**
- * 娲惧彂浜嬩欢
- * @param {Object} name
- */
- setEmit(name) {
- let {
- year,
- month,
- date,
- fullDate,
- lunar,
- extraInfo
- } = this.calendar
- this.$emit(name, {
- range: this.cale.multipleStatus,
- year,
- month,
- date,
- time: this.time,
- timeRange: this.timeRange,
- fulldate: fullDate,
- lunar,
- extraInfo: extraInfo || {}
- })
- },
- /**
- * 閫夋嫨澶╄Е鍙�
- * @param {Object} weeks
- */
- choiceDate(weeks) {
- if (weeks.disable) return
- this.calendar = weeks
- this.calendar.userChecked = true
- // 璁剧疆澶氶��
- this.cale.setMultiple(this.calendar.fullDate, true)
- this.weeks = this.cale.weeks
- this.tempSingleDate = this.calendar.fullDate
- this.tempRange.before = this.cale.multipleStatus.before
- this.tempRange.after = this.cale.multipleStatus.after
- this.change()
- },
- /**
- * 鍥炲埌浠婂ぉ
- */
- backtoday() {
- let date = this.cale.getDate(new Date()).fullDate
- // this.cale.setDate(date)
- this.init(date)
- this.change()
- },
- /**
- * 姣旇緝鏃堕棿澶у皬
- */
- dateCompare(startDate, endDate) {
- // 璁＄畻鎴鏃堕棿
- startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
- // 璁＄畻璇︾粏椤圭殑鎴鏃堕棿
- endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
- if (startDate <= endDate) {
- return true
- } else {
- return false
- }
- },
- /**
- * 涓婁釜鏈�
- */
- pre() {
- const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
- this.setDate(preDate)
- this.monthSwitch()
-
- },
- /**
- * 涓嬩釜鏈�
- */
- next() {
- const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
- this.setDate(nextDate)
- this.monthSwitch()
- },
- /**
- * 璁剧疆鏃ユ湡
- * @param {Object} date
- */
- setDate(date) {
- this.cale.setDate(date)
- this.weeks = this.cale.weeks
- this.nowDate = this.cale.getInfo(date)
- }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .uni-calendar {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: column;
- }
-
- .uni-calendar__mask {
- position: fixed;
- bottom: 0;
- top: 0;
- left: 0;
- right: 0;
- background-color: rgba(0, 0, 0, 0.4);
- transition-property: opacity;
- transition-duration: 0.3s;
- opacity: 0;
- /* #ifndef APP-NVUE */
- z-index: 99;
- /* #endif */
- }
-
- .uni-calendar--mask-show {
- opacity: 1
- }
-
- .uni-calendar--fixed {
- position: fixed;
- bottom: calc(var(--window-bottom));
- left: 0;
- right: 0;
- transition-property: transform;
- transition-duration: 0.3s;
- transform: translateY(460px);
- /* #ifndef APP-NVUE */
- z-index: 99;
- /* #endif */
- }
-
- .uni-calendar--ani-show {
- transform: translateY(0);
- }
-
- .uni-calendar__content {
- background-color: #fff;
- }
-
- .uni-calendar__content-mobile {
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
- }
-
- .uni-calendar__header {
- position: relative;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- justify-content: center;
- align-items: center;
- height: 50px;
- }
-
- .uni-calendar__header-mobile {
- padding: 10px;
- padding-bottom: 0;
- }
-
- .uni-calendar--fixed-top {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- justify-content: space-between;
- border-top-color: rgba(0, 0, 0, 0.4);
- border-top-style: solid;
- border-top-width: 1px;
- }
-
- .uni-calendar--fixed-width {
- width: 50px;
- }
-
- .uni-calendar__backtoday {
- position: absolute;
- right: 0;
- top: 25rpx;
- padding: 0 5px;
- padding-left: 10px;
- height: 25px;
- line-height: 25px;
- font-size: 12px;
- border-top-left-radius: 25px;
- border-bottom-left-radius: 25px;
- color: #fff;
- background-color: #f1f1f1;
- }
-
- .uni-calendar__header-text {
- text-align: center;
- width: 100px;
- font-size: 15px;
- color: #666;
- }
-
- .uni-calendar__button-text {
- text-align: center;
- width: 100px;
- font-size: 14px;
- color: #007aff;
- /* #ifndef APP-NVUE */
- letter-spacing: 3px;
- /* #endif */
- }
-
- .uni-calendar__header-btn-box {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- align-items: center;
- justify-content: center;
- width: 50px;
- height: 50px;
- }
-
- .uni-calendar__header-btn {
- width: 9px;
- height: 9px;
- border-left-color: #808080;
- border-left-style: solid;
- border-left-width: 1px;
- border-top-color: #555555;
- border-top-style: solid;
- border-top-width: 1px;
- }
-
- .uni-calendar--left {
- transform: rotate(-45deg);
- }
-
- .uni-calendar--right {
- transform: rotate(135deg);
- }
-
-
- .uni-calendar__weeks {
- position: relative;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- }
-
- .uni-calendar__weeks-item {
- flex: 1;
- }
-
- .uni-calendar__weeks-day {
- flex: 1;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 40px;
- border-bottom-color: #F5F5F5;
- border-bottom-style: solid;
- border-bottom-width: 1px;
- }
-
- .uni-calendar__weeks-day-text {
- font-size: 12px;
- color: #B2B2B2;
- }
-
- .uni-calendar__box {
- position: relative;
- // padding: 0 10px;
- padding-bottom: 7px;
- }
-
- .uni-calendar__box-bg {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
-
- .uni-calendar__box-bg-text {
- font-size: 200px;
- font-weight: bold;
- color: #999;
- opacity: 0.1;
- text-align: center;
- /* #ifndef APP-NVUE */
- line-height: 1;
- /* #endif */
- }
-
- .uni-date-changed {
- padding: 0 10px;
- // line-height: 50px;
- text-align: center;
- color: #333;
- border-top-color: #DCDCDC;
- ;
- border-top-style: solid;
- border-top-width: 1px;
- flex: 1;
- }
-
- .uni-date-btn--ok {
- padding: 20px 15px;
- }
-
- .uni-date-changed--time-start {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- align-items: center;
- }
-
- .uni-date-changed--time-end {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- align-items: center;
- }
-
- .uni-date-changed--time-date {
- color: #999;
- line-height: 50px;
- margin-right: 5px;
- // opacity: 0.6;
- }
-
- .time-picker-style {
- // width: 62px;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- justify-content: center;
- align-items: center
- }
-
- .mr-10 {
- margin-right: 10px;
- }
-
- .dialog-close {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- align-items: center;
- padding: 0 25px;
- margin-top: 10px;
- }
-
- .dialog-close-plus {
- width: 16px;
- height: 2px;
- background-color: #737987;
- border-radius: 2px;
- transform: rotate(45deg);
- }
-
- .dialog-close-rotate {
- position: absolute;
- transform: rotate(-45deg);
- }
-
- .uni-datetime-picker--btn {
- border-radius: 100px;
- height: 40px;
- line-height: 40px;
- background-color: #007aff;
- color: #fff;
- font-size: 16px;
- letter-spacing: 5px;
- }
-
- /* #ifndef APP-NVUE */
- .uni-datetime-picker--btn:active {
- opacity: 0.7;
- }
- /* #endif */
-</style>
+<template>
+ <view class="uni-calendar" @mouseleave="leaveCale">
+ <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
+ @click="clean"></view>
+ <view v-if="insert || show" class="uni-calendar__content"
+ :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
+ <view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
+ <view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
+ <view class="uni-calendar__header-btn uni-calendar--left"></view>
+ </view>
+ <picker mode="date" :value="date" fields="month" @change="bindDateChange">
+ <text
+ class="uni-calendar__header-text">{{ (nowDate.year||'') + ' 骞� ' + ( nowDate.month||'') +' 鏈�'}}</text>
+ </picker>
+ <view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
+ <view class="uni-calendar__header-btn uni-calendar--right"></view>
+ </view>
+ <view v-if="!insert" class="dialog-close" @click="clean">
+ <view class="dialog-close-plus" data-id="close"></view>
+ <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
+ </view>
+
+ <!-- <text class="uni-calendar__backtoday" @click="backtoday">鍥炲埌浠婂ぉ</text> -->
+ </view>
+ <view class="uni-calendar__box">
+ <view v-if="showMonth" class="uni-calendar__box-bg">
+ <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+ </view>
+ <view class="uni-calendar__weeks" style="padding-bottom: 7px;">
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{monText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+ </view>
+ </view>
+ <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+ <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+ <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
+ :selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate"
+ @handleMouse="handleMouse">
+ </calendar-item>
+ </view>
+ </view>
+ </view>
+ <view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"
+ style="padding: 0 80px;">
+ <view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
+ <time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time"
+ :disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
+ </time-picker>
+ </view>
+
+ <view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top">
+ <view class="uni-date-changed--time-start">
+ <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
+ </view>
+ <time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
+ :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
+ </time-picker>
+ </view>
+ <uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
+ <view class="uni-date-changed--time-end">
+ <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
+ <time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
+ :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
+ </time-picker>
+ </view>
+ </view>
+ <view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
+ <!-- <view class="uni-calendar__header-btn-box">
+ <text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
+ </view> -->
+ <view class="uni-datetime-picker--btn" @click="confirm">纭</view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import Calendar from './util.js';
+ import calendarItem from './calendar-item.vue'
+ import timePicker from './time-picker.vue'
+ import {
+ initVueI18n
+ } from '@dcloudio/uni-i18n'
+ import messages from './i18n/index.js'
+ const {
+ t
+ } = initVueI18n(messages)
+ /**
+ * Calendar 鏃ュ巻
+ * @description 鏃ュ巻缁勪欢鍙互鏌ョ湅鏃ユ湡锛岄�夋嫨浠绘剰鑼冨洿鍐呯殑鏃ユ湡锛屾墦鐐规搷浣溿�傚父鐢ㄥ満鏅锛氶厭搴楁棩鏈熼璁€�佺伀杞︽満绁ㄩ�夋嫨璐拱鏃ユ湡銆佷笂涓嬬彮鎵撳崱绛�
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+ * @property {String} date 鑷畾涔夊綋鍓嶆椂闂达紝榛樿涓轰粖澶�
+ * @property {Boolean} lunar 鏄剧ず鍐滃巻
+ * @property {String} startDate 鏃ユ湡閫夋嫨鑼冨洿-寮�濮嬫棩鏈�
+ * @property {String} endDate 鏃ユ湡閫夋嫨鑼冨洿-缁撴潫鏃ユ湡
+ * @property {Boolean} range 鑼冨洿閫夋嫨
+ * @property {Boolean} insert = [true|false] 鎻掑叆妯″紡,榛樿涓篺alse
+ * @value true 寮圭獥妯″紡
+ * @value false 鎻掑叆妯″紡
+ * @property {Boolean} clearDate = [true|false] 寮圭獥妯″紡鏄惁娓呯┖涓婃閫夋嫨鍐呭
+ * @property {Array} selected 鎵撶偣锛屾湡寰呮牸寮廩{date: '2019-06-27', info: '绛惧埌', data: { custom: '鑷畾涔変俊鎭�', name: '鑷畾涔夋秷鎭ご',xxx:xxx... }}]
+ * @property {Boolean} showMonth 鏄惁閫夋嫨鏈堜唤涓鸿儗鏅�
+ * @event {Function} change 鏃ユ湡鏀瑰彉锛宍insert :ture` 鏃剁敓鏁�
+ * @event {Function} confirm 纭閫夋嫨`insert :false` 鏃剁敓鏁�
+ * @event {Function} monthSwitch 鍒囨崲鏈堜唤鏃惰Е鍙�
+ * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+ */
+ export default {
+ components: {
+ calendarItem,
+ timePicker
+ },
+ props: {
+ date: {
+ type: String,
+ default: ''
+ },
+ defTime: {
+ type: [String, Object],
+ default: ''
+ },
+ selectableTimes: {
+ type: [Object],
+ default () {
+ return {}
+ }
+ },
+ selected: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ lunar: {
+ type: Boolean,
+ default: false
+ },
+ startDate: {
+ type: String,
+ default: ''
+ },
+ endDate: {
+ type: String,
+ default: ''
+ },
+ range: {
+ type: Boolean,
+ default: false
+ },
+ typeHasTime: {
+ type: Boolean,
+ default: false
+ },
+ insert: {
+ type: Boolean,
+ default: true
+ },
+ showMonth: {
+ type: Boolean,
+ default: true
+ },
+ clearDate: {
+ type: Boolean,
+ default: true
+ },
+ left: {
+ type: Boolean,
+ default: true
+ },
+ right: {
+ type: Boolean,
+ default: true
+ },
+ checkHover: {
+ type: Boolean,
+ default: true
+ },
+ hideSecond: {
+ type: [Boolean],
+ default: false
+ },
+ pleStatus: {
+ type: Object,
+ default () {
+ return {
+ before: '',
+ after: '',
+ data: [],
+ fulldate: ''
+ }
+ }
+ }
+ },
+ data() {
+ return {
+ show: false,
+ weeks: [],
+ calendar: {},
+ nowDate: '',
+ aniMaskShow: false,
+ firstEnter: true,
+ time: '',
+ timeRange: {
+ startTime: '',
+ endTime: ''
+ },
+ tempSingleDate: '',
+ tempRange: {
+ before: '',
+ after: ''
+ }
+ }
+ },
+ watch: {
+ date: {
+ immediate: true,
+ handler(newVal, oldVal) {
+ if (!this.range) {
+ this.tempSingleDate = newVal
+ setTimeout(() => {
+ this.init(newVal)
+ }, 100)
+ }
+ }
+ },
+ defTime: {
+ immediate: true,
+ handler(newVal, oldVal) {
+ if (!this.range) {
+ this.time = newVal
+ } else {
+ // console.log('-----', newVal);
+ this.timeRange.startTime = newVal.start
+ this.timeRange.endTime = newVal.end
+ }
+ }
+ },
+ startDate(val) {
+ this.cale.resetSatrtDate(val)
+ this.cale.setDate(this.nowDate.fullDate)
+ this.weeks = this.cale.weeks
+ },
+ endDate(val) {
+ this.cale.resetEndDate(val)
+ this.cale.setDate(this.nowDate.fullDate)
+ this.weeks = this.cale.weeks
+ },
+ selected(newVal) {
+ this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+ this.weeks = this.cale.weeks
+ },
+ pleStatus: {
+ immediate: true,
+ handler(newVal, oldVal) {
+ const {
+ before,
+ after,
+ fulldate,
+ which
+ } = newVal
+ this.tempRange.before = before
+ this.tempRange.after = after
+ setTimeout(() => {
+ if (fulldate) {
+ this.cale.setHoverMultiple(fulldate)
+ if (before && after) {
+ this.cale.lastHover = true
+ if (this.rangeWithinMonth(after, before)) return
+ this.setDate(before)
+ } else {
+ this.cale.setMultiple(fulldate)
+ this.setDate(this.nowDate.fullDate)
+ this.calendar.fullDate = ''
+ this.cale.lastHover = false
+ }
+ } else {
+ this.cale.setDefaultMultiple(before, after)
+ if (which === 'left') {
+ this.setDate(before)
+ this.weeks = this.cale.weeks
+ } else {
+ this.setDate(after)
+ this.weeks = this.cale.weeks
+ }
+ this.cale.lastHover = true
+ }
+ }, 16)
+ }
+ }
+ },
+ computed: {
+ reactStartTime() {
+ const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
+ const res = activeDate === this.startDate ? this.selectableTimes.start : ''
+ return res
+ },
+ reactEndTime() {
+ const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
+ const res = activeDate === this.endDate ? this.selectableTimes.end : ''
+ return res
+ },
+ /**
+ * for i18n
+ */
+ selectDateText() {
+ return t("uni-datetime-picker.selectDate")
+ },
+ startDateText() {
+ return this.startPlaceholder || t("uni-datetime-picker.startDate")
+ },
+ endDateText() {
+ return this.endPlaceholder || t("uni-datetime-picker.endDate")
+ },
+ okText() {
+ return t("uni-datetime-picker.ok")
+ },
+ monText() {
+ return t("uni-calender.MON")
+ },
+ TUEText() {
+ return t("uni-calender.TUE")
+ },
+ WEDText() {
+ return t("uni-calender.WED")
+ },
+ THUText() {
+ return t("uni-calender.THU")
+ },
+ FRIText() {
+ return t("uni-calender.FRI")
+ },
+ SATText() {
+ return t("uni-calender.SAT")
+ },
+ SUNText() {
+ return t("uni-calender.SUN")
+ },
+ },
+ created() {
+ // 鑾峰彇鏃ュ巻鏂规硶瀹炰緥
+ this.cale = new Calendar({
+ // date: new Date(),
+ selected: this.selected,
+ startDate: this.startDate,
+ endDate: this.endDate,
+ range: this.range,
+ // multipleStatus: this.pleStatus
+ })
+ // 閫変腑鏌愪竴澶�
+ // this.cale.setDate(this.date)
+ this.init(this.date)
+ // this.setDay
+ },
+ methods: {
+ leaveCale() {
+ this.firstEnter = true
+ },
+ handleMouse(weeks) {
+ if (weeks.disable) return
+ if (this.cale.lastHover) return
+ let {
+ before,
+ after
+ } = this.cale.multipleStatus
+ if (!before) return
+ this.calendar = weeks
+ // 璁剧疆鑼冨洿閫�
+ this.cale.setHoverMultiple(this.calendar.fullDate)
+ this.weeks = this.cale.weeks
+ // hover鏃讹紝杩涘叆涓�涓棩鍘嗭紝鏇存柊鍙︿竴涓�
+ if (this.firstEnter) {
+ this.$emit('firstEnterCale', this.cale.multipleStatus)
+ this.firstEnter = false
+ }
+ },
+ rangeWithinMonth(A, B) {
+ const [yearA, monthA] = A.split('-')
+ const [yearB, monthB] = B.split('-')
+ return yearA === yearB && monthA === monthB
+ },
+
+ // 鍙栨秷绌块��
+ clean() {
+ this.close()
+ },
+
+ clearCalender() {
+ if (this.range) {
+ this.timeRange.startTime = ''
+ this.timeRange.endTime = ''
+ this.tempRange.before = ''
+ this.tempRange.after = ''
+ this.cale.multipleStatus.before = ''
+ this.cale.multipleStatus.after = ''
+ this.cale.multipleStatus.data = []
+ this.cale.lastHover = false
+ } else {
+ this.time = ''
+ this.tempSingleDate = ''
+ }
+ this.calendar.fullDate = ''
+ this.setDate()
+ },
+
+ bindDateChange(e) {
+ const value = e.detail.value + '-1'
+ this.init(value)
+ },
+ /**
+ * 鍒濆鍖栨棩鏈熸樉绀�
+ * @param {Object} date
+ */
+ init(date) {
+ this.cale.setDate(date)
+ this.weeks = this.cale.weeks
+ this.nowDate = this.calendar = this.cale.getInfo(date)
+ },
+ // choiceDate(weeks) {
+ // if (weeks.disable) return
+ // this.calendar = weeks
+ // // 璁剧疆澶氶��
+ // this.cale.setMultiple(this.calendar.fullDate, true)
+ // this.weeks = this.cale.weeks
+ // this.tempSingleDate = this.calendar.fullDate
+ // this.tempRange.before = this.cale.multipleStatus.before
+ // this.tempRange.after = this.cale.multipleStatus.after
+ // this.change()
+ // },
+ /**
+ * 鎵撳紑鏃ュ巻寮圭獥
+ */
+ open() {
+ // 寮圭獥妯″紡骞朵笖娓呯悊鏁版嵁
+ if (this.clearDate && !this.insert) {
+ this.cale.cleanMultipleStatus()
+ // this.cale.setDate(this.date)
+ this.init(this.date)
+ }
+ this.show = true
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.aniMaskShow = true
+ }, 50)
+ })
+ },
+ /**
+ * 鍏抽棴鏃ュ巻寮圭獥
+ */
+ close() {
+ this.aniMaskShow = false
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.show = false
+ this.$emit('close')
+ }, 300)
+ })
+ },
+ /**
+ * 纭鎸夐挳
+ */
+ confirm() {
+ this.setEmit('confirm')
+ this.close()
+ },
+ /**
+ * 鍙樺寲瑙﹀彂
+ */
+ change() {
+ if (!this.insert) return
+ this.setEmit('change')
+ },
+ /**
+ * 閫夋嫨鏈堜唤瑙﹀彂
+ */
+ monthSwitch() {
+ let {
+ year,
+ month
+ } = this.nowDate
+ this.$emit('monthSwitch', {
+ year,
+ month: Number(month)
+ })
+ },
+ /**
+ * 娲惧彂浜嬩欢
+ * @param {Object} name
+ */
+ setEmit(name) {
+ let {
+ year,
+ month,
+ date,
+ fullDate,
+ lunar,
+ extraInfo
+ } = this.calendar
+ this.$emit(name, {
+ range: this.cale.multipleStatus,
+ year,
+ month,
+ date,
+ time: this.time,
+ timeRange: this.timeRange,
+ fulldate: fullDate,
+ lunar,
+ extraInfo: extraInfo || {}
+ })
+ },
+ /**
+ * 閫夋嫨澶╄Е鍙�
+ * @param {Object} weeks
+ */
+ choiceDate(weeks) {
+ if (weeks.disable) return
+ this.calendar = weeks
+ this.calendar.userChecked = true
+ // 璁剧疆澶氶��
+ this.cale.setMultiple(this.calendar.fullDate, true)
+ this.weeks = this.cale.weeks
+ this.tempSingleDate = this.calendar.fullDate
+ this.tempRange.before = this.cale.multipleStatus.before
+ this.tempRange.after = this.cale.multipleStatus.after
+ this.change()
+ },
+ /**
+ * 鍥炲埌浠婂ぉ
+ */
+ backtoday() {
+ let date = this.cale.getDate(new Date()).fullDate
+ // this.cale.setDate(date)
+ this.init(date)
+ this.change()
+ },
+ /**
+ * 姣旇緝鏃堕棿澶у皬
+ */
+ dateCompare(startDate, endDate) {
+ // 璁＄畻鎴鏃堕棿
+ startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
+ // 璁＄畻璇︾粏椤圭殑鎴鏃堕棿
+ endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
+ if (startDate <= endDate) {
+ return true
+ } else {
+ return false
+ }
+ },
+ /**
+ * 涓婁釜鏈�
+ */
+ pre() {
+ const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
+ this.setDate(preDate)
+ this.monthSwitch()
+
+ },
+ /**
+ * 涓嬩釜鏈�
+ */
+ next() {
+ const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
+ this.setDate(nextDate)
+ this.monthSwitch()
+ },
+ /**
+ * 璁剧疆鏃ユ湡
+ * @param {Object} date
+ */
+ setDate(date) {
+ this.cale.setDate(date)
+ this.weeks = this.cale.weeks
+ this.nowDate = this.cale.getInfo(date)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .uni-calendar {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ }
+
+ .uni-calendar__mask {
+ position: fixed;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ transition-property: opacity;
+ transition-duration: 0.3s;
+ opacity: 0;
+ /* #ifndef APP-NVUE */
+ z-index: 99;
+ /* #endif */
+ }
+
+ .uni-calendar--mask-show {
+ opacity: 1
+ }
+
+ .uni-calendar--fixed {
+ position: fixed;
+ bottom: calc(var(--window-bottom));
+ left: 0;
+ right: 0;
+ transition-property: transform;
+ transition-duration: 0.3s;
+ transform: translateY(460px);
+ /* #ifndef APP-NVUE */
+ z-index: 99;
+ /* #endif */
+ }
+
+ .uni-calendar--ani-show {
+ transform: translateY(0);
+ }
+
+ .uni-calendar__content {
+ background-color: #fff;
+ }
+
+ .uni-calendar__content-mobile {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
+ }
+
+ .uni-calendar__header {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 50px;
+ }
+
+ .uni-calendar__header-mobile {
+ padding: 10px;
+ padding-bottom: 0;
+ }
+
+ .uni-calendar--fixed-top {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ justify-content: space-between;
+ border-top-color: rgba(0, 0, 0, 0.4);
+ border-top-style: solid;
+ border-top-width: 1px;
+ }
+
+ .uni-calendar--fixed-width {
+ width: 50px;
+ }
+
+ .uni-calendar__backtoday {
+ position: absolute;
+ right: 0;
+ top: 25rpx;
+ padding: 0 5px;
+ padding-left: 10px;
+ height: 25px;
+ line-height: 25px;
+ font-size: 12px;
+ border-top-left-radius: 25px;
+ border-bottom-left-radius: 25px;
+ color: #fff;
+ background-color: #f1f1f1;
+ }
+
+ .uni-calendar__header-text {
+ text-align: center;
+ width: 100px;
+ font-size: 15px;
+ color: #666;
+ }
+
+ .uni-calendar__button-text {
+ text-align: center;
+ width: 100px;
+ font-size: 14px;
+ color: #007aff;
+ /* #ifndef APP-NVUE */
+ letter-spacing: 3px;
+ /* #endif */
+ }
+
+ .uni-calendar__header-btn-box {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ }
+
+ .uni-calendar__header-btn {
+ width: 9px;
+ height: 9px;
+ border-left-color: #808080;
+ border-left-style: solid;
+ border-left-width: 1px;
+ border-top-color: #555555;
+ border-top-style: solid;
+ border-top-width: 1px;
+ }
+
+ .uni-calendar--left {
+ transform: rotate(-45deg);
+ }
+
+ .uni-calendar--right {
+ transform: rotate(135deg);
+ }
+
+
+ .uni-calendar__weeks {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ }
+
+ .uni-calendar__weeks-item {
+ flex: 1;
+ }
+
+ .uni-calendar__weeks-day {
+ flex: 1;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ border-bottom-color: #F5F5F5;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ }
+
+ .uni-calendar__weeks-day-text {
+ font-size: 12px;
+ color: #B2B2B2;
+ }
+
+ .uni-calendar__box {
+ position: relative;
+ // padding: 0 10px;
+ padding-bottom: 7px;
+ }
+
+ .uni-calendar__box-bg {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .uni-calendar__box-bg-text {
+ font-size: 200px;
+ font-weight: bold;
+ color: #999;
+ opacity: 0.1;
+ text-align: center;
+ /* #ifndef APP-NVUE */
+ line-height: 1;
+ /* #endif */
+ }
+
+ .uni-date-changed {
+ padding: 0 10px;
+ // line-height: 50px;
+ text-align: center;
+ color: #333;
+ border-top-color: #DCDCDC;
+ ;
+ border-top-style: solid;
+ border-top-width: 1px;
+ flex: 1;
+ }
+
+ .uni-date-btn--ok {
+ padding: 20px 15px;
+ }
+
+ .uni-date-changed--time-start {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ align-items: center;
+ }
+
+ .uni-date-changed--time-end {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ align-items: center;
+ }
+
+ .uni-date-changed--time-date {
+ color: #999;
+ line-height: 50px;
+ margin-right: 5px;
+ // opacity: 0.6;
+ }
+
+ .time-picker-style {
+ // width: 62px;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ justify-content: center;
+ align-items: center
+ }
+
+ .mr-10 {
+ margin-right: 10px;
+ }
+
+ .dialog-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ align-items: center;
+ padding: 0 25px;
+ margin-top: 10px;
+ }
+
+ .dialog-close-plus {
+ width: 16px;
+ height: 2px;
+ background-color: #737987;
+ border-radius: 2px;
+ transform: rotate(45deg);
+ }
+
+ .dialog-close-rotate {
+ position: absolute;
+ transform: rotate(-45deg);
+ }
+
+ .uni-datetime-picker--btn {
+ border-radius: 100px;
+ height: 40px;
+ line-height: 40px;
+ background-color: #007aff;
+ color: #fff;
+ font-size: 16px;
+ letter-spacing: 5px;
+ }
+
+ /* #ifndef APP-NVUE */
+ .uni-datetime-picker--btn:active {
+ opacity: 0.7;
+ }
+ /* #endif */
+</style>
--
Gitblit v1.9.1