首頁 > web前端 > js教程 > 如何透過layDate元件製作日期時間選擇器

如何透過layDate元件製作日期時間選擇器

清浅
發布: 2021-04-20 14:59:46
原創
3395 人瀏覽過

透過layDate元件製作日期時間選擇器的方法:首先在官網上下載layDate元件;然後外部引入laydatejs檔案;最後直接呼叫方法使用即可完成日期時間選擇器的效果。

如何透過layDate元件製作日期時間選擇器

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

先在官網上下載layDate元件,再外部引入laydatejs文件,最後直接呼叫方法使用就可以完成日期時間選擇器的效果

對於大多數瀏覽器來說,日期時間選擇器控制顯示瀏覽器隨附的本機日期和時間選擇器。也就是說當使用者瀏覽瀏覽器時,他們會看到不同的日期時間選擇器。今天將和大家分享的是日期選擇器效果製作的案例

layDate 日期與時間元件

layDate 群組是layui 獨立維護的三大元件之一,裡麵包含了年選擇器、年月選擇器、日期選擇器、時間選擇器、日期時間選擇器 五種類型的選擇方式,並且均支援範圍選擇

(1)下載layDate元件

下載網址:https://www.layui.com/laydate/

如何透過layDate元件製作日期時間選擇器

##( 2)外部引用laydate.js檔案

<script src="./layDate-v5.0.9/laydate/laydate.js"></script>
登入後複製

(3)程式碼

<body>
	<input type="text" id="text">
	<input type="text" id="text1">
	<script>
		laydate.render({
			elem:"#text",
			type:"date",
			theme:"#CD318E"
		});
		
		laydate.render({
			elem:"#text1",
			type:"time",
			theme: "#ccc"
		});
	</script>
</body>
登入後複製

效果圖:


如何透過layDate元件製作日期時間選擇器

總結:到這兒一個簡單的日期時間選擇器就做好了,希望透過這篇文章可以讓大家對layDate元件有初步的認識

以上是如何透過layDate元件製作日期時間選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板