本文类似实现一个组件, 只需要在需要的模板文件中的引入文件, 即可对所有class为
cxcalendar的input实现日期选择功能
- 需要
jquery库 - 将四个文件路径设置为
./static/css/jquery.cxcalendar.css
./static/js/jquery.cxcalendar.min.js
./static/js/jquery.datetimepicker.full.js
./static/css/jquery.datetimepicker.css - 制作一个
cxcalendar.html文件, 路径在/templates/根目录下即可
代码内容为
<link rel="stylesheet" href="/static/css/jquery.cxcalendar.css" type="text/css" />
<script type="text/javascript" src="/static/js/jquery.cxcalendar.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css" type="text/css" />
<script>
$(function(){
$('.cxcalendar').cxCalendar();
});
</script>
- 在模板文件中, 只要引入
{% include "cxcalendar.html" %}
给需要增加日期选择的input框添加cxcalendar类即可
相关js文件下载 !!!下载!!!
效果如图
Paste_Image.png
