zoukankan      html  css  js  c++  java
  • Calendar 日历控件使用

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

      

  • 相关阅读:
    Linux shell(3)
    Linux shell 编写(2)
    Linux shell 编写(1)
    团队冲刺(一)
    峦码团队任务表
    电梯演讲&界面展示说明
    第一次小组会议——NABCD讨论
    开发项目&团队介绍
    Linux中查看各文件夹大小命令:du -h --max-depth=1
    shell脚本[] [[]] -n -z 的含义解析
  • 原文地址:https://www.cnblogs.com/beyang/p/4814682.html
Copyright © 2011-2022 走看看