html css js 實現日曆控制項

2021-10-05 20:05:00 字數 3898 閱讀 7296

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中開啟該...