文档章节

jquery日历插件

上官胡闹
 上官胡闹
发布于 2016/03/24 23:01
字数 373
阅读 186
收藏 0

这是在14年工作的时候写的一个日历插件,当时其实是想去网上找一个界面好看,而且有方便改代码的插件,那时候比较笨,没有找到想要的,后来就自己写了一个,但我不擅长于写样式,写完后后发现还是不好看,用了一段时间后发现laydate,现在项目里基本都使用laydate日历插件了。我写的这个是有很多功能不完善的。在这里主要是分享出来给初学jquery的同学参考下。效果图

这个界面有的人会觉得似曾相识,其实css是参考的,具体出自哪里就不记得了,

js源代码:http://git.oschina.net/sunyurepository/javascript

用例:

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
   <link rel="stylesheet" href="meCalendar.css">
    <script src="../jquery-1.11.1.min.js" type="text/javascript"></script>  
   <script src="jquery-calendar-v3.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function(){
         $("#mydate").calendar({
            format:'yyyy-MM-dd',//默认格式yyyy-MM-dd
            beginYear:2014,
            endYear:2030,
            max:new Date(),//最大时间设置只能为Date,默认不设置
            istoday:true  //设置初始时间为今天
            //callBack:back1 //回调
         });
         $("#mydate1").calendar({
            format:'yyyy年MM月dd',
            beginYear:2000,
            endYear:2020,
            min:new Date(),
            //callBack:back2
         
         });
         $("#mydate2").calendar({
            format:'yyyy年MM月dd',
            beginYear:2015,
            endYear:2020,
            min:new Date(),
            //callBack:back2
         });
      });
      function back1(time){
         //console.log("first invoded:"+time);
      }
      function back2(time){
         //console.log("second invoded:"+time);
      }
   </script>
</head>
<body>
   <input type="text" id="mydate" placeholder="日期"/>
   <input type="text" id="mydate1" placeholder="日期"/>
   <input type="text" id="mydate2" placeholder="日期"/>
   
</body>
</html>

 

© 著作权归作者所有

上官胡闹
粉丝 58
博文 83
码字总数 59788
作品 1
成都
程序员
私信 提问
给开发者准备的 10 款最好的 jQuery 日历插件

这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中。这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的...

oschina
2014/01/27
51.5K
10
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
571
2
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6
5 款最新的 jQuery 图片裁剪插件

这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能。 Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能。Cropit 通过 FileReader...

oschina
2014/11/06
68.4K
16
使用 Grails 与 jQuery 创建 Web Calendar

Grails 是一套用于快速 Web 应用开发的开源框架,它基于 Groovy 编程语言,并构建于 Spring、Hibernate 和其它标准 Java 框架之上,从而为大家带来一套能实现超高生产力的一站式框架。 jQue...

红薯
2010/06/25
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部