Question

我的网站上有一个视图，它使用几个Django表单来允许用户指定日期范围。我能够得到它，以便一个Django表单创建一个开始和结束字段，当用户点击这些字段时，会弹出一个日历窗口小部件（来自here），允许用户选择日期范围。但是，当用户选择日期范围并点击＆＃34; apply＆＃34;表单字段未更新。

修改

我使用的表单如下所示：

class DateRangeForm(forms.Form):
  def __init__(self, *args, **kwargs):
    initial_start_date = kwargs.pop('initial_start_date')
    initial_end_date = kwargs.pop('initial_end_date')
    required_val = kwargs.pop('required')

    super(DateRangeForm,self).__init__(*args,**kwargs)
    self.fields['start_date'].initial = initial_start_date
    self.fields['start_date'].required = required_val
    self.fields['end_date'].initial = initial_end_date
    self.fields['end_date'].required = required_val

  start_date = forms.DateField()
  end_date = forms.DateField()

它们使用的视图如下所示：

def table_search(request):
  initial_start = "2015/2"
  initial_end = "2015/222"
  message = {'last_url':'table_search'}

  if request.method == "POST":
    daterange_form = DateRangeForm(request.POST,required=True,initial_start_date=initial_start,initial_end_date=initial_end)

  else:
    daterange_form = DateRangeForm(required=True,initial_start_date=initial_start,initial_end_date=initial_end)
    search_dict.update({'daterange_form':daterange_form})

  return render(request, 'InterfaceApp/table_search.html', search_dict)

这里的Django模板：

<div class="container">
  <form action="/InterfaceApp/home/" method="post" class="form">
  {% csrf_token %}
    <div class="daterangepicker-container mcast-search-filter">
        <div class="daterangepicker-label">Date range:</div>
        <div id="daterange" class="daterangepicker-content">
            {% bootstrap_form daterange_form %}
            <i class="icon-calendar icon-large"></i>
        </div>
    </div>
  </form>
</div>
<script>
    // the start_date and end_date are the ids that django form fields created
    $("#daterange").daterangepicker({
        locale: {
          format: 'YYYY-MM-DD'
        },
        startDate: '{{daterange_form.start_date.value}}',
        endDate: '{{daterange_form.end_date.value}}'
    });
</script>

编辑2

目前这些表格（在@ShangWang建议之后）呈现：

有没有办法显示它，以便显示开始和结束日期字段？我尝试更改div类，因此它没有被隐藏，然后它们出现了，但似乎是多余的。

Answer 1

我使用bootstrap-daterangepicker：https://github.com/dangrossman/bootstrap-daterangepicker。它会将窗口小部件的更改绑定到您的django表单字段，因此一旦涉及views.py，您就不需要操作数据。

要获得更多详细信息，您应该下载并使用它，但这是一个粗略的想法：

你的form.py:

getFlashMode();

您的模板：

class DateRangeForm(forms.Form):
    start_date = forms.DateField()
    end_date = forms.DateField()

    def __init__(self, *args, **kwargs):
        # initialize the start and end with some dates

要触发小部件，您需要一个javascript绑定：

<div class="daterangepicker-container mcast-search-filter">                                                                             
    <div class="daterangepicker-label">Date range:</div>                                                                                
    <div id="daterange" class="daterangepicker-content">                                                                                
        <i class="icon-calendar icon-large"></i>                                                                                        
        <span></span> <b class="caret"></b>                                                                                             
    </div>                                                                                                                              
</div>                                                                                                                                  

<!-- This is a hidden div that holds your form fields -->                                                                                                                                           
<div class="hide">From {{ daterange_form.start_date }} to {{ daterange_form.end_date }}</div>

我创建了一个datepicker包装器，并定义了// the id_start_date and id_end_date are the ids that django form fields created $("#daterange").initDateRangePicker("#id_start_date", "#id_end_date");函数。您应该将以下代码放在名为initDateRangePicker的文件中，并将其导入模板中（或者只是将其复制到模板中）：

daterangepicker.js

将日历小部件添加到Django表单

1 个答案: