new vue( 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
vue 日曆簽到
doctype html html lang en head meta charset utf 8 title title title script src script style ul body calendar month month ul year month year month hove...
簡單的vue日曆元件
根據公司設計圖製作了乙個簡單的日曆元件，主要包括切換上一年 上一月 下一年 下一月，鎖定開始時間 結束時間等功能，以上就是效果圖。html child date0 child date1 js kim new vue date1 vue.component mcalendar methods els...
Vue實現日曆小外掛程式
原始碼可見於我的github 很明顯每年每個月的月曆樣式 資料不一樣 是一致的，那麼自然而然思路就是把每個月作為乙個公用元件進行復用十二次，這樣就避免了多次重複的 每個元件不一樣的地方在於年份和月份，而這兩個資料我們可以由父元件向子元件進行傳值來告訴子元件。關鍵 如下 months是乙個包含十二個月...