本人是一个刚刚入职小码农，用于记录自己学习的过程，写的不好请见谅。
为什么要改写日历插件？
写多了vue项目看到原生的js、jq插件就一阵头疼
大多数网上的js日历插件都长这样
test1
这样
test2
还有这样
test3
网上没有合适的插件就只好自己造
参考了githup的相关代码之后梳理了一下需要做的几个步骤
- 初始化日历默认值，在原来的代码中加入需要的方法
//初始化年月日插件默认值
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 = [
// 时辰value
{subName:'时辰未知',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;
// 中文转换,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];
}
中间省略了很多代码 都是网上搬运没什么借鉴意义最后记得 export default lCalendar 将这个模块暴露可以让外部引用，第一编写时就应为忘记暴露而出错
- 在vue项目中入口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的最后加入
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
-
在vue项目中初始化插件
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">测试</button>
</div>
import lCalendar from '../libs/js/lCalendar.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to js-lunar-calendar'
}
},
//页面挂载时初始化日期插件
mounted(){
var calendar1 = new lCalendar().init('#datetime');
new lCalendar().init('#dete');
},
看一下效果··
移动端浏览
js-lunar-calendar2.png
pc端浏览
js-lunar-calendar1.png
结语
第一次发文也不知道写什么好，附上项目地址如果碰巧对大家能够有帮助那真的是太好啦，希望大家多给我一些鼓励。
