datepicker总结~日历控件的简单实现~

介绍

由于对日历控制的各种调查,我想出了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条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册