首页 > 其他分享> 文章详细

织梦Calendar日历时间控件使用教程

2020-12-06 09:32:06 阅读：178 来源： 互联网

标签：-% 控件文件 js 织梦 html Calendar dede css

在织梦网站表单里面有时候我们会用到时间，比如，我们制作表单时，可能让用户填写时间，如果手工填写会很麻烦，但是，如果用一个类似时间或称日历的图形让用户点一下，就可以把时间填写好，这样是不是非常棒。

日历时间用到的文件是：

js文件：/dede/js/calendar/calendar.js

css文件：/dede/js/calendar/calendar-green.css

上面这二个文件是必须引入到html文件里面的，这里我把html文件起名为demo.html，上面的js和css文件缺一不可,请把这个两个文件放到demo.html里面。

另外用到的图片文件是：/dede/images

还用到了一个css文件: /dede/css/base.css, 这个base.css文件可以不要，这个是用来设置在时间输入框中加入一个小图标，

案例代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>织梦时间控件使用</title>
<link rel="stylesheet" href="/js/calendar/calendar-blue.css"/>
<script src="/js/calendar/calendar.js"></script>
</head>
<body>
    
    <input type="text" name="time_start" id="time_start" class="date" size="12" >
                    -
    <input type="text" name="time_end" id="time_end" class="date" size="12" >
    
    

<script>
Calendar.setup({
    inputField : "time_start",
    ifFormat   : "%Y-%m-%d %H:%M:%S",
    showsTime  : true,
    timeFormat : "24"
});
Calendar.setup({
    inputField : "time_end",
    ifFormat   : "%Y-%m-%d %H:%M:%S",
    showsTime  : true,
    timeFormat : "24"
});

</script>

</body>
</html>

效果图如下：

日期：2020.12.6 lzb

标签：-%,控件,文件,js,织梦,html,Calendar,dede,css
来源： https://www.cnblogs.com/lazb/p/14091959.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

织梦Calendar日历时间控件使用教程