前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 日期选择器 Pikaday 简介和使用

JavaScript 日期选择器 Pikaday 简介和使用

作者头像
Denis
发布2023-04-14 16:48:17
1.8K0
发布2023-04-14 16:48:17
举报
文章被收录于专栏:WordPress果酱WordPress果酱

用的最多的日期选择器的 JavaScript 库是基于 jQuery UI 的,但是这样的库在文件大小上是非常大的(压缩和最小化之后都还有50多K),这样是不太适合一些项目的。而今天介绍的 Pikaday 是一个非常简洁但是功能完善,并且样子还算不错的 JavaScript 库。

Pikaday 介绍

独立的日期选择器 JavaScript 库:Pikaday
独立的日期选择器 JavaScript 库:Pikaday

Pikaday 是一个 JavaScript 日期选择器,它不依赖于任何 Javascript 库,并且文件大小小于 5K,但是功能却一点不弱,可以进行高级定制。并且样式可以根据 CSS 进行更改选择器的设计,当然默认的样式已经非常不错了。

Pikaday 演示

RSS用户请点击这里参看演示

Pikaday 的简单使用

1. 首先创建如下的输入框:

代码语言:javascript
复制
<input type="text" id="datepicker">

2. 在页脚加载 Pikaday 的 Javascript 库和 CSS 文件,并调用 Pikaday:

代码语言:javascript
复制
<link rel="stylesheet" href="http://dbushell.github.com/Pikaday/css/pikaday.css">
<script src="http://dbushell.github.com/Pikaday/pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

如果网页已经加载了 jQuery 库,其中调用代码可以改成下面更简洁的方式:

代码语言:javascript
复制
var picker = new Pikaday({ field: $('#datepicker')[0] });

以上2步就完成了简单的 Pikaday 的使用。下载:Pikaday

汉化及高级用法请查看:JavaScript 日期选择器 Pikaday 的高级用法


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Pikaday 介绍
  • Pikaday 演示
  • Pikaday 的简单使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档