django-bootstrap-datepicker-plus 3.0.5

先决条件

• python>；=3.3
• django>；=1.8
• 引导程序=3
• jquery=1.7.1

安装

通过pip安装小部件

pip install django-bootstrap-datepicker-plus

将bootstrap_datepicker_plus添加到settings.py文件中的INSTALLED_APPS列表中。

INSTALLED_APPS=[# Add the following'bootstrap_datepicker_plus',]

jQuery需要datepicker才能呈现，请确保模板中有jquery， 或者您可以通过将include_jquery选项设置为^{tt9}来使用jQuery包含在Bootstrap中$ 在您的settings.py文件中。 如果没有BOOTSTRAP3/BOOTSTRAP4设置块，则必须创建一个。

# Use BOOTSTRAP3 if you are using Bootstrap 3BOOTSTRAP4={'include_jquery':True,}

确保模板中有引导标记和forms.media标记， 它添加了呈现日期选择器所需的所有js和css资源。

{% load bootstrap4 %}       {# import bootstrap4/bootstrap3 #}
{% bootstrap_css %}         {# Embed Bootstrap CSS #}
{% bootstrap_javascript jquery='full' %}  {# Embed Bootstrap JS+jQuery #}
{{ form.media }}            {# Adds date-picker required JS and CSS #}

form.media标记仅用于泛型视图。如果你自己生成视图 将表单传递给render函数时，必须使用<your-form-variable>.media。 例如，在以下示例中，必须使用{{ my_form.media }} 而不是{{ form.media }}。

# File: views.pyfromdjango.shortcutsimportrenderfrom.formsimportUserFormdefcreate_user(request):user_form=UserForm()returnrender(request,'my_template.html',{'my_form':user_form})

自定义表单使用

# File: forms.pyfrombootstrap_datepicker_plusimportDatePickerInputfromdjangoimportformsclassToDoForm(forms.Form):todo=forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"}))date=forms.DateField(widget=DatePickerInput(format='%m/%d/%Y'))

模型表单使用

# File: forms.pyfrombootstrap_datepicker_plusimportDatePickerInputfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=['name','start_date','end_date']widgets={'start_date':DatePickerInput(),# default date-format %m/%d/%Y will be used'end_date':DatePickerInput(format='%Y-%m-%d'),# specify date-frmat}

日期选择器的类型

小部件包含您可能需要的所有类型的日期选择器。

# File: forms.pyfrombootstrap_datepicker_plusimportDatePickerInput,TimePickerInput,DateTimePickerInput,MonthPickerInput,YearPickerInputfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=['start_date','start_time','start_datetime','start_month','start_year']widgets={'start_date':DatePickerInput(),'start_time':TimePickerInput(),'start_datetime':DateTimePickerInput(),'start_month':MonthPickerInput(),'start_year':YearPickerInput(),}

实现日期范围选择器

可以链接日期选择器以选择日期范围或时间范围。

# File: forms.pyfrombootstrap_datepicker_plusimportDatePickerInput,TimePickerInputfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=['name','start_date','end_date','start_time','end_time']widgets={'start_date':DatePickerInput().start_of('event days'),'end_date':DatePickerInput().end_of('event days'),'start_time':TimePickerInput().start_of('party time'),'end_time':TimePickerInput().end_of('party time'),}

自定义选项

日期选择器可以通过向其传递选项进行自定义。 options将传递给javascript日期选择器实例，并在 Bootstrap Datepicker Options Reference。

# File: forms.pyfrombootstrap_datepicker_plusimportDatePickerInputfromdjangoimportformsclassEventForm(forms.ModelForm):classMeta:model=Eventfields=['name','start_date','end_date']widgets={'start_date':DatePickerInput(format='%m/%d%Y'),# python date-time format'end_date':DatePickerInput(options={"format":"MM/DD/YYYY",# moment date-time format"showClose":True,"showClear":True,"showTodayButton":True,}),}

注意：可以通过传递 python date-time format 作为格式参数（请参见示例中的开始日期），或通过传递 moment date-time format 作为选项（请参见示例中的结束日期）。 如果两者都指定了，则以选项中的力矩格式为准。