talk is cheap show me the code
html+css
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
*html, body
.calendar
.title
#calendar-title
#calendar-year
#pre
#next
.body-list ul
.body-list ul li
.green
.lightgrey
.darkgrey
/*日期當天用綠色背景綠色文字加以顯示*/
.greenbox
.icon
svg<
/style>
<
/head>
="calendar"
>
="title"
>
="green" id=
"calendar-title"
>month<
/h1>
="green" id=
"calendar-year"
>year<
/h2>
"" id=
"pre"
>
="icon" aria-hidden=
"true"
>
"#icon-zuoyou"
>
<
/use>
<
/svg>
<
/a>
"" id=
"next"
>
="icon" aria-hidden=
"true"
>
"#icon-zuoyou1"
>
<
/use>
<
/svg>
<
/a>
<
/div>
="body"
>
="lightgrey body-list"
>
sun<
/li>
mon<
/li>
tue<
/li>
wed<
/li>
thu<
/li>
fri<
/li>
sat<
/li>
<
/ul>
<
/div>
="darkgrey body-list"
>
"days"
>
<
/ul>
<
/div>
<
/div>
<
/div>
"js/calendar.js"
>
<
/script>
"js/iconfont.js"
>
<
/script>
<
/body>
<
/html>
js
const month_olypic =[31
,29,31
,30,31
,30,31
,31,30
,31,30
,31];
//閏年每個月份的天數
const month_normal =[31
,28,31
,30,31
,30,31
,31,30
,31,30
,31];
const month_name =
["january"
,"febrary"
,"march"
,"april"
,"may"
,"june"
,"july"
,"auguest"
,"september"
,"october"
,"november"
,"december"];
//獲取以上各個部分的id
const holder = document.
getelementbyid
("days");
const prev = document.
getelementbyid
("prev");
const next = document.
getelementbyid
("next");
const ctitle = document.
getelementbyid
("calendar-title");
const cyear = document.
getelementbyid
("calendar-year");
//獲取當天的年月日
const my_date =
newdate()
;let my_year = my_date.
getfullyear()
;//獲取年份
let my_month = my_date.
getmonth()
;//獲取月份,一月份的下標為0
const my_day = my_date.
getdate()
;//獲取當前日期
//根據年月獲取當月第一天是週幾
function
daystart
(month,year)
//根據年份判斷某月有多少天(11,2018),表示2023年12月
function
daysmonth
(month, year)
else
}//js實現str插入li+class,不要忘了用innerhtml進行插入
function
refreshdate()
//從一號開始新增知道totalday,並為pre,next和當天新增樣式
let myclass;
for(
let i =
1; i <= totalday; i++
)else
if(my_year == my_date.
getfullyear()
&& my_month == my_date.
getmonth()
&& i == my_day)
else
str +=
"+myclass+
">"
+i+"";}
holder.innerhtml = str;
ctitle.innerhtml = month_name[my_month]
; cyear.innerhtml = my_year;
}//呼叫refreshdate()函式,日曆才會出現
refreshdate()
;//實現onclick向前或向後移動
pre.
onclick
=function
(e)refreshdate()
;}next.
onclick
=function
(e)refreshdate()
;}
另外引用阿里巴巴向量圖示庫(採用symbol引入)
引入方式參考鏈結
最終效果如下:
該文章參考出處:
日曆使用者控制項
namespace tempweb remove private static readonly string header new string private datetime startdate gets or sets the show date.the show date.descript...
日曆控制項 Calendar
現在我們可以利用calendar控制項可以簡單的實現乙個很好的日曆控制項.直接在工具箱裡面拉出來就可以了,在這個控制項裡面,我們也可以做更多的個性化.有系統預設的也有系統自己帶的很多款式給你選擇.當然你不高興的話可以自己選擇自己的方式去填充這些 我選擇了乙個專業型的.感覺還不錯.呵呵 asp cal...
js日曆控制項
網上有許多js寫的時間選擇控制項,但大都不能在aspx中使用 只能在html中用 好不容易找到乙個可以用的,不過介面難看了 如下 在head中包含 src中的檔名當然是根據自己的檔名來的 在輸入框 編碼問題 最佳方法是把js的編碼換成utf 8,而不是把aspx的編碼換成gb2312 在vs中開啟該...