[外门弟子]JS-1|2020年05月29日的日报-技能树.IT修真院

发表于： 2020-05-29 23:40:27

0 2062

今天完成的事情：

日历完成了

日历分上下两部分，分别是hearder和年月日列表页面，

年月日列表分成三个组件，点击headaer中间的按钮可以在年月日三个组件中切换，根据年月日的不同back和next两个按钮功能也分别变成控制月份+1或者-1，控制年份+1或者-1，控制年份+12或者-12，

日历主要有三个大功能，

1.在日历中选择日期之后，会把日期同步到text中显示出来，

2.改变text中的日期，且日期符合历法和项目规定的要求时同步的改变日历

3.在年月日页面，上下左右键分别可以改变具体日期，改变月份以及改变年份。

日历还有一些规定：

前者的日期必须小于后者的日期。

第一个功能的实现主要是利用日历的点击事件，选择好日期之后通过$emit发送日期给父组件然后父组件接收之后通过v-moder绑定到text上。

第二个功能的实现也离不开v-model，不过更重要的是正则表达式，通过这个正则表达式可以吧符合格式的日期筛选出来，然后通过v-bind传递给子组件，子组件监听数值变化然后更新日历

第三个功能主要是利用vue的修饰符，通过prevent禁用了text原有的上下左右事件然后绑定上我们需要的事件。

这个功能的实现做了很多日期的计算算是比较复杂的功能了。

<input id="startText" type="text" class="round-sm" @focus="startDatefocus" @click.stop v-model="startCalendarText" @keydown.right.left.down.up.prevent @keydown.up="keyUp" @keydown.right="keyRight" @keydown.down="keyDown" @keydown.left="keyLeft">

下面是keyup的时候要执行的命令

keyUp() {
if(this.startShow && this.startCalendarStatus.dateShow && this.startDateMessage.date) {
let y = this.startDateMessage.year
let m = this.startDateMessage.mouth
let d = this.startDateMessage.date
this.startDateMessage.date -= 7
if(this.startDateMessage.date < 1) {
this.startDateMessage.mouth--
if(this.startDateMessage.year%400 == 0 || (!(this.startDateMessage.year%100 == 0) && this.startDateMessage.year%4 == 0)) {
this.startDateMessage.date = this.mouthLeap[this.startDateMessage.mouth - 1] + this.startDateMessage.date
}else {
this.startDateMessage.date = this.mouthNormel[this.startDateMessage.mouth - 1] + this.startDateMessage.date
}
}
if(this.startDateMessage.mouth < 1) {
//如果月份年份同时变化，则需要把因为月份变化而变化的日期变成没有变化的日期，从新计算
this.startDateMessage.date = d
this.startDateMessage.year--
this.startDateMessage.mouth = 12
this.startDateMessage.date -= 7
if(this.startDateMessage.year%400 == 0 || (!(this.startDateMessage.year%100 == 0) && this.startDateMessage.year%4 == 0)) {
this.startDateMessage.date = this.mouthLeap[this.startDateMessage.mouth - 1] + this.startDateMessage.date
}else {
this.startDateMessage.date = this.mouthNormel[this.startDateMessage.mouth - 1] + this.startDateMessage.date
}
}
this.startDateMessage = {
year: this.startDateMessage.year,
mouth: this.startDateMessage.mouth,
date: this.startDateMessage.date
}
}else if(this.endShow && this.endCalendarStatus.dateShow && this.endDateMessage.date) {
let y = this.endDateMessage.year
let m = this.endDateMessage.mouth
let d = this.endDateMessage.date
this.endDateMessage.date -= 7
if(this.endDateMessage.date < 1) {
this.endDateMessage.mouth--
if(this.endDateMessage.year%400 == 0 || (!(this.endDateMessage.year%100 == 0) && this.endDateMessage.year%4 == 0)) {
this.endDateMessage.date = this.mouthLeap[this.endDateMessage.mouth - 1] + this.endDateMessage.date
}else {
this.endDateMessage.date = this.mouthNormel[this.endDateMessage.mouth - 1] + this.endDateMessage.date
}
}
if(this.endDateMessage.mouth < 1) {
//如果月份年份同时变化，则需要把因为月份变化而变化的日期变成没有变化的日期，从新计算
this.endDateMessage.date = d
this.endDateMessage.year--
this.endDateMessage.mouth = 12
this.endDateMessage.date -= 7
if(this.endDateMessage.year%400 == 0 || (!(this.endDateMessage.year%100 == 0) && this.endDateMessage.year%4 == 0)) {
this.endDateMessage.date = this.mouthLeap[this.endDateMessage.mouth - 1] + this.endDateMessage.date
}else {
this.endDateMessage.date = this.mouthNormel[this.endDateMessage.mouth - 1] + this.endDateMessage.date
}
}
if(this.startDate?(this.$store.getters.fullDateNum(this.endDateMessage.year , this.endDateMessage.mouth , this.endDateMessage.date) >= this.startDate):true) {
this.endDateMessage = {
year: this.endDateMessage.year,
mouth: this.endDateMessage.mouth,
date: this.endDateMessage.date
}
}else {
this.endDateMessage = {
year: y,
mouth: m,
date: d
}
}
}
if(this.startShow && this.startCalendarStatus.mouthShow && this.startDateMessage.date) {
let y = this.startDateMessage.year
let m = this.startDateMessage.mouth
let d = this.startDateMessage.date
this.startDateMessage.mouth -= 4
if(this.startDateMessage.mouth < 1) {
this.startDateMessage.year--
this.startDateMessage.mouth = 12 - (4 - m)
}
this.startDateMessage = {
year: this.startDateMessage.year,
mouth: this.startDateMessage.mouth,
date: this.startDateMessage.date
}
}else if(this.endShow && this.endCalendarStatus.mouthShow && this.endDateMessage.date) {
let y = this.endDateMessage.year
let m = this.endDateMessage.mouth
let d = this.endDateMessage.date
this.endDateMessage.mouth -= 4
if(this.endDateMessage.mouth < 1) {
this.endDateMessage.year--
this.endDateMessage.mouth = 12 - (4 - m)
}
if(this.startDate?(this.$store.getters.fullDateNum(this.endDateMessage.year , this.endDateMessage.mouth , this.endDateMessage.date) >= this.startDate):true) {
this.endDateMessage = {
year: this.endDateMessage.year,
mouth: this.endDateMessage.mouth,
date: this.endDateMessage.date
}
}else {
this.endDateMessage = {
year: y,
mouth: m,
date: d,
}
}
}
if(this.startShow && this.startCalendarStatus.yearShow && this.startDateMessage.date) {
let y = this.startDateMessage.year
let m = this.startDateMessage.mouth
let d = this.startDateMessage.date
this.startDateMessage.year -= 4
this.startDateMessage = {
year: this.startDateMessage.year,
mouth: this.startDateMessage.mouth,
date: this.startDateMessage.date
}
}else if(this.endShow && this.endCalendarStatus.yearShow && this.endDateMessage.date) {
let y = this.endDateMessage.year
let m = this.endDateMessage.mouth
let d = this.endDateMessage.date
this.endDateMessage.year -= 4
if(this.startDate?(this.$store.getters.fullDateNum(this.endDateMessage.year , this.endDateMessage.mouth , this.endDateMessage.date) >= this.startDate):true) {
this.endDateMessage = {
year: this.endDateMessage.year,
mouth: this.endDateMessage.mouth,
date: this.endDateMessage.date
}
}else {
this.endDateMessage = {
year: y,
mouth: m,
date: d,
}
}
}
},