Bootstrap時(shí)間日期插件推薦——bootstrap-datepicker

參考網(wǎng)站：http://www.58img.com/framework/813

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

下面我就實(shí)例講一下如果將這個(gè)插件加入到我們的Flask框架里(WTF)。

HTML頁面的相關(guān)代碼

在我們自己的基礎(chǔ)模板(base.html)上加入如下代碼：

{%?block?head?%}

{{?super()?}}

{%?endblock?%}

{%?block?scripts?%}

{{?super()?}}

{%?endblock?%}

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

然后我們?cè)谌掌谳斎肟虻捻撁胬锩婕尤朐摬寮ook_photo.html

{%?block?scripts?%}

{{?super()?}}

$('#date').datepicker({

weekStart:?1,

autoclose:?true,

daysOfWeekHighlighted:?"0,6",

format:?"yyyy/mm/dd",

language:?"zh-CN"

});

{%?endblock?%}

里面具體的參數(shù)可以參考該插件的文檔。

這里推薦一個(gè)該插件的在線代碼生成器地址：在線代碼生成

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

class?BookForm(Form):

name?=?StringField('姓名',?validators=[DataRequired()])

phone?=?StringField('電話',?validators=[DataRequired()])

photoset?=?SelectField('套系',?choices=[('SET1',?'1'),?('SET2',?'2')])

date?=?DateField('預(yù)約時(shí)間',?default='',?validators=[DataRequired()],?format='%Y/%m/%d',?widget=DatePickerWidget())

submit?=?SubmitField("預(yù)定")

里面的預(yù)約時(shí)間的變量為date所以通過

{{?wtf.quick_form(form)?}}

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

Python代碼

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

booker?=?BookForm()

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

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

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

總結(jié)

以上是生活随笔為你收集整理的python选择日期控件_Flask学习笔记-使用bootstrap-datepicker实现页面日期选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。