Calendar 日历控件使用

最新推荐文章于 2021-01-17 15:04:46 发布

转载最新推荐文章于 2021-01-17 15:04:46 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/beyang/p/4814682.html

本文介绍如何利用Calendar.js插件实现网页上的日期选择功能，包括基本配置、样式定制及与其他插件的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先引入 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>

转载于:https://www.cnblogs.com/beyang/p/4814682.html