使用 lyzCalendar jQuery 插件实现日期选择输入框
本教程将介绍如何利用第三方 jQuery 插件 lyzCalendar，实现日期选择输入框。
1. 引入 jQuery 库和 lyzCalendar 插件库
<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
<link href='https://cdn.bootcss.com/lyzCalendar/3.0/css/lyz.calendar.css' rel='stylesheet'>
<script src='https://cdn.bootcss.com/lyzCalendar/3.0/js/lyz.calendar.min.js'></script>
2. 添加日期选择输入框
<input type='text' id='date' name='date'>
3. 初始化 lyzCalendar 插件
$(function () {
$('#date').calendar();
});
4. 完整代码示例
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>日期选择输入框</title>
<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
<link href='https://cdn.bootcss.com/lyzCalendar/3.0/css/lyz.calendar.css' rel='stylesheet'>
<script src='https://cdn.bootcss.com/lyzCalendar/3.0/js/lyz.calendar.min.js'></script>
</head>
<body>
<input type='text' id='date' name='date'>
<script>
$(function () {
$('#date').calendar();
});
</script>
</body>
</html>
现在你已经成功地创建了一个日期选择输入框。用户可以通过点击输入框，打开日历选择器，选择想要的日期。
原文地址: https://www.cveoy.top/t/topic/nqpD 著作权归作者所有。请勿转载和采集!