Flask學習筆記-使用bootstrap-datepicker實現頁面日期選擇 頂 原

Bootstrap時間日期插件推薦——bootstrap-datepicker

參考網站：http://www.58img.com/framework/813

這個插件的樣式個人覺得還是很不錯，而且可以功能也是比較全的，多語言的支持也很全面，中文化很方便。

下面我就實例講一下如果將這個插件加入到我們的Flask框架裏（WTF）。

HTML頁面的相關代碼

在我們自己的基礎模板（base.html）上加入如下代碼：

{% block head %}
    {{ super() }}
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
{% endblock %}

主要是引用插件的js和css代碼，其中.zh-CN.min.js是中文化的js

然後我們在日期輸入框的頁面裏面加入該插件book_photo.html

{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
    $('#date').datepicker({
        weekStart: 1,
        autoclose: true,
        daysOfWeekHighlighted: "0,6",
        format: "yyyy/mm/dd",
        language: "zh-CN"
    });
    </script>
{% endblock %}

裏面具體的參數可以參考該插件的文檔。

這裏推薦一個該插件的在線代碼生成器地址：在線代碼生成

裏面的'#date'選擇器是選擇的form表單中的日期輸入框，一般來說在WTF中就是你在後臺代碼中寫的變量名，例如：

class BookForm(Form):
    name = StringField('姓名', validators=[DataRequired()])
    phone = StringField('電話', validators=[DataRequired()])
    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])
    date = DateField('預約時間', default='', validators=[DataRequired()], format='%Y/%m/%d', widget=DatePickerWidget())
    submit = SubmitField("預定")

裏面的預約時間的變量爲date所以通過

{{ wtf.quick_form(form) }}

生成出來的表單域的name就是date

Python代碼

Form表單的定義在上面已經寫出來了，下面看一下如何獲取日期

booker = BookForm()
date=booker.date.data.strftime('%Y-%m-%d')

這個地方我也是弄了好久，需要注意獲取日期域需要將data數據轉換成字符串來接收“.strftime('日期格式')”

希望這邊文章可以幫到大家，謝謝。