使用Vue3.0新特性造轮子 WidgetUI3.0

使用Vue3.0新特性造轮子 WidgetUI3.0 （Calendar日历组件）

本调用

<Calendar />

限制日期选择范围

<Calendar section=[2020/5/27-2020/6/11] />

设置日历显示方向

// 水平方向，可左右滑动
<Calendar c direction="horizontal" />

Calendar组件参数：

isFull (类型 Boolean)

是否充满每行显示(42天)

默认false

section (类型 String)

日历显示区间

例如：section=[2020/5/27-2020/6/11]

headRule (类型 Array)

日期头部显示的星期

默认 ["一", "二", "三", "四", "五", "六", "日"]

direction (类型 String)

日期布局显示方向

默认 “vertical”，可选（“vertical”、“horizontal”）

SelectProp (类型 String)

默认选中日期

默认"当天"

例如：selectProp="2020/5/17"

ratio (类型 Number)

滑动多少比例滚动到下一页

默认0.5

例如：selectProp="2020/5/17"

Calendar事件：

change

点击日期触发

具体的Calendar组件源码，请前往github地址获取。

https://github.com/AntJavascript/WidgetUI3.0/blob/master/Calendar.vue

近有做日历的需求，找了很久，分享一款优秀的日历组件。

关于 Mpvue Calendar

Mpvue Calendar 是一款简单实用，功能强大的 Vue 日历组件，适合用在日期选择、日期范围选取以及日历展示场景，使用非常简单，是一款非常值得收藏使用的优秀 Vue 组件。

支持中国农历

Mpvue Calendar 的特性

基于TypeScript 和 Vue 3.0+，开箱即用，体验流畅
界面简洁优雅，操作简单，用户体验符合常规日历组件
支持中文界面，也支持中国农历
支持 web PC 端和移动端，适配了手势滑动操作

上手体验

日期和日历在很对产品上都有需求，众所周知，原生 javascript 中的关于时间和日期的语法复杂难记，手写一个本地化的日历，需要考虑较全面。

而 Mpvue Calendar 是一款使用非常简单的开源日历组件，目前只提供 Vue 3.0+ 版本，只提供 npm 安装的方式使用，满足了产品对日期选择、日期范围选取以及日历展示等需求，实现了对日历的需求的绝大多数功能。官网上有充足的例子，上手没有难度，新手也可以很快上手使用。

周视图

当然了，这个组件是开源的，源码代码量也不多，完全可以二次开发修改成自己想要的样子，也非常适合作为学习 Vue 3.x 的项目，收下吧。

免费开源说明

Mpvue Calendar 是一个免费使用，开源的前端组件项目，基于 MIT 开源协议在 Github 上开源，各位可以直接下载源码使用，也可以根据 api 文档通过 npm 安装使用。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

码如下：

<html>

<head>

<title>网页特效一个很漂亮实用的日历站长特效网欢迎您</title>

//创建一个数组,用于存放每个月的天数

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

{

this[0]=m0;

this[1]=m1;

this[2]=m2;

this[3]=m3;

this[4]=m4;

this[5]=m5;

this[6]=m6;

this[7]=m7;

this[8]=m8;

this[9]=m9;

this[10]=m10;

this[11]=m11;

}

//实现月历

function calendar() {

var monthNames="JanFebMarAprMayJunJulAugSepOctNovDec";

var today=new Date();

var thisDay;

var monthDays=new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

year=today.getYear() +1900;

thisDay=today.getDate();

if (((year % 4==0) && (year % 100 !=0)) || (year % 400==0)) monthDays[1]=29;

nDays=monthDays[today.getMonth()];

firstDay=today;

firstDay.setDate(1);

testMe=firstDay.getDate();

if (testMe==2) firstDay.setDate(0);

startDay=firstDay.getDay();

document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")

document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")

document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>");

document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>");

var dayNames=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

var monthNames=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

var now=new Date();

document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>");

document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>");

document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>");

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>");

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>");

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>");

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>");

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>");

document.writeln("</TR><TR>");

column=0;

for (i=0; i<startDay; i++) {

document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>");

column++;

}

for (i=1; i<=nDays; i++) {

if (i==thisDay) {

document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>")

}

else {

document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>");

}

document.writeln(i);

if (i==thisDay) document.writeln("</FONT></TD>")

column++;

if (column==7) {

document.writeln("<TR>");

column=0;

}

document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")

document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>")

document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")

document.writeln("</TD></TR></TABLE></div>");

}

</SCRIPT>

var timerID=null;

var timerRunning=false;

function stopclock (){

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;}

//显示当前时间

function showtime () {

var now=new Date();

var hours=now.getHours();

var minutes=now.getMinutes();

var seconds=now.getSeconds()

var timeValue=" " + ((hours >12) ? hours -12 :hours)

timeValue +=((minutes < 10) ? ":0" : ":") + minutes

timeValue +=((seconds < 10) ? ":0" : ":") + seconds

timeValue +=(hours >=12) ? " 下午 " : " 上午 "

document.clock.face.value=timeValue;

timerID=setTimeout("showtime()",1000);//设置超时,使时间动态显示

timerRunning=true;}

function startclock () {

stopclock();

showtime();}

</SCRIPT>

</head>

<!--

calendar();

//-->

</script>

</body>

</html>

在线咨询

上一篇：怎样设置tplink路由器的AP模式
下一篇：selenium之css定位小结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商