|
|
@@ -0,0 +1,389 @@
|
|
|
+<template>
|
|
|
+ <view v-if="isShow">
|
|
|
+ <view class="date-picker-mask" bubble='true' @click="hide" :class="[isOpen?'show-date-picker-mask':'hide-date-picekr-mask']"
|
|
|
+ :style="{backgroundColor:maskColor}"></view>
|
|
|
+ <view class="date-picker-container" @click.stop="handleClick" :class="[isOpen?'show-date-picker':'hide-date-picekr']">
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <view class="date-picker-title row between-center">
|
|
|
+ <text class="date-picker-cancel" @click="hide">取消</text>
|
|
|
+ <text class="date-picker-confirm" @click="dateConfirm">确定</text>
|
|
|
+ </view>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <picker-view class="date-picker-box" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
|
|
|
+ <picker-view-column class="center">
|
|
|
+ <view class="date-picker-item center" v-for="(item,index) in years" :key="index">
|
|
|
+ <text v-if='item!="长期"'>{{item}}年</text>
|
|
|
+ <text v-else>{{item}}</text>
|
|
|
+ </view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="date-picker-item center" v-for="(item,index) in months" :key="index">
|
|
|
+ <text v-if="item!=''">{{item}}月</text>
|
|
|
+ <text v-else>{{item}}</text>
|
|
|
+ </view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="date-picker-item center" v-for="(item,index) in days" :key="index">
|
|
|
+
|
|
|
+ <text v-if="item!=''">{{item}}日</text>
|
|
|
+ <text v-else>{{item}}</text>
|
|
|
+ </view>
|
|
|
+ </picker-view-column>
|
|
|
+ </picker-view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "datePicker",
|
|
|
+ props: {
|
|
|
+ maskColor: { // 模态框背景色
|
|
|
+ type: String,
|
|
|
+ default: 'rgba(0,0,0,0.3)'
|
|
|
+ },
|
|
|
+ checkYear:{
|
|
|
+ type: [String,Number],
|
|
|
+ default: new Date().getFullYear()
|
|
|
+ },
|
|
|
+ checkMonth:{
|
|
|
+ type: [String,Number],
|
|
|
+ default: new Date().getMonth() + 1
|
|
|
+ },
|
|
|
+ checkDay:{
|
|
|
+ type: [String,Number],
|
|
|
+ default: new Date().getDate()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const date = new Date();
|
|
|
+ const years = ['长期'];
|
|
|
+ const months = [''];
|
|
|
+ // console.log(this.checkYear)
|
|
|
+ // const month = date.getMonth() + 1
|
|
|
+ // const day = date.getDate();
|
|
|
+ const year = this.checkYear
|
|
|
+ const month = this.checkMonth
|
|
|
+ const day = this.checkDay
|
|
|
+ console.log(year,month,day)
|
|
|
+ // 可在此设置起始年份和终止年份
|
|
|
+ for (let i = 1940; i <= date.getFullYear() + 10; i++) {
|
|
|
+ years.push(i);
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= 12; i++) {
|
|
|
+ months.push(i);
|
|
|
+ }
|
|
|
+ console.log(months)
|
|
|
+ return {
|
|
|
+ isShow: false, // 是否弹出
|
|
|
+ isOpen: false,
|
|
|
+
|
|
|
+ years,
|
|
|
+ months,
|
|
|
+ days: [''],
|
|
|
+ year,
|
|
|
+ month,
|
|
|
+ day,
|
|
|
+ value: [year - 1940, month - 1, day - 1], // 默认选中当天
|
|
|
+ visible: true,
|
|
|
+ indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ // 选中日期
|
|
|
+ dateConfirm() {
|
|
|
+ let dateobj={
|
|
|
+ year:this.year,
|
|
|
+ month:this.month?this.month > 9 ? this.month : '0' + this.month:'',
|
|
|
+ day:this.day?this.day > 9 ? this.day :'0' + this.day:'',
|
|
|
+ date:''
|
|
|
+ }
|
|
|
+ if(this.year!='长期'){
|
|
|
+ var val=[]
|
|
|
+ for (let i = 0; i < this.years.length; i++) {
|
|
|
+ if(this.year==this.years[i]){
|
|
|
+ val[0]=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.months.length; i++) {
|
|
|
+ if(this.month==this.months[i]){
|
|
|
+ val[1]=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.days.length; i++) {
|
|
|
+ if(this.day==this.days[i]){
|
|
|
+ val[2]=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.value=val
|
|
|
+ dateobj.date= this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.day > 9 ? this.day :
|
|
|
+ '0' + this.day);
|
|
|
+ }else{
|
|
|
+ this.value=[0,0,0]
|
|
|
+ dateobj.date = this.year
|
|
|
+ }
|
|
|
+
|
|
|
+ // 发送一个点击事件，并把当前选中的日期发送出去
|
|
|
+
|
|
|
+ this.$emit('dateConfirm', dateobj);
|
|
|
+ this.hide();
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ bindChange(e) {
|
|
|
+ // console.log(this.value,e)
|
|
|
+ const val = e.detail.value;
|
|
|
+ this.year = this.years[val[0]];
|
|
|
+ this.month = this.months[val[1]];
|
|
|
+ this.day = this.days[val[2]];
|
|
|
+
|
|
|
+ // this.value=[this.year, this.month, this.day]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 弹出
|
|
|
+ show() {
|
|
|
+ this.isShow = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isOpen = true;
|
|
|
+ }, 20);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭
|
|
|
+ hide() {
|
|
|
+ this.isOpen = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isShow = false;
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 阻止冒泡
|
|
|
+ handleClick(event) {
|
|
|
+ event.stopPropagation();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "month": { // 监听月份变化，改变当前月份天数值
|
|
|
+ handler(val) {
|
|
|
+ if (val < 8&&this.year!='长期') {
|
|
|
+ if (val % 2 !== 0) {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 31; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 30; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (val > 7&&this.year!='长期') {
|
|
|
+ if (val % 2 === 0) {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 31; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 30; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (val === 2&&this.year!='长期') {
|
|
|
+ if (this.year % 4 === 0) {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 29; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 28; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ "year": { // 监听年份变化，处理2月份天数变化
|
|
|
+ handler(val) {
|
|
|
+ if(val=='长期'){
|
|
|
+ this.months=[''];
|
|
|
+ this.days = [''];
|
|
|
+ }else{
|
|
|
+ const months = [''];
|
|
|
+ for (let i = 1; i <= 12; i++) {
|
|
|
+ months.push(i);
|
|
|
+ }
|
|
|
+ this.months=months
|
|
|
+ if (val % 4 === 0) {
|
|
|
+ if (this.month === 2) {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 29; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.month === 2) {
|
|
|
+ this.days = [''];
|
|
|
+ for (let i = 1; i <= 28; i++) {
|
|
|
+ this.days.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .date-picker-mask {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99988;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-picker-container {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99999;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show-date-picker-mask {
|
|
|
+ transition-property: opacity;
|
|
|
+ transition-duration: 0.2s;
|
|
|
+ transition-timing-function: ease;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hide-date-picekr-mask {
|
|
|
+ transition-property: opacity;
|
|
|
+ transition-duration: 0.2s;
|
|
|
+ transition-timing-function: ease;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show-date-picker {
|
|
|
+ transition-property: transform, opacity;
|
|
|
+ transition-duration: 0.2s;
|
|
|
+ transition-timing-function: ease;
|
|
|
+ transform: translateY(0);
|
|
|
+ opacity: 1;
|
|
|
+ /* #ifndef APP-PLUS-NVUE */
|
|
|
+ -moz-transition-property: transform, opacity;
|
|
|
+ -webkit-transition-property: transform, opacity;
|
|
|
+ -o-transition-property: transform, opacity;
|
|
|
+
|
|
|
+ -moz-transition-duration: 0.2s;
|
|
|
+ -webkit-transition-duration: 0.2s;
|
|
|
+ -webkit-transition-duration: 0.2s;
|
|
|
+
|
|
|
+ -moz-transition-timing-function: ease;
|
|
|
+ -webkit-transition-timing-function: ease;
|
|
|
+ -o-transition-timing-function: ease;
|
|
|
+
|
|
|
+ -moz-transform: translateY(0);
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ -o-transform: translateY(0);
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+
|
|
|
+ .hide-date-picekr {
|
|
|
+ transition-property: transform, opacity;
|
|
|
+ transition-duration: 0.2s;
|
|
|
+ transition-timing-function: ease;
|
|
|
+ transform: translateY(500px);
|
|
|
+ opacity: 1;
|
|
|
+ /* #ifndef APP-PLUS-NVUE */
|
|
|
+ -moz-transition-property: transform, opacity;
|
|
|
+ -webkit-transition-property: transform, opacity;
|
|
|
+ -o-transition-property: transform, opacity;
|
|
|
+
|
|
|
+ -moz-transition-duration: 0.2s;
|
|
|
+ -webkit-transition-duration: 0.2s;
|
|
|
+ -webkit-transition-duration: 0.2s;
|
|
|
+
|
|
|
+ -moz-transition-timing-function: ease;
|
|
|
+ -webkit-transition-timing-function: ease;
|
|
|
+ -o-transition-timing-function: ease;
|
|
|
+
|
|
|
+ -moz-transform: translateY(500px);
|
|
|
+ -webkit-transform: translateY(500px);
|
|
|
+ -o-transform: translateY(500px);
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+
|
|
|
+ // 确定、取消
|
|
|
+ .date-picker-title {
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-shadow: 0 1rpx 1rpx #e4e4e4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-picker-confirm {
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #007AFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-picker-cancel {
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 内容
|
|
|
+ .date-picker-box {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 500rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ /* #ifndef APP-PLUS-NVUE */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* #endif */
|
|
|
+ background-color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-picker-item {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // flex
|
|
|
+ .row {
|
|
|
+ /* #ifndef APP-PLUS-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ /* #ifndef APP-PLUS-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .between-center {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+</style>
|
