index.vue
2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<style>
.datepicker{
padding: 10px;
}
.datepicker.vue-show{
display:block;
}
.datepicker>div.vue-show-imo{
display:block;
}
.datepicker input[type='number']{
text-align: center;
}
.calendar-button{
float:right;
margin: 5px 5px 0;
}
.calendar-time{
text-align:center;
margin: 5px 0;
}
</style>
<template>
<input type="text" class="form-control" @click="showCalendar" :value="date">
<div class="datepicker datepicker-dropdown dropdown-menu vue-show" :style="{'left':x+'px','top':y+'px'}" v-show="isshow">
<date-days :date-time.sync="dateTime" :mo.sync="mo" :state="state" v-show="mo==='day'"></date-days>
<date-months :date-time.sync="dateTime" :mo.sync="mo" v-show="mo==='month'"></date-months>
</div>
</template>
<script>
import dateDays from "./dateDays.vue"
import dateMonths from "./dateMonths.vue"
export default {
props:{
value:{
type:String
},
state:{
type:String,
default:''
},
format:{
type:String,
default:"yyyy-MM-dd"
}
},
components:{
dateDays,
dateMonths
},
data() {
return {
// dateText: this.value?new Date(this.value):new Date(),
dateTime:{
year:'',
month:'',
date:'',
hour:'',
minute:'',
second:''
},
x: 0,
y: 0,
mo:'day',
show:false
}
},
computed:{
date(){
if(this.dateTime.year){
this.value=this.showDate(this.dateTime,this.format);
}
return this.showDate(this.dateTime,this.format);
},
isshow(){
return this.mo?true:false;
}
},
methods:{
showCalendar(e){
var that=this;
this.x=e.target.offsetLeft;
this.y=e.target.offsetTop+e.target.offsetHeight+0;
if(this.format.indexOf("dd")>-1){
this.mo="day";
}else{
this.mo="month";
}
},
showDate(dateTime,format) {
var o = {
"M+": dateTime.month + 1, //month
"d+": dateTime.date, //day
"h+": dateTime.hour, //hour
"m+": dateTime.minute, //minute
"s+": dateTime.second
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(dateTime.year + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}
},
ready(){
this.mo="";
let dateTime=this.value?new Date(this.value):new Date();
this.dateTime={
year:dateTime.getFullYear(),
month:dateTime.getMonth(),
date:dateTime.getDate(),
hour:dateTime.getHours(),
minute:dateTime.getMinutes(),
second:dateTime.getSeconds()
}
this.value=this.showDate(this.dateTime,this.format);
}
}
</script>