Vue.js创建Calendar日历效果

程序员文章站 2023-11-21 14:55:40

使用 vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 android 里面的 databinding。实现一个html的日历效果。...

使用 vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 android 里面的 databinding。
实现一个html的日历效果。

html 部分

<div id="calendar">
 <!-- 年份 月份 -->
 <div class="month">
 <ul>
  <li class="arrow" @click="pickpre(currentyear,currentmonth)">❮</li>
  <li class="year-month" @click="pickyear(currentyear,currentmonth)">
  <span class="choose-year">{{ currentyear }}</span>
  <span class="choose-month">{{ currentmonth }}月</span>
  </li>
  <li class="arrow" @click="picknext(currentyear,currentmonth)">❯</li>
 </ul>
 </div>
 <!-- 星期 -->
 <ul class="weekdays">
 <li>一</li>
 <li>二</li>
 <li>三</li>
 <li>四</li>
 <li>五</li>
 <li style="color:red">六</li>
 <li style="color:red">日</li>
 </ul>
 <!-- 日期 -->
 <ul class="days">
 <li @click="pick(day)" v-for="day in days">
  <!--本月-->
  <span v-if="day.getmonth()+1 != currentmonth" class="other-month">{{ day.getdate() }}</span>
  <span v-else>
  <!--今天-->
  <span v-if="day.getfullyear() == new date().getfullyear() && day.getmonth() == new date().getmonth() && day.getdate() == new date().getdate()" class="active">{{ day.getdate() }}</span>
  <span v-else>{{ day.getdate() }}</span>
  </span>
 </li>
 </ul>
</div>

id 为 calendar 对应的创建一个 vue 对象，设置 el 为 ‘#calendar'。

<script type="text/javascript">
 new vue({
 el: '#calendar',
 data: {
  currentday: 1,
  currentmonth: 1,
  currentyear: 1970,
  currentweek: 1,
  days: [],
 },
 created: function() {
  this.initdata(null);
 },
 methods: {
  initdata: function(cur) {
  var 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;
  }
  var str = this.formatdate(this.currentyear , this.currentmonth, this.currentday);
  console.log("today:" + str + "," + this.currentweek);
  this.days.length = 0;
  // 今天是周日，放在第一行第7个位置，前面6个
  for (var i = this.currentweek - 1; i >= 0; i--) {
   var d = new date(str);
   d.setdate(d.getdate() - i);
   console.log("y:" + d.getdate());
   this.days.push(d);
  }
  for (var i = 1; i <= 35 - this.currentweek; i++) {
   var d = new date(str);
   d.setdate(d.getdate() + i);
   this.days.push(d);
  }
  },
  pick: function(date) {
  alert(this.formatdate( date.getfullyear() , date.getmonth() + 1, date.getdate()));
  },
  pickpre: function(year, month) {
  // setdate(0); 上月最后一天
  // setdate(-1); 上月倒数第二天
  // setdate(dx) 参数dx为 上月最后一天的前后dx天
  var d = new date(this.formatdate(year , month , 1));
  d.setdate(0);
  this.initdata(this.formatdate(d.getfullyear(),d.getmonth() + 1,1));
  },
  picknext: function(year, month) {
  var d = new date(this.formatdate(year , month , 1));
  d.setdate(35);
  this.initdata(this.formatdate(d.getfullyear(),d.getmonth() + 1,1));
  },
  pickyear: function(year, month) {
  alert(year + "," + month);
  },
  
  // 返回 类似 2016-01-02 格式的字符串
  formatdate: function(year,month,day){
  var y = year;
  var m = month;
  if(m<10) m = "0" + m;
  var d = day;
  if(d<10) d = "0" + d;
  return y+"-"+m+"-"+d
  },
 },
 });
</script>

