<template>
<div>
<Row type="flex" justify="space-between" class="operation-bar">
<Col><p @click="previousEvent">上一月</p></Col>
<Col><p>{{dateStr}}</p></Col>
<Col><p @click="nextEvent">下一月</p></Col>
</Row>
<!--星期-->
<Row type="flex">
<Col class="text-center td-border date-header">日</Col>
<Col class="text-center td-border date-header">一</Col>
<Col class="text-center td-border date-header">二</Col>
<Col class="text-center td-border date-header">三</Col>
<Col class="text-center td-border date-header">四</Col>
<Col class="text-center td-border date-header">五</Col>
<Col class="text-center td-border date-header">六</Col>
</Row>
<!--日期-->
<Row type="flex">
<Col v-for="(item, index) in allDays" class="text-center td-border">
<p :class="item.noToMonth ? 'no-to-month' : 'is-to-month'">{{item.dayVal}}{{item.isToMonth}}</p>
</Col>
</Row>
</div>
</template>
<script>
export default {
name: 'sh-date-picker',
data () {
return {
dateStr: '',
allDays: [],
dayWeek: 0 ,
monthdays: 0
};
},
Methods: {
getPreMonth (DATE) {
the let ARR = date.split ( '/' );
the let year = ARR [0]; // Get current date year
let month = arr [1]; // get the current date of the month
the let day ARR = [2]; // get the current date is the date
the let days = new new a date (year, month the, 0 );
days = days.getDate (); // Get the current number of days in the month date
let year2 = year;
the let MONTH2 = the parseInt (month The) -. 1 ;
IF (MONTH2 === 0 ) {
YEAR2 = the parseInt (YEAR2) -. 1 ;
MONTH2 = 12 is ;
}
IF (MONTH2 <10 ) {
MONTH2 = '0' + MONTH2;
}
the let T2 = YEAR2 + '-' + MONTH2;
return T2;
},
getNextMonth (DATE) {
ARR the let = date.split ( '/' );
the let year = arr[0]; // year acquired current date
the let month The ARR = [. 1]; // get the current date of the month
the let Day ARR = [2]; // get the current date May
the let days = new new a date (year, month the, 0 );
days ; = days.getDate () // number of days to obtain the current date in the month of
the let YEAR2 = year;
the let, MONTH2 = parseInt (month the) + 1 ;
IF (, MONTH2 13 is === ) {
YEAR2 = the parseInt (YEAR2) +. 1 ;
MONTH2 =. 1 ;
}
IF (month2 < 10) {
month2 = '0' + month2;
}
let t2 = year2 + '-' + month2;
return t2;
},
// 上一月
previousEvent () {
this.dateStr = this.getPreMonth(this.dateStr);
this.calDate();
},
// 下一月
nextEvent () {
this.dateStr = the this .getNextMonth ( the this .dateStr);
the this .calDate ();
},
calDate () {
the this .allDays = [];
// Get the current year, month, day
the let d = the this .dateStr? new new a Date ( the this .dateStr ): new new a Date ();
the let year = d.getFullYear ();
the let month The = d.getMonth () +. 1 ;
the this .dateStr `$ = {} year / month The {$`};
// get the current first month day of the week
the this .dayWeek = new new DATE (year, month The -. 1,. 1 ) .getDay ();
// fill the gap in front of the first of every month
the let firstNum =. 7 - the this .dayWeek;
for (the let I = 0; I <. 7 - firstNum; I ++ ) {
the this .allDays.unshift ({
dayVal: the this .getDay ($ ` year} {-} $ {month The -1`, - I) .dayVal,
dateVal: the this .getDay ( `$ year} {-} $ {month The -1`, - I) .dateVal,
noToMonth: to true
});
}
// Get the number of days of the current month of
the this .monthDays = new new a Date (year, month the, 0 ) .getDate ();
// Actual
IF ( the this .monthDays) {
for (the let J = 0; J < the this .monthDays; J ++ ) {
the this .allDays.push ({
timeVal: `$ {} year / month The {$} / {$ J 1 + } `,
dayVal: J + 1
});
}
};
// get monthly on the last day of the week
the this .lastDayWeek = new new a Date (year, month The - 1, the this .monthDays) .getDay ();
// fill the last day of each month of the blank
=. 7 lastNum the let - the this .lastDayWeek -. 1 ;
for (the let. 1 = K; K <= lastNum; K ++ ) {
the this .allDays.push ({
dayVal: the this .getDay ( `$ {year} - month The $ {} - {$ the this .monthDays} `, K) .dayVal,
dateVal: the this .getDay (` $ {year} - {month The $} - $ { the this .monthDays} `, K) .dateVal,
noToMonth: to true
});
}
},
// N days before and after the acquisition date (day: forward pass negative, positive back pass)
getDay (dATE, day) {
the let Today = new new a Date (DATE);
the let targetday_milliseconds = today.getTime () + 1000 * 60 * 60 * 24 * Day;
Today. the setTime (targetday_milliseconds);
the let tYear = today.getFullYear ();
the let tMonth = today.getMonth ();
the let tdate = today.getDate ();
return {
dateVal: tYear + '-' + tMonth + '-' + tdate,
dayVal: tdate
};
}
},
mounted () {
this.calDate();
}
};
</script>
<style lang="less">
@font_color: #fff;
@font_size: 18px;
.td-border {
width: 14.28571428571429%;
/*width: 40px;*/
border: solid 1px gray;
border-right: none;
line-height: 36px;
background: orange;
color: @font_color;
font-size: 16px;
}
.td-border:last-child {
border-right: solid 1px gray;
}
.date-header {
font-size: 28px;
font-weight: bold;
line-height: 42px;
background: deepskyblue;
}
.operation-bar {
width: 100%;
background: deeppink;
color: @font_color;
font-size: @font_size;
font-weight: bold;
}
.no-to-month {
color: gray;
}
.is-to-month {
color: @font_color;
}
</style>