使用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小時內與您取得聯系。

整合營銷服務商