datepicker总结~日历控件的简单实现~
时间:2022-12-28阅读:35来源:柠檬博客作者:柠檬博客
介绍
由于对日历控制的各种调查,我想出了datepicker,所以我决定写一篇文章。FullCalendar.js 也是一个免费版本,看起来你可以做各种各样的事情,所以很有趣,所以我将在另一篇文章中进行总结。
什么是日期选择器?jquery UI 库中包含的日历显示功能。
这种日历可以以低成本实现。
如何实现日期选择器jquery UI 可以用 CDN 实现。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
只需将这两行添加到源代码即可实现日期选择器。然后只需调用 datepicker 方法。
<h3>date pickerを試す</h3> <input type="text" id="currender_1"> <script> $('#currender_1').datepicker(); </script>
在这种状态下,日期选择器没有设置初始值。datepicker 有多种方法,setDate 用于设置初始值。
<script> const datetime = new Date(); const datetime_today = datetime.getFullYear() + "-" + (datetime.getMonth() + 1) + "-" + datetime.getDate(); $('#currender_1').datepicker({dateFormat: 'yy-mm-dd'}); $("#currender_1").datepicker("setDate", datetime_today); </script>
现在您可以从头开始输入值。
如果我解释代码的意图,使用 new Date() 生成 Javascript 日期对象。datetime.getMonth() + 1 的意图是值从 0 开始,所以加 1 以匹配实际月份。
日期选择器的日本化CDN也可以支持日语本地化(方便)。
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
只需在阅读前面介绍的CDN时将上述内容添加到源代码中,就可以将其翻译成日文。
日期选择器的设计变更为datepicker准备了各种设计,要更改设计,只需在读取CDN时更改代码即可。例如,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
只需更改上述代码的基本部分即可开始。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.min.css">
这将改变显示日历的设计。
在最后考虑到实现的低门槛,我觉得推荐使用 datepicker 来实现一个简单的日历控件。有很多选项,您还可以限制可以选择的时间段。
但是,在向日历添加日程等事件时,我觉得使用 FullCalendar.js 或我自己的创建会更好。
原创声明:本文系作者授权爱码网发表,未经许可,不得转载;
原文地址:https://www.likecs.com/show-308622741.html
35人参与,
0条评论
登录后显示评论回复