<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 插件基本使用的更多相关文章

  1. jQuery cxCalendar 日期选择器

    简介 cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  5. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  6. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  7. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  8. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  9. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

随机推荐

  1. OpenCV 之 图像分割 (一)

    1  基于阈值 1.1  基本原理 灰度阈值化,是最简单也是速度最快的一种图像分割方法,广泛应用在硬件图像处理领域 (例如,基于 FPGA 的实时图像处理). 假设输入图像为 f,输出图像为 g,则经 ...

  2. 为实体类增加toJSON方法

    后期子类继承该基础类即可. package com.lichmama.test; import java.io.Serializable; import java.lang.reflect.Field ...

  3. (转载)VB 查询Oracle中blob类型字段,并且把blob中的图片以流的方式显示在Image上

    原文摘自:http://heisetoufa.iteye.com/blog/ '模块代码 Private Declare Function CreateStreamOnHGlobal Lib &quo ...

  4. ARP欺骗分析

    (作者原创,欲转载请说明出处)1.arp介绍    arp:地址解析协议;将IP地址映射为MAC地址.2.为什么要有arp    平时上网我们都知道要有一个IP地址才能上网,那arp用来干嘛的呢?如果 ...

  5. 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 ...

  6. HTML5 服务器推送事件(Server-sent Events)

    服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...

  7. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

  8. HashMap源码浅析(jdk1.8)

    HashMap是以key-value键值对的形式进行存储数据的,数据结构是以数组+链表或红黑树实现. 数据结构图如下: 一.关键属性 HashMap初始化和方法使用的属性. /** * 默认初始容量1 ...

  9. STL—vector空间的动态增长

    vector空间的动态增长     当添加元素时,如果vector空间大小不足,则会以原大小的两倍另外配置一块较大的新空间,然后将原空间内容拷贝过来,在新空间的内容末尾添加元素,并释放原空间.vect ...

  10. JS - JSON.stringify