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 ...
随机推荐
- OpenCV 之 图像分割 (一)
1 基于阈值 1.1 基本原理 灰度阈值化,是最简单也是速度最快的一种图像分割方法,广泛应用在硬件图像处理领域 (例如,基于 FPGA 的实时图像处理). 假设输入图像为 f,输出图像为 g,则经 ...
- 为实体类增加toJSON方法
后期子类继承该基础类即可. package com.lichmama.test; import java.io.Serializable; import java.lang.reflect.Field ...
- (转载)VB 查询Oracle中blob类型字段,并且把blob中的图片以流的方式显示在Image上
原文摘自:http://heisetoufa.iteye.com/blog/ '模块代码 Private Declare Function CreateStreamOnHGlobal Lib &quo ...
- ARP欺骗分析
(作者原创,欲转载请说明出处)1.arp介绍 arp:地址解析协议;将IP地址映射为MAC地址.2.为什么要有arp 平时上网我们都知道要有一个IP地址才能上网,那arp用来干嘛的呢?如果 ...
- dashDB - Creating a table with CLOB column type
In order to create a table with clob column type, the table has to be created with "ORGANIZE BY ...
- HTML5 服务器推送事件(Server-sent Events)
服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...
- js 设置下拉框的默认值
设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...
- HashMap源码浅析(jdk1.8)
HashMap是以key-value键值对的形式进行存储数据的,数据结构是以数组+链表或红黑树实现. 数据结构图如下: 一.关键属性 HashMap初始化和方法使用的属性. /** * 默认初始容量1 ...
- STL—vector空间的动态增长
vector空间的动态增长 当添加元素时,如果vector空间大小不足,则会以原大小的两倍另外配置一块较大的新空间,然后将原空间内容拷贝过来,在新空间的内容末尾添加元素,并释放原空间.vect ...
- JS - JSON.stringify