How to make datetime picker through layDate component-JS Tutorial-php.cn

How to make datetime picker through layDate component

清浅

Release： 2021-04-20 14:59:46

Original

3361 people have browsed it

How to make a date and time picker through the layDate component: first download the layDate component from the official website; then import the laydatejs file externally; and finally call the method directly to complete the effect of the date and time picker.

How to make datetime picker through layDate component

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

First download the layDate component from the official website, then introduce the laydatejs file externally, and finally call the method directly to complete the effect of the date and time selector

For most browsers, date and time The picker control displays the native date and time picker that comes with the browser. This means that when users browse the browser, they will see different date and time pickers. What I will share with you today is a case of making a date picker effect

layDate date and time component

The layDate group is one of the three components independently maintained by layui. It contains five types of selection methods: year selector, year and month selector, date selector, time selector, date and time selector, and all support range selection

(1) Download layDate Component

Download address:https://www.layui.com/laydate/

How to make datetime picker through layDate component

（ 2) External reference to laydate.js file

<script src="./layDate-v5.0.9/laydate/laydate.js"></script>

Copy after login

(3) Program code

<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>

Copy after login

Rendering:

How to make datetime picker through layDate component

Summary: A simple date and time selector is ready here. I hope that through this article, everyone can have a preliminary understanding of the layDate component

The above is the detailed content of How to make datetime picker through layDate component. For more information, please follow other related articles on the PHP Chinese website!