本文類似實現(xiàn)一個組件, 只需要在需要的模板文件中的引入文件, 即可對所有class為
cxcalendar的input實現(xiàn)日期選擇功能
- 需要
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/根目錄下即可
代碼內(nèi)容為
<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類即可
相關(guān)js文件下載 !!!下載!!!
效果如圖
Paste_Image.png
