1)时间插件:bootstrap-datepicker
下载地址:https://www.bootcdn.cn/bootstrap-datepicker/
下载并引入以下三个文件:
- bootstrap-datepicker.css
- bootstrap-datepicker.js
- bootstrap-datepicker.zh-CN.min.js
然后指定需要更改的标签id即可:
function initDatePicker() {
$('#id_start_date,#id_end_date').datepicker({
format:'yyyy-mm-dd',
startDate: '0' ,
language: "zh-CN",
autoclose: true,
});
}
2)选择插件:bootstrap-select
下载地址:http://silviomoreto.github.io/bootstrap-select/
下载并引入以下三个文件:
- bootstrap-select.css
- bootstrap-select.js
- i18n/defaults-zh_CN.js
然后,指定的标签增加如下属性:
class = "selectpicker" # 添加一般样式
data-live-search = 'ture' # 添加搜索
data-actions-box = 'ture' # 添加全选/取消全选
... 更多设置见下面链接参考
参见:https://www.cnblogs.com/likui-bookHouse/p/11906278.html
注意:
在bootstrap中,可用老办法 Froms 将 标签对应属性添加:
# Froms.py
class IssuesMedalForm(BootstrapForm,forms.ModelForm):
class Meta:
model = models.Issues
exclude = ['project','creator','create_datetime','latest_update_datetime']
widgets = {
'assign':forms.Select(attrs={
'class':'selectpicker',
'data-live-search':'ture'}),
'attention':forms.SelectMultiple(attrs={ # 如果表格是多选,则使用 SelectMultiple
'class':'selectpicker',
'data-live-search':'ture',
'data-actions-box':'ture'}),
}