前端之vue 封装自定义日历
关于自定义日历
工作需要，现有框架封装的日历无法满足需求，又找不到更好的插件的情况下，咋办？？自己写个呗！
效果图和功能说明
先看看效果图
在这里插入图片描述
其实基本界面就这样了，和其他没啥区别。
但是既然要单独封装一个，那肯定有其他可扩展的地方，不然就没意义了
功能说明
1、基本日历功能
2、可以自定义标题头部
3、可自定义顶部时间以及月份切换部分
4、日历单元格样式可以自定义
5、星期一栏可以自定义
6、可以在日历里面插入数据：这一点是最重要的，也是必须要自己封装的重要因素
使用
封装为日历组件，直接引用即可。需要扩展其他功能，可以看组件里面的props哦，这是可以接收的参数。当然，如果用props不能满足的，那就看看里面的slot插槽部分咯。
这是props定义接收的参数，每个参数均有注释，这里不多做介绍。
props: {
initDate:{
type:[String,Date,Number],
default:()=>new Date()
},//初始化日期
width:{
type:[String,Number],
default:'100%'
},//日历宽度
height:{
type:[String,Number],
default:'100%'
},//日历高度
calendarClass:String,//日历自定义样式类
titleClass:String,//年月标题自定义样式类
titleH:{
type:[String,Number],
default:'35px'
},//年月标题高度
titleBk:{
type:String,
default:'#ffffff'
},//年月标题颜色
bodyBk:{
type:String,
default:'#ffffff'
},//日历体背景
bodyClass:String,//日历体自定义样式
dateDefaultClass:String,//日期自定义默认类名
dateActivDateClass:String,//日期自定义选中类名
dateDisabledDateClass:String,//日期自定义不可见类名
titleDateConnector:String,//标题日期连接符
insertData:{
type:Array,
default:()=>[]
},//自定义拼接数据
weeks:{
type:Array,
default:()=>['日','一','二','三','四','五','六']
},//周数据
dateProp:{
type:String,
default:'date'
},//自定义表示时间的字段
calenCellClass:String,//日历单元格自定义样式
firstRowCellClass:String,//日历第一行单元格自定义样式
firstColumCellClass:String,//日历第一列单元格自定义样式
cellBorder:Boolean,//是否有边框
cellTitleHeight:{
type:[Number,String],
default:'40px'
},//日历标题高度
cellTitleColor:{
type:String,
default:'#333333'
},//日历标题颜色
range:{
type:Array,
default:()=>[]
},//日期范围
},
更多个性化功能请看slot部分
在这里插入图片描述
插槽使用示例：
不熟悉插槽的伙伴可以去vue官网补补：http://cn.vuejs.org/v2/guide/components-slots.html
日历标题
{{currentYear}}年{{currentMonth}}月
返回今天
其他不多说了，最后上代码。由于组件代码放在一个页面写重了点，因此分成了几个文件
所有data里面的变量，props，还有函数均有说明。
先看canlendar.vue
{{currentYear}}{{titleDateConnector || '年'}}{{currentMonth+1}}{{titleDateConnector ? '' : '月'}}
<
>
{{week}}
{{day.day}}
@import "./style";
@import "./flex";
工具文件util.js
//获取开始日期结束日期最终信息
export function getStartTimeEndTimeInfoFun(startDate,endDate){
let start=checkStartTimeEndTimeFun(startDate)
let end=checkStartTimeEndTimeFun(endDate)
let calenStartDateResult=start ? getNewDateFun(start) : false
let calenStartYear=calenStartDateResult ? calenStartDateResult.calendarAddYear : ''
let calenStartMonth=calenStartDateResult ? calenStartDateResult.calendarAddMonth : ''
let calenStartDate=calenStartDateResult ? calenStartDateResult.calendarAddDate : ''
let calenEndDateResult=end ? getNewDateFun(end) : false
let calenEndYear=calenEndDateResult ? calenEndDateResult.calendarAddYear : ''
let calenEndMonth=calenEndDateResult ? calenEndDateResult.calendarAddMonth : ''
let calenEndDate=calenEndDateResult ? calenEndDateResult.calendarAddDate : ''
if(calenStartYear!==calenEndYear || calenStartMonth!==calenEndMonth || !calenEndDate || !calenStartDate || (calenStartDate>calenEndDate)){
(start || end) && console.error(`日期范围仅支持本月范围选择或日期格式错误${startDate} ${endDate}`)
return {dateRangeCode:0}
}
return{
calenStartYear,
calenStartMonth:calenStartMonth-1,
calenStartDate,
calenEndYear,
calenEndMonth:calenEndMonth-1,
calenEndDate,
dateRangeCode:1
}
}
//检查开始日期和结束日期
export function checkStartTimeEndTimeFun(date){
if(typeof date!=='string' && (typeof date==='string' && !date) && typeof date!=='number' && !(date instanceof Date)){
//非时间可能的数据格式，或者明确时间没有值，跳过
return ''
}
if(typeof date==='number' && date.length<10){
console.error(`日期${date}格式错误,请使用正确的时间戳格式，例如：1593669468000`)
return ''
}
if(typeof date==='string' && date){
//传递过来的时间格式时字符串，此处不可以用parseInt，因为parseInt会将类似2020-02-02解析为2020
if(!/-/.test(date) && !/\//.test(date && !Number(date))){
console.error(`日期${date}格式错误,请使用正确的字符串日期格式，例如：2020-06-06，或2020/06/06`)
return ''
}
if(!/-/.test(date) && !/\//.test(date) && Number(date)){
date=Number(date)
}
}
return date
}
//将传入的时间生成新的值并返回
export function getNewDateFun(date){
let calendarAddYear=null
let calendarAddMonth=null
let calendarAddDate=null
if(typeof date==='string'){
//字符串，可能时2020-03-04或2020/02/03或03-02或03/02
let dateArr=/-/.test(date) ? date.split('-') : date.split('/')
if(dateArr.length===3){
//年月日
calendarAddYear=parseInt(dateArr[0])
calendarAddMonth=parseInt(dateArr[1])
calendarAddDate=parseInt(dateArr[2])
}else if(dateArr.length===2){
//月日，年默认为今年
calendarAddYear=new Date().getFullYear()
calendarAddMonth=parseInt(dateArr[0])
calendarAddDate=parseInt(dateArr[1])
}else{
//其他未知情况，报错
console.error(`日期${date}格式错误,请使用正确的字符串日期格式，例如：2020-06-06，或2020/06/06`)
return false
}
}else{
//时间戳和时间对象
if(typeof date==='number'){
//时间戳转为时间对象
date=new Date(date)
}
calendarAddYear=date.getFullYear()
calendarAddMonth=date.getMonth()+1
calendarAddDate=date.getDate()
}
return{
calendarAddYear,
calendarAddMonth,
calendarAddDate
}
}
//将数据插入日历
export function insertDataToCalendar(value,calendarList,dateProp){
if(!value.length || !(value instanceof Array)){
return
}
for(let i=0;i<value.length;i++){
let date=value[i][dateProp]
// console.log(date)
if(typeof date!=='string' && (typeof date==='string' && !date) && typeof date!=='number' && !(date instanceof Date)){
//非时间可能的数据格式，或者明确时间没有值，跳过
continue
}
if(typeof date==='number' && date.length<10){
console.error(`日期${date}格式错误,请使用正确的时间戳格式，例如：1593669468000`)
continue
}
if(typeof date==='string' && date){
//传递过来的时间格式时字符串，此处不可以用parseInt，因为parseInt会将类似2020-02-02解析为2020
if(!/-/.test(date) && !/\//.test(date && !Number(date))){
console.error(`日期${date}格式错误,请使用正确的字符串日期格式，例如：2020-06-06，或2020/06/06`)
continue
}
if(!/-/.test(date) && !/\//.test(date) && Number(date)){
date=Number(date)
}
}
let caldarTimeResult=getNewDateFun(date)
if(!caldarTimeResult) return
let {calendarAddYear,calendarAddMonth,calendarAddDate}=caldarTimeResult
value[i]={...value[i],calendarAddYear,calendarAddMonth,calendarAddDate}
}
for(let i=0;iitem.calendarAddYear===calendarList[i].year)//先筛选出当前年的
filterCalendarList=filterCalendarList.filter(item=>item.calendarAddMonth===calendarList[i].month)//再筛选出当前月的
filterCalendarList=filterCalendarList.filter(item=>item.calendarAddDate===calendarList[i].day)//最后筛选出当前天的
// console.log(filterCalendarList)
if(!filterCalendarList.length){
// 没有值，跳过
continue
}
// 将传过来的数据插入原日历数据
calendarList.splice(i,1,{...calendarList[i],...filterCalendarList[0],hasData:true})
}
}
日期验证文件validate.js
/**
* 判断日期格式是否正确，正确返回日期
*/
export function isValidDate(dateTime) {
let yourDate=dateTime
try {
;(typeof dateTime === 'string') && (dateTime=dateTime.replace(/-/g,'/'))
dateTime=new Date(dateTime)
if(dateTime instanceof Date && !isNaN(dateTime.getTime())){
return {
dateTime,
isValid:true,
}
}else{
console.error(`日期 ${yourDate} 格式错误`)
return {
isValid:false,
}
}
}catch (err){
console.error(err)
}
}
/**
* 判断是否为数字，整数或者小数
*/
export function isNumber(val) {
let regPos = /^\d+(\.\d+)?$/ //非负浮点数
let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ //负浮点数
return regPos.test(val) || regNeg.test(val)
}
最后是样式文件style.less和flex.less
style.less
html,body,ul,li,p,span,div{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dateDefaultCss{
color: black;
cursor: pointer
}
.dateActiveCss{
color: white;
cursor: pointer;
background:#317ef2;
}
.disableDateCss{
color: #bfbfbf;
cursor: default
}
.custom-calendar {
.calendar-title {
padding:0 30px 0 10px;
.left {
font-size: 105%;
}
.right {
width:70px;
border:solid 1px #dddddd;
padding:0 10px;
span{
font-size: 20px;
}
span:hover {
cursor: pointer;
color: #3a82fa;
}
}
margin-bottom: 5px;
color: #000;
}
.calendar-body {
padding-bottom:10px;
.bodyTitleBox{
.body-title {
width:14%;
}
}
.calen-content{
flex-wrap:wrap;
}
.calen-cell {
color: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
width:14%;
margin-bottom: 5px;
.dateSpan{
padding: 3px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:20px;
height:20px;
margin:0 auto;
}
div{
width: 3px;
height: 3px;
border-radius: 50%;
background: #3a82fa;
margin: 0 auto;
}
}
}
}
flex.less
/*
flex布局样式
*/
/* flex布局 */
.rowStart {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.rowAround {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.rowBtween {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.rowCenter {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.rowEnd {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.columnStart {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.columnAround {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.columnBtween {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.columnCenter {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.columnEnd {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
