您的位置：首页 > 其它

Calendar 日历控件使用

2015-09-16 21:43 519 查看

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

运行一下吧

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航