Calendar 日历控件使用

最新推荐文章于 2020-12-09 11:02:34 发布
最新推荐文章于 2020-12-09 11:02:34 发布
阅读量384 收藏 1
点赞数

<link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/>

<script src="__STATIC__/js/calendar/calendar.js"></script>

首先引入 calendar.js  calendar-blue.css   文件 下载链接http://files.cnblogs.com/files/beyang/calendar.zip

 

在HTML 的body 标签下

 1 <input type="text" name="time_start" id="J_time_start" class="date" size="12" >
 2 -
 3 <input type="text" name="time_end" id="J_time_end" class="date" size="12" >
 4 
 5 <script>
 6 Calendar.setup({
 7 inputField : "J_time_start",
 8 ifFormat : "%Y-%m-%d",
 9 showsTime : false,
10 timeFormat : "24"
11 });
12 Calendar.setup({
13 inputField : "J_time_end",
14 ifFormat : "%Y-%m-%d",
15 showsTime : false,
16 timeFormat : "24"
17 });
18 $('.J_preview').preview(); //查看大图
19 $('.J_cate_select').cate_select({top_option:lang.all}); //分类联动
20 $('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});
21 </script>

 

运行一下吧

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/>

</head>
<body>
    
    <input type="text" name="time_start" id="J_time_start" class="date" size="12" >
                    -
    <input type="text" name="time_end" id="J_time_end" class="date" size="12" >
    
    
<script src="__STATIC__/js/calendar/calendar.js"></script>
<script>
Calendar.setup({
    inputField : "J_time_start",
    ifFormat   : "%Y-%m-%d",
    showsTime  : false,
    timeFormat : "24"
});
Calendar.setup({
    inputField : "J_time_end",
    ifFormat   : "%Y-%m-%d",
    showsTime  : false,
    timeFormat : "24"
});
$('.J_preview').preview(); //查看大图
$('.J_cate_select').cate_select({top_option:lang.all}); //分类联动
$('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});
</script>

</body>
</html>

 

效果图如下：

如果想要在input 标签右侧出现小图标：看下面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/>
<style type="text/css">
input.date,input.endDate{background: #fff url(__STATIC__/css/admin/bgimg/input_date.png) no-repeat right 3px; padding-right:18px;font-size:12px;}
</style>

</head>
<body>
	
    <input type="text" name="time_start" id="J_time_start" class="date" size="12" >
                    -
    <input type="text" name="time_end" id="J_time_end" class="date" size="12" >
	
	
<script src="__STATIC__/js/calendar/calendar.js"></script>
<script>
Calendar.setup({
	inputField : "J_time_start",
	ifFormat   : "%Y-%m-%d",
	showsTime  : false,
	timeFormat : "24"
});
Calendar.setup({
	inputField : "J_time_end",
	ifFormat   : "%Y-%m-%d",
	showsTime  : false,
	timeFormat : "24"
});
$('.J_preview').preview(); //查看大图
$('.J_cate_select').cate_select({top_option:lang.all}); //分类联动
$('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});
</script>

</body>
</html>

　　

 

weixin_34101784
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
calendar.js日历控件
01-15
日历控件calendar.js，用于javascript入门与提高的学习与参考
Qt 自定义 Calendar 日历控件
07-31
在本场景中，我们关注的是“Qt自定义Calendar日历控件”。这涉及到使用Qt库中的QCalendarWidget或者完全从头构建一个自定义的日历组件。通过自定义，我们可以更好地控制日历的显示、交互和样式，以适应应用程序的...
dhtmlx-calendar
忠麦一生
07-30 4306
项目中使用到了dhtmlxTree这个控件，所以在下班后了解了一下dhtmlx这个JavaScript 库。目前只是粗浅的看看，和写一些简单的Demo。先会用吧，下面就其中的一些组件做点总结。本篇博客就从calendar开始。 dhtmlx简介     dhtmlx是一套网页开发的JavaScript库，他提供了树、DataGrid、工具条等组件供开发人员使用；避免重复开发组件，缩短开发时
日历控件Calendar的使用
hongjiaoli的专栏
04-27 1086
                                     开始时间：                                                            class="Wdate" Width="150px">--%>                                 onBlur="this.className=t
织梦Calendar日历时间控件使用教程
青茶
12-09 454
在织梦网站表单里面有时候我们会用到时间，比如，我们制作表单时，可能让用户填写时间，如果手工填写会很麻烦，但是，如果用一个类似时间或称日历的图形让用户点一下，就可以把时间填写好，这样是不是非常棒。 日历时间用到的文件是： js文件：/dede/js/calendar/calendar.js css文件：/dede/js/calendar/calendar-green.css 上面这二个文件是必须引入到html文件里面的，这里我把html文件起名为demo.html，上面的js...
Calendar日历选择器的使用方法(转)
从小白做起。。。
03-06 764
是一款开源、功能強大、应用比较广泛的JS实现的日历。可以定制日期事件，定制日期链接。而且支持中文化。 官方地址：http://www.dynarch.com/projects/calendar/ 演示地址：http://www.dynarch.com/demos/jscalendar/ 将以下文件拷贝到“js/jscalendar/”文件夹下 calendar.js cale...
修改js Calendar日历控件 兼容IE9/谷歌/火狐
10-27
在JavaScript编程中，开发网页...对于js Calendar日历控件，我们需要关注DOM操作、事件处理以及样式定义等方面，确保在多种浏览器环境下都能正常工作。通过不断测试和调试，我们可以逐步提高控件的兼容性和用户体验。
calendar日历控件
02-28
calendar.js 可以直接使用，个人感觉用的还不错，在个人博客中有写了使用方法
日历控件 Click Calendar
06-02
日历控件在软件开发中扮演着重要角色，它为用户提供直观、易用的方式来选择日期。"Click Calendar"是一款专为提升用户体验设计的组件，广泛应用于各种桌面应用、Web应用和移动应用中。这款控件通常包含丰富的功能，...
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
- `examples/`：示例应用，演示如何使用日历控件。 - `tests/`：单元测试，确保控件功能正常。 - `docs/`：可能有相关的API文档或教程。 通过研究这些文件，开发者可以学习到如何创建自定义的QML日历控件，包括但不...
js 日期控件 calendar
09-04
格式很全，使用很简单的JS日期控件；封装好的js，一句代码引入日期控件，有示例
webcalendar.js控件及其使用说明
12-22
可在asp.net中任意使用，如果不会用的朋友，资源里面还附有说明，相当好使
周日历选择插件jcalendar_week
09-04
之前在网上想找一个简单易用的周日历选择插件，发现这种前端周日历插件很少，而且很多文章写的周的算法都不是统一的，所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法：每周以周日为起始，第一周以每年第一个星期四所在的周为第一周（网上找的好像这个算法比较正规） 实现的效果是在手机端，也可以在PC端用，毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用周日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数：1.日期)(返回类名字符串，多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数：1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和周的DOM部分可选择并跳转到指定年份和周。 插件提供的方法： //获取周第一天方法weekfirstdate(),传入年份和周数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几周getweeknum(),传入年,月,日（注:这里的月份从0开始） console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定周confirmweek(),传入年份和周数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();
多浏览器支持日历控件
10-08
支持多浏览器的JS日历控件,兼容主流浏览器IE6,7,8/FF/Chrome/Safria
CalendarView使用详细文档（一个很不错的日历控件）
热门推荐
bihansheng2010的博客
05-21 1万+
github地址：https://github.com/huanghaibin-dev/CalendarView CalendarView使用详细文档 日历控件定制是移动开发平台上比较常见的而且比较难的需求，一般会遇到以下问题： 性能差，加载速度慢，原因是各种基于GridView或RecyclerView等ViewGroup实现的日历，控件数太多，假设一个月视图界面有42个item，每个it...
Calendar日历对象
码上学习
11-22 2365
calendar可以设置相对时间，或者直接设置时间。这个用的比较多1：对象的获取 Calendar calendar = Calendar.getInstance(); System.out.println(calendar);java.util.GregorianCalendar [time=1511346308476,areFieldsSet=true,areAllFieldsSet=true,
Calendar日历选择器的使用方法
SunGod1129的专栏
06-25 1240
摘要：Calendar 日历选择器的使用方法 难度：简单 The DHTML / JavaScript Calendar  是一款开源、功能強大、应用比较广泛的JS实现的日历。可以定制日期事件，定制日期链接。而且支持中文化。 官方地址：http://www.dynarch.com/projects/calendar/ 演示地址：http://www.dynarch.com/de
Calendar--日历类
追梦的女孩博客
07-28 294
Calendar–日历类，在Date后出现，替换掉了许多Date的方法，该类将所有可能用到的时间信息封装为静态成员变量，方便获取。日历类就是方便获取各个时间属性的。 package demo01; import java.util.Calendar; /* java.util.Calendar类：日历类 Calendar类是一个抽象类，里面提供了很多操作日历字段的方法(YEAR、MONTH、DAY_OF_MONTH、HOUR) Calendar类无法直接创建对象使用，里面有一个静
WPF Calendar 日历控件 样式自定义
最新发布
05-17
WPF Calendar 日历控件提供了一些默认的样式，但是我们也可以通过样式自定义来实现更加个性化的显示效果。以下是一些常用的样式自定义方法： 1. 修改日历中日期单元格的样式 通过修改日历控件模板中的 DayButton 样式来实现。可以修改 DayButton 的背景色、字体颜色等属性，以及添加鼠标悬浮、选中等交互效果。 2. 修改日历中月份选择器的样式 通过修改日历控件模板中的 CalendarItem 样式来实现。可以修改 CalendarItem 的背景色、字体颜色等属性，以及添加鼠标悬浮、选中等交互效果。 3. 修改日历中年份选择器的样式 通过修改日历控件模板中的 CalendarItem 样式中的 PART\_DecadeViewButton 和 PART\_YearViewButton 样式来实现。可以修改按钮的背景色、字体颜色等属性，以及添加鼠标悬浮、选中等交互效果。 4. 修改日历的整体样式 通过修改日历控件模板中的 Calendar 样式来实现。可以修改 Calendar 的背景色、字体颜色等属性，以及添加鼠标悬浮、选中等交互效果。 以上是一些常用的样式自定义方法，可以根据具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值