日期选择插件clndr的使用
需求是:在HTML中绘制日历直接供用户选择
而不是使用datepicker之类的表单插件让用户点击input后弹出datepicker让用户选择
浏览了一些解决方案后,发现 CLNDR 这个jQuery插件最漂亮
这名字取得确实晦涩,其实是“calendar”每个相隔字符的拼凑
效果如下:
要想迅速使用,还是比较困难的,文档少,全英文,只有github上一些简单的示例
现在就来总结归纳一下,实现上方这个简单的日历方法。(貌似简单,配置还是很多的)
首先去github上下载最新版本的 CLNDR
src文件夹中有clndr.js,但是我们不要用,用根目录下的clndr.min.js压缩版,毕竟我们只想敏捷开发,暂时不需要看源代码,轮子怎么造的我一点不关心啊。
另外我们还要准备两个为clndr服务的js文件,分别是 moment.js 和 underscore.js 当然jQuery你是必须要有的,我就不发连接了,这货毕竟是个jQuery插件。
在body的最后面引入这三个js,顺序是:(jQuery需要提前引入)
<script src="js/underscore.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/clndr.min.js"></script>
好了下面开始要显示日历了
HTML如下:(我用的amaze-ui做的响应布局)
<div class="am-u-lg-6 am-u-md-6 am-u-sm-12" style="height: 320px;">
<div id="full-clndr">
<script type="text/template" id="id_clndr_template">
<div class="clndr-controls">
<div class="clndr-previous-button"><<</div>
<div class="clndr-next-button">>></div>
<div class="month"><%= month %> <%= year %></div>
</div>
<div class="clndr-grid">
<div class="days-of-the-week">
<% _.each(daysOfTheWeek, function(day) { %><div class="header-day"><%= day %></div><% }); %>
</div>
<div class="days">
<% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div><% }); %>
</div>
</div>
</script>
</div>
</div>
中间一段是template模板,根据CLNDR的demo和文档设计的,感兴趣的话还是去读英文吧,如果没什么特别的要求就可根据我这个来。
值得注意的是each语法是 underscore.js 提供的,但是千万中间不要加换行或者空格,否则div会乱,这是因为display:inline-block有个默认空白,有这样的左右空白的话,子div的宽度加起来会超过父div,导致日历排版混乱,原版的clndr是使用float来解决的,但是我很讨厌float,就重新设计了clndr的样式表,我把我的精简后的样式表贴出来:
#full-clndr {
width: 100%;
max-width: 600px;
margin: 10px auto;
background-color: #CCC;
}
#full-clndr .clndr-controls {
color: white;
text-align: center;
background-color: #414141;
border: 1px solid #6A6A6A;
/* 日历标题样式 */
}
#full-clndr .clndr-controls .clndr-previous-button {
float: left;
text-align: left;
margin-left: 50px;
}
#full-clndr .clndr-controls .clndr-next-button {
float: right;
text-align: right;
margin-right: 50px;
}
#full-clndr .clndr-controls .clndr-previous-button,
#full-clndr .clndr-controls .clndr-next-button {
width: 30px;
cursor: pointer;
}
#full-clndr .clndr-controls .clndr-previous-button:hover,
#full-clndr .clndr-controls .clndr-next-button:hover {
opacity: 0.5;
}
#full-clndr .clndr-grid {
width: 100%;
}
#full-clndr .clndr-grid .days-of-the-week {
width: 100%;
background-color: #0D70A6;
}
#full-clndr .clndr-grid .days-of-the-week .header-day {
width: 14.28%;
padding: 0px;
margin:0px;
text-align: center;
color: white;
display: inline-block; /* 日期头样式 */
}
#full-clndr .clndr-grid .days {
width: 100%;
}
#full-clndr .clndr-grid .days .day,
#full-clndr .clndr-grid .days .empty {
width: 14.28%;
height: 40px;
text-align: center;
line-height: 40px;
color: #000;
background-color: #CCC;
display: inline-block;
/* 日期样式 */
}
#full-clndr .clndr-grid .days .day.event .day-number,
#full-clndr .clndr-grid .days .empty.event .day-number {
padding-bottom: 4px;
border-bottom: 2px solid #3883a3;
}
#full-clndr .clndr-grid .days .day.adjacent-month .day-number,
#full-clndr .clndr-grid .days .empty.adjacent-month .day-number {
opacity: 0.3;
}
#full-clndr .clndr-grid .days .today {
background-color: #AAA;
}
#full-clndr .clndr-grid .days .past:hover{
background-color: #999;
}
#full-clndr .clndr-grid .days .today:hover{
background-color: #999;
}
.focusIn{
background-color:#0D70A6 !important;
}
这样在HTML头部引入这个样式表后,就可以使用js函数让指定的那个div显示成日历了
代码如下:
$("#full-clndr").clndr({
template: $('#id_clndr_template').html(),
clickEvents: {
onMonthChange: function(month) {
// TODO: 这边写月份改变事件,控制底部线条图的变化
},
click: function(target){
var dateDom = $(target.element);
if((!dateDom.hasClass("focusIn")) && (dateDom.hasClass("past") || dateDom.hasClass("today"))){
$(".focusIn").removeClass("focusIn");
dateDom.addClass("focusIn");
// TODO: 这边写日期改变的事件,控制右边环形图的变化 }
},
},
daysOfTheWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
forceSixRows : true,
adjacentDaysChangeMonth : true,
});
日期选择插件clndr的使用的更多相关文章
- 贴近用户体验的jQuery日期选择插件
分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 var dateRange = new ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- 移动设备日期选择插件(基于JQUERY)
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
- EasyUI 日期选择插件封装成选择到月份的插件
将普通的日期选择插件封装成选择到月份的插件: var nowMonth = new Date(); var month = ...
- 【jquery】多日期选择插件easyui date
1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...
- angular2+ 引用layDate日期选择插件
layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择 在angular项目中引用layDate 1. 首先官网下载layDate独立版, ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)
不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...
- Vue中的v-model与my97日期选择插件冲突
Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text&q ...
随机推荐
- Using Hooks
The following code examples demonstrate how to perform the following tasks associated with hooks: In ...
- 正确使用HTML title属性
如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显示,那么请使用title属性. 细节 HTML的title属性本身有问题.之所以有问题是因为它在一些重要的方面表现的不够好,尽 ...
- chapter 2
1.分片:序列变量,字符串,列表,元组,集合..都可以使用分片来访问指定的数据项,分片三种方式:seq[]访问某个数据项,seq[-1]表示访问序列最后一个数据项,seq[-2]倒数第二个数据项. s ...
- iOS后台运行
http://www.cocoachina.com/bbs/read.php?tid=149564 文一 我从苹果文档中得知,一般的应用在进入后台的时候可以获取一定时间来运行相关任务,也就是说可以在后 ...
- JS中 判断null
以下是不正确的方法: var exp = null; if (exp == null) { alert("is null"); } exp 为 undefined 时,也会得到与 ...
- **关于PHP如何定义一个空对象(REST API如何处理空对象和空数组)
在写接口的过程当中,手机端有需求说不让返回json数组,要返回一个对象. 那么我们可以怎么做呢? 其实很简单,强制转换即可. 声明空对象: $empty_object=(object)array(); ...
- WCF分布式开发步步为赢(4):WCF服务可靠性传输配置与编程开发
今天继续WCF分布式开发步步为赢系列的第4节:WCF服务可靠性传输配置与编程开发.这个章节,我们要介绍什么是WCF服务的可靠性传输,随便介绍网络协议的概念,Web Service为什么不支持可靠性传出 ...
- [转载] ACE 组播校验和出错问题解决
源地址:http://yuanmuqiuyu2000.blog.sohu.com/140904942.html 使用ACE框架写了个组播简单的测试工具,但是测试过程中,总是发现udp校验和出错的信息. ...
- socket传输过程
连接过程: 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. (1)服务器监听:是服务器端套接字并不定位具体的客户端套接字,而是处 ...
- 重温《js权威指南》 第7,8章
第七章 数组 数组是值的有序集合.js数组是无类型的,数组元素可以是任意类型,同一个数组中不同元素也可能有不同的类型.数组可以动态增长或缩减,创建时无须生命那个一个固定的大小并且数组大 ...