這篇文章主要為大家詳細介紹了DedeCMS里Calendar日歷時間控件使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,有需要的朋友可以收藏方便以后借鑒。
在織夢網(wǎng)站表單里面有時候我們會用到時間,比如,我們制作表單時,可能讓用戶填寫時間,如果手工填寫會很麻煩,但是,如果用一個類似時間或稱日歷的圖形讓用戶點一下,就可以把時間填寫好,這樣是不是非常棒。
日歷時間用到的文件是:
js文件:/dede/js/calendar/calendar.js
css文件:/dede/js/calendar/calendar-green.css
上面這二個文件是必須引入到html文件里面的,這里我把html文件起名為demo.html,上面的js和css文件缺一不可,請把這個兩個文件放到demo.html里面。
另外用到的圖片文件是:/dede/images
還用到了一個css文件:/dede/css/base.css, 這個base.css文件可以不要,這個是用來設置在時間輸入框中加入一個小圖標,
案例代碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>織夢時間控件使用</title> <link rel="stylesheet" href="/js/calendar/calendar-blue.css"/> <script src="/js/calendar/calendar.js"></script> </head> <body> <input type="text" name="time_start" id="time_start" class="date" size="12" > <input type="text" name="time_end" id="time_end" class="date" size="12" > <script> Calendar.setup({ inputField : "time_start", ifFormat : "%Y-%m-%d %H:%M:%S", showsTime : true, timeFormat : "24" }); Calendar.setup({ inputField : "time_end", ifFormat : "%Y-%m-%d %H:%M:%S", showsTime : true, timeFormat : "24" }); </script> </body> </html> |
效果圖如下: