vue 自定义日历组件

<button class="lf oprButton oprButton-bg ml5"

@click="pickPre(currentYear, currentMonth)">❮上月</button>

<span class="lf oprButton title-data">{{ nowFullYear }}/{{ nowMonth }}/{{ nowDay }}</span>

<button class="lf oprButton oprButton-bg"

@click="pickNext(currentYear,currentMonth)">下月❯</button>

<button class="lf oprButton oprButton-bg ml5"

@click="pickToday(currentYear,currentMonth)">今天</button>

</div>

</ul>

<div class="daysList-cont daysList-invalid"

v-if="dayobject.day.getMonth()+1 != currentMonth">

<p class="daysList-item"> {{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

<div class="daysList-cont daysList-normal"

:class="{active:inedx==number}"

v-else-if="dayobject.day.getFullYear() == currentYear && //当前年份

((dayobject.day.getMonth()+1 == currentMonth &&//本月且不是系统月份

dayobject.day.getMonth() != new Date().getMonth())&&

dayobject.day.getDate() == currentDay)||

(dayobject.day.getMonth() == new Date().getMonth() &&//当前系统时间

dayobject.day.getDate() ==new Date().getDate())"

@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">

<p class="daysList-item">{{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

<div class="daysList-cont daysList-normal" v-else

:class="{active:inedx==number}"

@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">

<p class="daysList-item">{{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

</li>

</ul>

</div>

</template>

export default {

name: "CalendarTraffic",

data(){

return{

number:0,//active样式索引

currentDay: 1,//当前日

currentMonth: 1,//当前月份

currentYear: 1970,//当前年份

currentWeek: 1,//前星期X

nowFullYear:1970,//中间显示当前年

nowMonth:1,//中间显示当前月

nowDay:1,//中间显示当前日

days: []

}

created() {

//在vue初始化时调用

this.initData(null);

methods: {

initData(cur) {

let date;

if (cur) {

date = new Date(cur);

} else {

const now = new Date();

const d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));

d.setDate(35);

date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

}

// 初始化年月日

this.currentDay = date.getDate();

this.currentYear = date.getFullYear();

this.currentMonth = date.getMonth() + 1;

this.nowDay = new Date().getDate();

this.nowFullYear = date.getFullYear();

this.nowMonth = date.getMonth() + 1;

this.currentWeek = date.getDay(); //获取当前星期X(0-6,0代表星期天)

if (this.currentWeek == 0) {

this.currentWeek = 7;

}

const str = this.formatDate(

this.currentYear,

this.currentMonth,

this.currentDay,

);

this.days.length = 0;

// 例今天是周五，放在第一行第5个位置，前面4个上个月的

//初始化本周

for (let i = this.currentWeek - 1; i >= 0; i--) {

const d = new Date(str);

d.setDate(d.getDate() - i);

const dayobject = {}; //用一个对象包装Date对象以便为以后预定功能添加属性

dayobject.day = d;

dayobject.parccent = '100%';

this.days.push(dayobject);//将日期放入data 中的days数组供页面渲染使用

}

//this.nowDay-1（今天几号索引）this.currentWeek-1（当月第一天周几索引）

//得到今天的索引值初始化active样式

this.number=this.nowDay+this.currentWeek-2;

//列表显示的天数6*7减去前星期X

for (let i = 1; i <= 42 - this.currentWeek; i++) {

const d = new Date(str);

d.setDate(d.getDate() + i);

const dayobject = {};

dayobject.day = d;

dayobject.parccent = '100%';

this.days.push(dayobject);

}

//console.log(this.days)

//上个月

pickPre(year, month) {

// setDate(0); 上月最后一天

// setDate(-1); 上月倒数第二天

// setDate(dx) 参数dx为上月最后一天的前后dx天

const d = new Date(this.formatDate(year, month, 1));

d.setDate(0);

this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

this.nowDay=1;

this.number=this.currentWeek-1;//active样式

//下个月

pickNext(year, month) {

const d = new Date(this.formatDate(year, month, 1));

d.setDate(35);

this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

this.nowDay=1;

// console.log(this.currentWeek)

this.number=this.currentWeek-1;//active样式

// console.log(this.number)

//console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))

//今天

pickToday(year, month) {

const d = new Date();

this.initData(this.formatDate(d.getFullYear(), d.getMonth()+1, 1));

//this.number=this.currentWeek-1;//active样式

//console.log(this.formatDate(d.getFullYear(), d.getMonth()+1, d.getDate()))

pickYear(year, month) {

//alert(year + "," + month);

//当前日历时间点击

pickDays(year, month,clickCurrentDay,index){

const d = new Date();

const day=clickCurrentDay;

//active样式的更改

this.number=index;

// 年月日更改

this.nowFullYear= year;

this.nowMonth= month;

this.nowDay= clickCurrentDay;

// console.log(year,month,clickCurrentDay);

// 格式化日期

formatDate(year, month, day) {

let y = year;

let m = month;

if (m < 10) m = "0" + m;

let d = day;

if (d < 10) d = "0" + d;

return y + "/" + m + "/" + d;

}

};

</script>

@import '../../../common/css/common.scss';

//定义基本长度

$line10:10px;

$lf:left;

$rt:right;

$color-fff:#ffffff;

//按钮背景颜色

$button-bg:#314D68;

//正文颜色

$text-color:#B8C9DA;

//hover蓝色

$table-deepBlue:#0c8ceb;

$table-blue:#289cf4;

//失效颜色

$invalid-color:#2F3F53;

$item-color:#B8C9DA;

$item-invalid-color:#77899c;

//字体居中

$text-center:center;

button {

outline: none;

border: none;

}

ul li{

list-style: none;

}

.lf{

float: $lf;

}

.rt{

float: $rt;

}

.topWrap{

height: $line10*33.5;

}

//清楚浮动

.clearfix {

zoom: 1;

}

.clearfix:after {

content: '';

display: block;

height: 0;

font-size: 0;

clear: both;

overflow: hidden;

}

//日历表头按钮

.calendarTraffic{

width: 100%;

height: 100%;

}

//日历表头

.monthHeader{

height:$line10*3.6;

padding-top: $line10*0.6;

//按钮样式

.oprButton{

height: $line10*2.5;

padding: 0 $line10;

border-radius:$line10/2;

color: $color-fff;

line-height: $line10*2.5;

cursor: pointer;

}

.oprButton-bg{

background-color: $button-bg

}

.title-data{

text-align: $text-center;

width: $line10*10;

}

.ml5{

margin-left: $line10/2;

}

.mr10{

margin-right: $line10;

}

//日历

.calendar-list{

color:$text-color;

//日历星期头

.calendar-weekadys{

width: 100%;

}

.calendar-weekadys .weekadys-item{

height: $line10*2.4;

line-height: $line10*2.4;

}

.calendar-weekadys .weekadys-item,

.calendar-days .daysList{

width: 14%;

float: $lf;

text-align: $text-center;

color:$text-color;

margin-right: $line10*0.1;

}

.calendar-days .daysList{

cursor: pointer;

height: $line10*4.5;

color: $item-color;

.daysList-cont{

width: 100%;

float: $lf;

}

.calendar-days .daysList-normal .daysList-item:nth-child(2n){

color: $item-invalid-color;

}

.calendar-days .daysList-normal .daysList-item:nth-child(2n+1){

color: $item-color;

}

.calendar-days .daysList-mid{

height: $line10*3.4;

margin: $line10*0.4;

}

.calendar-days .daysList-cont.daysList-normal:hover,

.daysList-normal.active{

border-radius:$line10/2;

background-color: $table-deepBlue;

}

.calendar-days .daysList-cont.daysList-normal:hover .daysList-mid,

.daysList-normal.active .daysList-mid{

background-color: $table-blue;

}

.calendar-days .daysList-cont.daysList-normal:hover p,

.daysList-normal.active p{

color: $color-fff !important;

}

.daysList-item{

height: $line10*1.6;

}

// 上个月或者下个月

.daysList-invalid{

background-color: $invalid-color;

border-radius:$line10/2;

}

.daysList-invalid .daysList-item{

color:$item-invalid-color;

}

</style>

转载于:https://www.cnblogs.com/chongtao/p/9908925.html

vue 自定义日历组件相关推荐

VUE自定义日历组件，计算年月日，上个月份的空白展示，点击某一天进入详情页面
效果图: 背景描述: 产品提出需求,需要日历来配置每一天的商品价格.刚开始使用的element-ui的el-calendar组件,由于样式.跳转.点击事件等功能都不好控制,所以自己写了一个日历组件.完 ...
vue自定义日历组件
代码地址 https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar 享一下组件目录 tip: 组件功能: 展 ...
vue自定义日历组件（12日历平铺） pc/移动
文章目录前言前言思路: 获取每个月天数,把每个月天数给数组中的day 再day天数给list的name 获取12个月的年月日把获取的年月日和选中的年月日对比如果相等让list中的type变为 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
一个vue的日历组件
说明: 1.基于element-ui开发的vue日历组件. 地址更新: 1.增加value-format指定返回值的格式 2.增加头部插槽自定义头部 <ele-calendar >< ...
vue自定义全局组件(或自定义插件)
最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use ...
vue 自定义popup组件并支持scroll组件
本来是使用第三方库 vant的vue 组件库的popup,后来在popup中使用better-scroll插件的时候,出现并不兼容的情况,也就自己搭建一个popu插件,中间遇到很多问题,都会记录一下 ...

vue 自定义日历组件

vue 自定义日历组件相关推荐

最新文章

热门文章