果圖:
方案描述:
開發工具:Hbuilder X(html + javasc)
代碼(html文件):
在HTML5中,新增了日期輸入類型date,其含義為選擇日、月、年。
date屬性的代碼格式如下。
<input type="date" name="user_date" />
(1)編輯代碼
打開記事本,編寫代碼,在<body>標簽中加入以下代碼。并保存為HTML格式文件。
(2)在瀏覽器中瀏覽效果
在火狐瀏覽器中瀏覽效果如圖所示,日期會顯示英文年、月、日。
在360極速瀏覽器中瀏覽效果如圖所示,日期會顯示中文年、月、日。
用戶單擊輸入框中向下按鈕,即可在彈出的窗口中選擇需要的日前。
火狐瀏覽器中瀏覽效果如下圖。
360極速瀏覽器中瀏覽效果如下圖。
在HTML5中,新增了時間輸入類型time,其含義為選取時間(小時和分鐘)。
time屬性的代碼格式如下。
<input type="time" name="user_date"/>
(1)編輯代碼
打開記事本,編寫代碼,在<body>標簽中加入以下代碼。并保存為HTML格式文件。
(2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示,用戶可以在表單中輸入標準的time格式,然后單擊【提交】按鈕。
今每個人的事情都變的越來越多了,沒有一個好的提醒工具,你會不會錯過很多,比如:交房貸、追劇、看球等等,我們知道手機上的日歷,時鐘,都能提醒我們,可是作為程序員的我們,是不是也該嘗試一下,弄一個日歷處理?
首先明確,我們需要什么功能:通過日歷來展示我們的待辦事項?
如果從頭寫,是不是有點費時?這里,我們推薦一個jQuery插件:FullCalendar
我們先目的一下它的風采吧。
首先,FullCalendar最大的特點是,可以全日歷上拖放的,比如:我5月19號添加的備忘,可以拖放到5月31號上。添加的備忘事件還可以跨好幾天來拖放,真的很方便。
那么FullCalendar是什么?
嚴格的說,它是一個開源的,并可定制的JavaScript事件日歷,支持全尺寸拖放。
這里有個比較重要的聲明:它是一個很好的活動展示庫,不是一個完整的事件管理解決方案,就是說不能修改活動事件的名稱。你需要通過它的JS函數和配置等來設置。
那么如何獲取它?
你可以通過github來搜索FullCalendar,它也有官網可以查看各種示例(當然也包括Google日歷的Style)
那么它的兼容性如何?
它支持Firefox、Chrome、Safari、IE9+等所有現代瀏覽器。它依賴于jQuery 2.0.0+、Moment 2.9.0+(這是一個對日歷和時間進行解析、驗證、操作、顯示的js庫)
那么如何使用它呢?
通過上圖的Head部分引用,Script,Html,就可以完成一個日歷的展示了。
至此,這個開源的日歷庫就介紹完了,如果工作中有需要,它是個不錯的選擇。看文章累了嗎?來張圖片養養眼?(圖片來源網絡,如有侵權請告知。)
圖片來自網絡,如有侵權請告知,我們會盡快刪除。謝謝。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。