ffffff data auto bsp for -- text 轉換成 mar

Vue生成日歷，根據返回值將日期標紅

HTML：

<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 +‘/‘+currentMonth}}</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 :class="{active:j(day.getFullYear(),day.getMonth()+1,day.getDate())}">{{ day.getDate() }}</span> <!-- <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> css: <style type="text/css"> * { box-sizing: border-box; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; background: #E8F0F3; } #calendar { width: 560px; height: 400px; margin: 0 auto; border: 2px solid #000; background: #fafafa; } .month { width: 100%; height: 60px; } .year-month { height: 60px; text-align: center; line-height: 60px; font-size: 26px; } .weekdays { margin: 0; padding: 6px 20px; background-color: #f2f2f2; display: flex; color: #333; justify-content: space-around; } .weekdays li { display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 18px; font-weight: bold; } .days { padding: 15px 20px; 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: 4px 0; font-size: 16px; color: #000; } .days li .active { border-radius: 50%; background: red; color: #fff; } .days li span { display: inline-block; width: 40px; height: 40px; line-height: 40px; font-weight: bold; } .days li .other-month { color: gainsboro; } .days li:hover { background: #e1e1e1; } </style> javascript： <script type="text/javascript"> new Vue({ el: ‘#calendar‘, data: { currentDay: 1, currentMonth: 1, currentYear: 1970, currentWeek: 1, days: [], addDay: [], }, created: function() { this.initData(null); var $this = this; //請求數據 $.ajax({ url: "這裏填接口名稱", type: "POST", data: { name: ‘‘, params: ‘‘ }, dataType: "json", async: false, success: function(data) { console.log(data); $this.addDay = data; }, error: function(xhr) { console.log(xhr); } }); }, methods: { j: function(y, m, d) { //將傳入的參數轉換成字符串，作比較 var Y = y.toString(); var M = m < 10 ? ‘0‘ + m : m.toString(); var D = d < 10 ? ‘0‘ + d : d.toString();
//判斷日歷日期跟數據返回日期做對比 for (var i = 0; i < this.addDay.length; i++) { if (toData(this.addDay[i][‘日歷日期‘]) == (Y + M + D)) { return true } }
function toData(date) { //將時間戳轉化成標準的日期格式 if (date == null) { return ""; } var ndate = new Date(date); var Y = ndate.getFullYear(); var M = (ndate.getMonth() + 1 < 10 ? ‘0‘ + (ndate.getMonth() + 1) : ndate.getMonth() + 1); var D = (ndate.getDate() < 10 ? ‘0‘ + (ndate.getDate()) : ndate.getDate()); ndate = Y + M + D; return ndate; } }, 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>

Vue日歷