<template>
<view class="">
<view class="pickerDate-text" @tap="onShowPickerDate">
<text class="picker picker-select" v-if="selectDate !== ''">{{selectDate}}</text>
<text class="placeholder" v-else>{{placeholder}}</text>
</view>
<view class="pickerDate-mask" :hidden="!isShow"></view>
<view class="pickerDate-box" v-if="isShow" :class="isShow?'pickerDate-show':''">
<view class="picker-header">
<view class="picker-btn" :data-index="index" v-for="(item,index) in pickerBtn" :key="index"
@tap="onConfirmSelected">{{item}}</view>
</view>
<picker-view class="pickerDate_picker-view" :indicator-class="'pickerDate-indicator'" :value="value"
@change="onChange">
<picker-view-column v-if="fields === 'year' || fields === 'month' || fields === 'day'">
<view v-for="(item,index) in years" :key="index">{{item === '至今' ? item : item + '年'}}</view>
</picker-view-column>
<template v-if="fields == 'month' || fields == 'day'">
<picker-view-column v-if="year != '至今' ">
<view v-for="(item,index) in months" :key="index"> {{item + '月'}}</view>
</picker-view-column>
</template>
<picker-view-column v-if="fields === 'day'" :hidden="year == '至今'">
<view v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
/**
* author cxq
* time 2021-7-6 08:51:00
* description
*/
import {
nowYear,
nowMonth,
nowDay,
setDate
} from "utils/date.js"
export default {
name: '',
props: {
fields: {
type: String,
default: 'month'
},
placeholder: {
type: String,
default: '请选择(必填)'
},
selectDate: {
type: String,
default: ''
},
quick: {
type: Boolean,
default: false
}
},
data() {
return {
onShowPickerDateNum:0,
selectDateNum:0,
isShow: false,
pickerBtn: ['取消', '确定'],
years: [],
months: [],
days: [],
year: '',
month: '',
day: '',
value: [], //选中值的下标
}
},
mounted() {
// this.year = nowYear
// this.month = nowMonth
// this.day=nowDay
console.log("this.year", this.year, this.month, this.day)
},
watch: {
'placeholder': {
immediate: true,
handler: function(val) {
if (!this.selectDate) {
this.year = '至今'
}
console.log("placeholder", val)
}
},
'selectDate': {
immediate: true,
handler: function(val) {
this.selectDateNum++
let arr2
console.log("selectDate",this.selectDate,this.selectDateNum, val)
if (val != '') {
if (this.selectDate == '至今') {
this.year = '至今'
return
}
if(this.selectDateNum==2 && this.selectDate){
if (this.selectDate != '至今') {
arr2 = val.replace('.','-').split('-')
}
}else{
arr2 = val.split('-')
}
if (arr2.length === 1) {
this.year = Number(arr2[0])
} else if (arr2.length === 2) {
this.year = Number(arr2[0])
this.month = Number(arr2[1])
} else if (arr2.length === 3) {
this.year = Number(arr2[0])
this.month = Number(arr2[1])
this.day = Number(arr2[2])
}
console.log("selectDate=", arr2)
}
}
}
},
methods: {
// 打开选框
onShowPickerDate() {
this.onShowPickerDateNum++
if(this.onShowPickerDateNum==1){
console.log('onShowPickerDate00', this.year, this.month,this.value)
setDate(this.quick, this.year, this.month, this.day, this)
}
if(this.selectDateNum==2 && this.selectDate){
setDate(this.quick, this.year, this.month, this.day, this)
}
this.isShow = true
},
// 关闭选框
onConfirmSelected(e) {
let index = e.currentTarget.dataset.index;
if (index && index == 1) {
// 确定选择 更换改变后的日期
if (this.val) {
console.log('this.val=', this.val, this.value)
setDate(this.quick, this.years[this.val[0]], this.months[this.val[1]], this.days[this.val[2]],this)
} else {
setDate(this.quick, this.years[this.value[0]], this.months[this.value[1]], this.days[this.value[2]], this)
}
let str = ''
let newDate = {}
if (this.year === '至今') {
str = this.year
newDate.date = str
newDate.year = this.year
} else if (this.fields === 'year') {
str = this.year
newDate.date = str
newDate.year = this.year
} else if (this.fields === 'month') {
str = this.year + '-' + this.month
newDate.date = str
newDate.year = this.year
newDate.month = this.month
} else {
str = this.year + '-' + this.month + '-' + this.day
newDate.date = str
newDate.year = this.year
newDate.month = this.month
newDate.day = this.day
}
this.$emit('changeDate', newDate)
} else {
// 取消选择 还原改变前的日期
setDate(this.quick, this.years[this.value[0]], this.months[this.value[1]], this.days[this.value[2]], this)
}
this.isShow = false
},
onChange(e) {
let val = e.detail.value
this.val = e.detail.value; //记录改变后的日期
console.log('onChange', val)
setDate(this.quick, this.years[val[0]], this.months[val[1]], this.days[val[2]], this)
},
},
}
</script>
<style>
.pickerDate-box {
}
.pickerDate {
font-size: 32rpx;
color: #16233D;
}
.pickerDate .placeholder {
font-size: 32rpx;
color: #C5C8CE;
}
/* 自定义遮罩层*/
.pickerDate-mask {
width: 100%;
height: 100%;
z-index: 998;
background-color: rgba(0, 0, 0, 0.5);
/* background-color: rgba(0, 0, 0, 0.5); */
position: fixed;
bottom: 0;
left: 0;
}
/* 自定义按钮 */
.picker-header {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background-color: rgba(0, 0, 0, 0.01);
z-index: 1000;
}
.picker-btn {
padding: 0 30rpx;
line-height: 80rpx;
color: #999;
font-size: 32rpx;
}
.picker-btn:last-child {
color: #FF4C00;
}
/* 自定义动画 */
.pickerDate-box {
width: 100%;
padding-top: 80rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
transform: translateY(100%);
transition: 0.5s;
}
.pickerDate-show {
transform: translateY(0);
}
.pickerDate_picker-view {
width: 100%;
height: 450rpx;
text-align: center;
}
.pickerDate-indicator {
height: 80rpx;
}
.pickerDate_picker-view picker-view-column view {
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 32rpx;
color: #525B6E;
}
</style>
const date = new Date()
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
const nowYear = date.getFullYear()
const nowMonth = formatNumber(date.getMonth() + 1)
const nowDay = formatNumber(date.getDate())
// 每月的天数
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// 根据年月 获取当月的总天数
function getDays(year, month) {
if (month == 2) {
return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
return daysInMonth[month - 1]
}
}
// 根据年月日设置当前月有多少天 并更新年月日数组
function setDate(quick, year, month, day, that) {
let daysNum = getDays(year, month)
month = month ? month : 1
day = day ? day : 1
let monthsNum = 12
let years = quick ? ['至今'] : []
let months = []
let days = []
let yearIdx = 0
let monthIdx = 0
let dayIdx = 0
// 重新设置年份列表
if (quick){
for (let i = nowYear; i >= 1900; i--) {
years.push(i)
}
} else {
for (let i = nowYear + 10; i >= 1900; i--) {
years.push(i)
}
}
years.map((v, idx) => {
if (v === year) {
yearIdx = idx
}
})
// 重新设置月份列表
for (let i = 1; i <= monthsNum; i++) {
months.push(formatNumber(i))
}
months.map((v, idx) => {
if (v === month) {
monthIdx = idx
}
})
// 重新设置日期列表
for (let i = 1; i <= daysNum; i++) {
days.push(formatNumber(i))
}
days.map((v, idx) => {
if (v === day) {
dayIdx = idx
}
})
that.years=years//年份列表
that.months=months//月份列表
that.days=months//日期列表
that.year=year
that.month=formatNumber(month)
that.day=formatNumber(day)
// 年月日数组有数据后，重新再设置一下vualue才能跳转到对应位置
that.value= [yearIdx, monthIdx, dayIdx]
}
export {
nowYear,
nowMonth,
nowDay,setDate
}
<pickerDate :fields="'month'"
:selectDate="experciseObj.end"
quick @changeDate="onChangeDate"></pickerDate>
网友评论