完整代码：

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>日历</title>
 <style type="text/css">
  * {
  box-sizing: border-box;
  }
  
  ul {
  list-style-type: none;
  }
  
  body {
  font-family: verdana, sans-serif;
  background: #e8f0f3;
  }
  #calendar{
  width:80%;
  margin: 0 auto;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
  }
  .month {
  width: 100%;
  background: #00b8ec;
  }
  
  .month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  }
  
  .year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  }
  
  .year-month:hover {
  background: rgba(150, 2, 12, 0.1);
  }
  
  .choose-year {
  padding-left: 20px;
  padding-right: 20px;
  }
  
  .choose-month {
  text-align: center;
  font-size: 1.5rem;
  }
  
  .arrow {
  padding: 30px;
  }
  
  .arrow:hover {
  background: rgba(100, 2, 12, 0.1);
  }
  
  .month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  }
  
  .weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #00b8ec;
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  justify-content: space-around;
  }
  
  .weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
  }
  
  .days {
  padding: 0;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  }
  
  .days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
  font-size: 1rem;
  color: #000;
  }
  
  .days li .active {
  padding: 6px 10px;
  border-radius: 50%;
  background: #00b8ec;
  color: #fff;
  }
  
  .days li .other-month {
  padding: 5px;
  color: gainsboro;
  }
  
  .days li:hover {
  background: #e1e1e1;
  }
 </style>
 </head>
 <body>
 <h1>css 日历</h1>
 <div id="calendar">
  <div class="month">
  <ul>
   <li class="arrow" @click="pickpre(currentyear,currentmonth)">❮</li>
   <li class="year-month" @click="pickyear(currentyear,currentmonth)">
   <span class="choose-year">{{ currentyear }}</span>
   <span class="choose-month">{{ currentmonth }}月</span>
   </li>
   <li class="arrow" @click="picknext(currentyear,currentmonth)">❯</li>
  </ul>
  </div>
  <ul class="weekdays">
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li style="color:red">六</li>
  <li style="color:red">日</li>
  </ul>
  <ul class="days">
  <li @click="pick(day)" v-for="day in days">
   <!--今天-->
   <span v-if="day.getmonth()+1 != currentmonth" class="other-month">{{ day.getdate() }}</span>
   <span v-else>
   <!--今天-->
   <span v-if="day.getfullyear() == new date().getfullyear() && day.getmonth() == new date().getmonth() && day.getdate() == new date().getdate()" class="active">{{ day.getdate() }}</span>
   <span v-else>{{ day.getdate() }}</span>
   </span>
  </li>
  </ul>
 </div>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  new vue({
  el: '#calendar',
  data: {
   currentday: 1,
   currentmonth: 1,
   currentyear: 1970,
   currentweek: 1,
   days: [],
  },
  created: function() {
   this.initdata(null);
  },
  methods: {
   initdata: function(cur) {
   var 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;
   }
   var str = this.formatdate(this.currentyear , this.currentmonth, this.currentday);
   console.log("today:" + str + "," + this.currentweek);
   this.days.length = 0;
   // 今天是周日，放在第一行第7个位置，前面6个
   for (var i = this.currentweek - 1; i >= 0; i--) {
    var d = new date(str);
    d.setdate(d.getdate() - i);
    console.log("y:" + d.getdate());
    this.days.push(d);
   }
   for (var i = 1; i <= 35 - this.currentweek; i++) {
    var d = new date(str);
    d.setdate(d.getdate() + i);
    this.days.push(d);
   }
   },
   pick: function(date) {
   alert(this.formatdate( date.getfullyear() , date.getmonth() + 1, date.getdate()));
   },
   pickpre: function(year, month) {
   // setdate(0); 上月最后一天
   // setdate(-1); 上月倒数第二天
   // setdate(dx) 参数dx为 上月最后一天的前后dx天
   var d = new date(this.formatdate(year , month , 1));
   d.setdate(0);
   this.initdata(this.formatdate(d.getfullyear(),d.getmonth() + 1,1));
   },
   picknext: function(year, month) {
   var d = new date(this.formatdate(year , month , 1));
   d.setdate(35);
   this.initdata(this.formatdate(d.getfullyear(),d.getmonth() + 1,1));
   },
   pickyear: function(year, month) {
   alert(year + "," + month);
   },
   
   // 返回 类似 2016-01-02 格式的字符串
   formatdate: function(year,month,day){
   var y = year;
   var m = month;
   if(m<10) m = "0" + m;
   var d = day;
   if(d<10) d = "0" + d;
   return y+"-"+m+"-"+d
   },
  },
  });
 </script>
 </body>
</html>

本文已被整理到了《vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Vue.js一个文件对应一个组件实践

下一篇： aspx是什么文件 aspx文件怎么打开

Vue.js创建Calendar日历效果

Vue.js创建Calendar日历效果

Vue.js创建Calendar日历效果

javaAPI(4)之DateFormat,Date,Calendar类的使用创建日历

使用 Vue.js 创建的 Calendar_html/css_WEB-ITnose

使用 Vue.js 创建的 Calendar_html/css_WEB-ITnose

Vue.js创建Calendar日历效果

Vue.js创建Calendar日历效果