本文類似實現(xiàn)一個組件, 只需要在需要的模板文件中的引入文件, 即可對所有class為cxcalendar的input實現(xiàn)日期選擇功能

1. 需要jquery庫
2. 將四個文件路徑設(shè)置為
   . /static/css/jquery.cxcalendar.css
   . /static/js/jquery.cxcalendar.min.js
   . /static/js/jquery.datetimepicker.full.js
   . /static/css/jquery.datetimepicker.css
3. 制作一個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>

4. 在模板文件中, 只要引入{% include "cxcalendar.html" %}
   給需要增加日期選擇的input框添加cxcalendar類即可

相關(guān)js文件下載 !!!下載!!!

效果如圖

Paste_Image.png