vue-week-picker实现支持按周切换的日历


Posted in Javascript onJune 26, 2019

本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下

vue-week-picker

安装

npm install vue-week-picker --save-dev

DEMO

  • 原生:线上DEMO
  • 与element-ui结合使用:线上DEMO

功能

  • 自适应式按周切换
  • 与DatePicker日期选择器使用

结合Element-ui使用

效果

vue-week-picker实现支持按周切换的日历

与vue-element结合组件,请转到链接

vue-week-picker实现支持按周切换的日历

使用

<VueWeekPicker @dateValue="dateValue" />

Or

<vue-week-picker @dateValue="dateValue" />

import VueWeekPicker from 'vue-week-picker';

export default {
 components: {
 VueWeekPicker
 }
}

Or

export default {
 components: {
 'vue-week-picker': VueWeekPicker
 }
}

代码

<template>
 <div class="date">
 <el-row>
 <el-col :span="24">
 <div class="weeks">
  <!-- 日期 -->
  <ul class="days">
  <li @click="weekPre" class="prev-btn">
  <i class="fa fa-angle-left fa-icon" aria-hidden="true"></i>
  <span class="hidden-sm-and-down" style="margin-left: 5px;">上一周</span>
  </li>
  <li
  @click="pick(day, index)"
  v-for="(day, index) in days"
  :key="index"
  :class="{selected:index == tabIndex}"
  >
  <!--本月-->
  <span v-if="day.getMonth()+1 != currentMonth" class="other-month item-wrapper">
  <p>{{day | getWeekFormat}}</p>
  <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
  </span>
  <span v-else>
  <!--今天-->
  <span
   v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
   class="today-item"
  >今天</span>
  <span class="item-wrapper" v-else>
   <p>{{day | getWeekFormat}}</p>
   <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
  </span>
  </span>
  </li>
  <li @click="weekNext" class="next-btn">
  <span class="hidden-sm-and-down" style="margin-right: 5px;">下一周</span>
  <i class="fa fa-angle-right fa-icon" aria-hidden="true"></i>
  </li>
  <li>
  <span>
  <el-date-picker
   class="right-pick-btn"
   style="width: 100%"
   @change="pickDate"
   v-model="value1"
   type="date"
   placeholder="按日期查询"
  ></el-date-picker>
  </span>
  </li>
  </ul>
 </div>
 </el-col>
 </el-row>
 <el-row>
 <el-col :span="20" :offset="2" class="time-range">
 <span
  @click="pickTime(time, index)"
  v-for="(time, index) in times"
  :key="index"
  :class="{active:index == tabTimeIndex}"
 >{{time}}</span>
 </el-col>
 </el-row>
 </div>
</template>
<script>
/* eslint-disable */
import moment from "moment";
export default {
 props: {
 dateValue: {
 type: String,
 default: moment(new Date()).format("YYYY-MM-DD")
 },
 timeValue: {
 type: String,
 default: "00:00"
 }
 },
 data() {
 return {
 currentYear: 1970, // 年份
 currentMonth: 1, // 月份
 currentDay: 1, // 日期
 currentWeek: 1, // 星期
 days: [],
 value1: "",
 tabIndex: null,
 tabTimeIndex: 0,
 times: [
 "00:00~06:00",
 "06:00~12:00",
 "12:00~18:00",
 "18:00~24:00",
 "今日节目"
 ]
 };
 },
 filters: {
 dateFormat(date) {
 return moment(date).format("YYYY-MM-DD");
 },
 getWeekFormat(date) {
 const weeksObj = {
 1: "周一",
 2: "周二",
 3: "周三",
 4: "周四",
 5: "周五",
 6: "周六",
 7: "周日"
 };
 let weekNumber = moment(date).isoWeekday();
 return weeksObj[weekNumber];
 }
 },

 mounted() {
 const index = _.findIndex(this.days, function(o) {
 // console.log('o: ', o.getDate());
 // console.log('new Date().getDate(): ', new Date().getDate());
 return o.getDate() === new Date().getDate();
 });
 console.log("index: ", index);
 this.tabIndex = index;
 },

 created() {
 this.initData(null);
 },

 methods: {
 formatDate(year, month, day) {
 const y = year;
 let m = month;
 if (m < 10) m = `0${m}`;
 let d = day;
 if (d < 10) d = `0${d}`;
 return `${y}-${m}-${d}`;
 },
 pickDate(date) {
 let newDate = moment(date).format("YYYY-MM-DD");
 this.$emit("dateValue", newDate);
 },
 initData(cur) {
 let date = "";
 if (cur) {
 date = new Date(cur);
 } else {
 date = new Date();
 }
 this.currentDay = date.getDate(); // 今日日期 几号
 this.currentYear = date.getFullYear(); // 当前年份
 this.currentMonth = date.getMonth() + 1; // 当前月份
 this.currentWeek = date.getDay(); // 1...6,0 // 星期几
 if (this.currentWeek === 0) {
 this.currentWeek = 7;
 }
 const str = this.formatDate(
 this.currentYear,
 this.currentMonth,
 this.currentDay
 ); // 今日日期 年-月-日
 this.days.length = 0;
 // 今天是周日,放在第一行第7个位置,前面6个 这里默认显示一周,如果需要显示一个月,则第二个循环为 i<= 35- this.currentWeek
 /* eslint-disabled */
 for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
 const d = new Date(str);
 d.setDate(d.getDate() - i);
 // console.log(y:" + d.getDate())
 this.days.push(d);
 }
 for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
 const d = new Date(str);
 d.setDate(d.getDate() + i);
 this.days.push(d);
 }
 },

 // 上个星期
 weekPre() {
 const d = this.days[0]; // 如果当期日期是7号或者小于7号
 d.setDate(d.getDate() - 7);
 this.initData(d);
 },

 // 下个星期
 weekNext() {
 const d = this.days[6]; // 如果当期日期是7号或者小于7号
 d.setDate(d.getDate() + 7);
 this.initData(d);
 },

 // 上一??月 传入当前年份和月份
 pickPre(year, month) {
 const d = new Date(this.formatDate(year, month, 1));
 d.setDate(0);
 this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
 },

 // 下一??月 传入当前年份和月份
 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));
 },

 // 当前选择日期
 pick(date, index) {
 let newDate = moment(date).format("YYYY-MM-DD");
 this.$emit("dateValue", newDate);
 // console.log("index: ", index);
 this.tabIndex = index;
 // alert(
 // this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
 // );
 },
 pickTime(time, index) {
 // console.log('time: ', time);
 let timeArr = [];
 timeArr.push(_.head(_.split(time, "~")));
 console.log("timeArr: ", timeArr);
 this.$emit("timeValue", _.join(timeArr), "");
 // console.log("index: ", index);
 this.tabTimeIndex = index;
 // alert(
 // this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
 // );
 }
 }
};
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 #Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 #Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 #Javascript
ES6 Generator函数的应用实例分析
Jun 26 #Javascript
vue实现简单的日历效果
Sep 24 #Javascript
You might like
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JS画线(实例代码)
2013/11/20 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python树莓派红外反射传感器
2019/01/21 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
物业管理应届生求职信
2013/10/28 职场文书
商务会议邀请函
2014/01/09 职场文书
解除同居协议书
2015/01/29 职场文书
大学团日活动总结书
2015/05/11 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python