jquery.cxcalendar 插件基本使用
<link href="~/Content/Calendar/css/jquery.cxcalendar.css" rel="stylesheet" />
<label>
选择年份
</label>
<select id="timeselect">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<label>选择日期</label>
<input type="text" data-start-date="2000" data-end-date="2019" data-format="YYYY/M/D" id="time1" />-<input type="text" id="time2" />
<script src="~/Content/assets/global/plugins/jquery.min.js"></script>
<script src="~/Content/Calendar/js/jquery.cxcalendar.min.js"></script>
<script src="~/Content/Calendar/js/jquery.cxcalendar.languages.js"></script>
<script type="text/javascript">
$(function () {
$("#timeselect").val(new Date().getFullYear());
var time1 = $("#time1");
var time2 = $("#time2");
time1.cxCalendar(function (api) {
time1Api = api;
time1Api.setOptions({
type: 'date',
format: 'YYYY-MM-DD',
baseClass: 'cxcalendar_notsecs',
});
});
time2.cxCalendar(function (api) {
time2Api = api;
time2Api.setOptions({
type: 'date',设置为datetime 会精确到分钟
format: 'YYYY-MM-DD',
baseClass: 'cxcalendar_notsecs'
});
});
time1.bind('change', function () {//联动
var vartime1 = parseInt(time1Api.getDate('TIME'), 10);
var timedate = time1Api.getDate('YYYY-MM-DD');
var vartime2 = parseInt(time2Api.getDate('TIME'), 10);
if (vartime2 < vartime1) {
time2Api.clearDate();
};
time2Api.setOptions({
startDate: startTimeDate
});
time2Api.show();
})
//$("#time1").cxCalendar();
});
</script>
jquery.cxcalendar 插件基本使用的更多相关文章
- jQuery cxCalendar 日期选择器
简介 cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
随机推荐
- Android源码博文集锦2
Android精选源码 android简单易用的Gallery android漂亮的加载效果 这可能是RxJava 2.x 最好的入门教程示例代码 android图片可拖拽排序 android用几行代 ...
- js几秒以后倒计时跳转示例
代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css ...
- mysql数据库左联的使用(一张数据库表关联到另外一张数据库表)
左联的数据库表,然后显示的在页面显示的jsp里面改一下代理种类ID的name,这样在页面上显示的不是id了,而是变成你修改了以后相对于的name了
- 关于SQL经典题
最近刚刚练过的一道sql分享给大家, 先上题目: -- 部门表 CREATE TABLE DEPT( DEPTNO INT PRIMARY KEY, -- 部门编号 DNAME VARCHAR(14) ...
- 基于Entity Framework的自定义分页,增删改的通用实现
简介 之前写个一个基于Dapper的分页实现,现在再来写一个基于Entity Framework的分页实现,以及增删改的通用实现. 代码 还是先上代码:https://github.com/jinwe ...
- iOS开发实战-基于SpriteKit的FlappyBird小游戏
写在前面 最近一直在忙自己的维P恩的事情 公司项目也是一团乱 于是...随手找了个游戏项目改了改就上线了,就当充数了. SpriteKit简介 SpriteKit是iOS 7之后苹果推出的2D游戏框架 ...
- 【css】盒子模型 之 弹性盒模型
参考: http://caibaojian.com/flexbox-guide.html 待补充啊
- js一些重点知识总结(一)
1.javaScript与java的区别?(从它们的解释,运行等方面说) 第一,javascript是基于对象的,而java是面向对象,即java是一种真正的面向对象的语言,即使是开发简单的程序, ...
- PHP 调用 Go 服务的正确方式 - Unix Domain Sockets
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...