vue使用mintui封装日期组件
页面图片 ：
父组件：
<template>
<div class="pickerDemo">
<h6>第一个的时间：</h6>
<div class="boxDate">
<div class="leftDate">当前时间：</div>
<div class="rightDate">
<DateModel
@returnDate="returnDate1"
:date="date1"
:maxDate="maxDate1"
/>
</div>
</div>
<h6>第二个的时间：</h6>
<div class="boxDate">
<div class="leftDate">当前时间2：</div>
<div class="rightDate">
<DateModel
@returnDate="returnDate2"
:date="date2"
:minDate="minDate2"
/>
</div>
</div>
</div>
</template>
<script>
import DateModel from './DateModel'
export default {
name: 'date',
data () {
return {
date1:'',
maxDate1:'',//第一个组件设置最大日期
date2:'',
minDate2:"",//第二个 组件设置最小日期
}
},
components: {
DateModel
},
created () {
},
mounted () {
let newDate=new Date();
this.maxDate1=this.dateYMD()
this.date2=this.dateYMD(0,0,28)//默认第二个显示大于第一个一天
this.minDate2=this.dateYMD()
},
methods: {
dateYMD(a,b,c){
let yy=parseInt(a) || 0,mm=parseInt(b) || 0,dd=parseInt(c) || 0,date=new Date(),y="",m="",d="";
y=date.getFullYear()+yy+'';
m=date.getMonth()+1+mm+'';
let monthDate=this.mGetDate(y,m);
if(dd<0){
if(date.getDate()<=-dd){
m=m-1+'';
let mDate=this.mGetDate(y,m);
d=date.getDate()+mDate+dd+''
}else{
d=date.getDate()+dd+'';
}
}else{
if(date.getDate()+dd>=monthDate){
m=parseInt(m)+1+'';
let mDate=this.mGetDate(y,m);
d=date.getDate()-mDate+parseInt(dd)+''
}else{
d=date.getDate()+dd+'';
}
}
m=m.length==1?('0'+m):m,
d=d.length==1?('0'+d):d;
return y+'-'+m+'-'+d;
},
mGetDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var d = new Date(year, month, 0);
return d.getDate();
},
returnDate1(v){
//第一个日期的回调函数 需要给第二个设置最小值
this.minDate2=v;
this.date1=v;
},
returnDate2(v){
//第二个日期选择框的回调函数
this.maxDate1=v;
this.date2=v;
}
}
}
</script>
<style scoped>
.boxDate{
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid #FF776D;
box-sizing: border-box;
}
.leftDate{
width: 30%;
float: left;
}
.rightDate{
width: 70%;
float: left;
}
</style>
子组件：
<template>
<div class="pickerDemo">
<div class="showTime" @click="selectData">
{{this.selectedValue}}
</div>
<!-- @touchmove.prevent 阻止默认事件，此方法可以在选择时间时阻止页面也跟着滚动。 -->
<div class="pickerPop" @touchmove.prevent>
<!-- 年月日时分选择 -->
<mt-datetime-picker
lockScroll="true"
ref="datePicker"
v-model="dateVal"
class="myPicker"
type="date"
year-format="{value}"
month-format="{value}"
date-format="{value}"
@confirm="dateConfirm()"
:startDate="minStartDate"
:endDate="maxEndDate"
>
</mt-datetime-picker>
</div>
</div>
</template>
<script>
export default {
name: 'date',
data () {
return {
dateVal: '', // 默认是当前日期
selectedValue: "",
minStartDate:new Date(),
maxEndDate:new Date()
}
},
components: {
},
props:["date","minDate","maxDate"],
watch:{
date(newval,oldval){
this.selectedValue=newval;
},
minDate(newval,oldval){
if(this.minDate){
this.minStartDate=new Date(this.minDate.trim().substr(0,10))
}else{
this.minStartDate=new Date(newDate.getFullYear()-20+'-01-01');
}
},
maxDate(newval,oldval){
if(this.maxDate){
this.maxEndDate=new Date(this.maxDate.trim().substr(0,10))
}else{
this.maxEndDate=new Date(newDate.getFullYear()+20+'-12-30');
}
},
},
created () {
},
mounted () {
this.start();
},
methods: {
start(){
let newDate=new Date();
if(this.minDate){
this.minStartDate=new Date(this.minDate.trim().substr(0,10))
}else{
this.minStartDate=new Date(newDate.getFullYear()-20+'-01-01');
}
if(this.maxDate){
this.maxEndDate=new Date(this.maxDate.trim().substr(0,10))
}else{
this.maxEndDate=new Date(newDate.getFullYear()+20+'-12-30');
}
if(this.date){
let newStart=this.date.substr(0,10);
this.selectedValue=newStart;
}else{
this.selectedValue=this.dateYMD()
}
},
dateYMD(a,b,c){
let yy=parseInt(a) || 0,mm=parseInt(b) || 0,dd=parseInt(c) || 0,date=new Date(),y="",m="",d="";
y=date.getFullYear()+yy+'';
m=date.getMonth()+1+mm+'';
let monthDate=this.mGetDate(y,m);
if(dd<0){
if(date.getDate()<=-dd){
m=m-1+'';
let mDate=this.mGetDate(y,m);
d=date.getDate()+mDate+dd+''
}else{
d=date.getDate()+dd+'';
}
}else{
if(date.getDate()+dd>=monthDate){
m=parseInt(m)+1+'';
let mDate=this.mGetDate(y,m);
d=date.getDate()-mDate+parseInt(dd)+''
}else{
d=date.getDate()+dd+'';
}
}
m=m.length==1?('0'+m):m,
d=d.length==1?('0'+d):d;
return y+'-'+m+'-'+d;
},
mGetDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var d = new Date(year, month, 0);
return d.getDate();
},
selectData () { // 打开时间选择器
this.start()
// 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
if (this.selectedValue) {
this.dateVal = this.selectedValue
} else {
this.dateVal = new Date()
}
this.$refs['datePicker'].open()
},
dateConfirm (v) { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
let y=this.dateVal.getFullYear()+"",
m=this.dateVal.getMonth()+1+"",
d=this.dateVal.getDate()+"";
m=m.length<2?'0'+m:m;
d=d.length<2?'0'+d:d;
this.selectedValue=y+'-'+m+'-'+d;
this.$emit('returnDate',this.selectedValue)
}
}
}
</script>
<style scoped>
</style>
