本人是一個(gè)剛剛?cè)肼毿〈a農(nóng)，用于記錄自己學(xué)習(xí)的過(guò)程，寫的不好請(qǐng)見(jiàn)諒。
為什么要改寫日歷插件？
寫多了vue項(xiàng)目看到原生的js、jq插件就一陣頭疼
大多數(shù)網(wǎng)上的js日歷插件都長(zhǎng)這樣
test1
這樣
test2
還有這樣
test3
網(wǎng)上沒(méi)有合適的插件就只好自己造
參考了githup的相關(guān)代碼之后梳理了一下需要做的幾個(gè)步驟
- 初始化日歷默認(rèn)值，在原來(lái)的代碼中加入需要的方法
//初始化年月日插件默認(rèn)值
function dateCtrlInit() {
var date = new Date();
var dateArr = {
yy: date.getYear(),
mm: date.getMonth(),
dd: date.getDate() - 1,
hh: 0,
};
var date_hh = _self.gearDate.querySelector(".date_hh");
if (date_hh && date_hh.getAttribute("val")) {
//得到日期的值
var hhVal = parseInt(date_hh.getAttribute("val"));
var hhHtml = [
// 時(shí)辰value
{subName:'時(shí)辰未知',value:0},
{subName:'23:00-00:59(子)',value:0},
{subName:'01:00-02:59(丑)',value:1},
{subName:'03:00-04:59(寅)',value:2},
{subName:'05:00-06:59(卯)',value:3},
{subName:'07:00-08:59(辰)',value:4},
{subName:'09:00-10:59(巳)',value:5},
{subName:'11:00-12:59(午)',value:6},
{subName:'13:00-14:59(未)',value:7},
{subName:'15:00-16:59(申)',value:8},
{subName:'17:00-18:59(酉)',value:9},
{subName:'19:00-20:59(戌)',value:10},
{subName:'21:00-22:59(亥)',value:11},
]
itemStr = "";
for(var p = 0,len = hhHtml.length; p < len; p++){
itemStr += "<div class='tooth_hh' data-value="+hhHtml[p].value+">" + hhHtml[p].subName + "</div>";
}
date_hh.innerHTML = itemStr;
// 中文轉(zhuǎn)換,type:rm閏月，mm月份，dd日期，num值
function getChinese(type,num){
var rmArr=['閏正月','閏二月','閏三月','閏四月','閏五月','閏六月','閏七月','閏八月','閏九月','閏十月','閏冬月','閏臘月'];
var mmArr=['正月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
var ddArr=['初一','初二','初三','初四','初五','初六','初七','初八','初九','初十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','廿一','廿二','廿三','廿四','廿五','廿六','廿七','廿八','廿九','三十','三十一'];
if(type=='rm') return rmArr[num-1]
if(type=='mm') return mmArr[num-1];
if(type=='dd') return ddArr[num-1];
}
中間省略了很多代碼 都是網(wǎng)上搬運(yùn)沒(méi)什么借鑒意義最后記得 export default lCalendar 將這個(gè)模塊暴露可以讓外部引用，第一編寫時(shí)就應(yīng)為忘記暴露而出錯(cuò)
- 在vue項(xiàng)目中入口js引入jq
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
import $ from 'jquery'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在webpack.base.conf.js里加入
var webpack = require("webpack")
在module.exports的最后加入
// 增加一個(gè)plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
-
在vue項(xiàng)目中初始化插件
html代碼
<div class="calendar">
<div class="hello">{{msg}}</div>
<section class="section-datetime">
<div id="datetime" data-id="birthday">選擇日期</div>
<input type="hidden" id="birthday" name="birthday" value="" ref="birthday" >
</section>
<button @click="test">測(cè)試</button>
</div>
import lCalendar from '../libs/js/lCalendar.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to js-lunar-calendar'
}
},
//頁(yè)面掛載時(shí)初始化日期插件
mounted(){
var calendar1 = new lCalendar().init('#datetime');
new lCalendar().init('#dete');
},
看一下效果··
移動(dòng)端瀏覽
js-lunar-calendar2.png
pc端瀏覽
js-lunar-calendar1.png
結(jié)語(yǔ)
第一次發(fā)文也不知道寫什么好，附上項(xiàng)目地址如果碰巧對(duì)大家能夠有幫助那真的是太好啦，希望大家多給我一些鼓勵(lì)。
