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

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

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

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

HTML頁面的相關代碼

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

{%?block?head?%}

{{?super()?}}

{%?endblock?%}

{%?block?scripts?%}

{{?super()?}}

{%?endblock?%}

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

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

{%?block?scripts?%}

{{?super()?}}

$('#date').datepicker({

weekStart:?1,

autoclose:?true,

daysOfWeekHighlighted:?"0,6",

format:?"yyyy/mm/dd",

language:?"zh-CN"

});

{%?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('日期格式')”

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。