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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
微信小程序的tab选项卡的实现效果
May 15 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php 注释规范
2012/03/29 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
js实现动态时钟
2020/03/12 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python数组过滤实现方法
2015/07/27 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python实现日常记账本小程序
2018/03/10 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python绘制热力图示例
2019/09/27 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python字典与json转换的方法总结
2020/12/28 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
银行行长竞聘演讲稿
2014/04/23 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
烟台的海导游词
2015/02/02 职场文书
高考学习决心书
2015/02/04 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android