【Bootstrap】时间插件+选择插件使用

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'}),
        }