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

Question

我在我的网站上有一个视图，它使用几个 Django 表单来允许用户指定日期范围。我能够得到它，以便一个 Django 表单创建一个开始和结束字段，并且当用户单击这些字段时，一个日历小部件（从这里）弹出，允许用户选择一个日期范围。但是，当用户选择日期范围并点击“应用”时，表单字段不会更新。

编辑

我使用的表格如下所示：

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：

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

您的模板：

<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>

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

// the id_start_date and id_end_date are the ids that django form fields created
$("#daterange").initDateRangePicker("#id_start_date", "#id_end_date");

我创建了一个 datepicker 包装器，并定义了initDateRangePicker函数。您应该将以下代码放入一个名为的文件daterangepicker.js中，并将其导入您的模板中（或简单地将其复制到您的模板中）：

(function($) {                                                                                                                                      
    $.fn.initDateRangePicker = function(start_date_el, end_date_el, future) {                                                                       
        return this.each(function() {                                                                                                               
            var start = moment($(start_date_el).val());                                                                                             
            var end = moment($(end_date_el).val());                                                                                                 

            var display_date = function(start, end) {                                                                                               
                var str = ""                                                                                                                        
                str += start.format('MMMM Do, YYYY');                                                                                               
                str += " - ";                                                                                                                       
                str += end.format('MMMM Do, YYYY');                                                                                                 

                return str;                                                                                                                         
            };                                                                                                                                      

            $(this).find("span").html(display_date(start, end));                                                                                    
            var self = this;                                                                                                                        

            if(!future) {                                                                                                                           
                $(this).daterangepicker({                                                                                                           
                    format: 'YYYY-MM-DD',                                                                                                           
                    timePicker: false,                                                                                                              
                    ranges: {                                                                                                                       
                        'Last 7 days': [moment().subtract('days', 6), moment()],                                                                    
                        'Month to date': [                                                                                                          
                            moment().startOf('month'),                                                                                              
                            moment(),                                                                                                               
                        ],                                                                                                                          
                        'Last Month': [                                                                                                             
                            moment().subtract('month', 1).startOf('month'),                                                                         
                            moment().subtract('month', 1).endOf('month'),                                                                           
                        ]                                                                                                                           
                    },                                                                                                                              
                }, function(start, end) {                                                                                                           
                    $(start_date_el).val(start.format('YYYY-MM-DD'));                                                                               
                    $(end_date_el).val(end.format('YYYY-MM-DD'));                                                                                   

                    $(self).find("span").html(display_date(start, end));                                                                            
                });                                                                                                                                 
            }                                                                                                                                       
            else {                                                                                                                                  
                 $(this).daterangepicker({                                                                                                          
                    format: 'YYYY-MM-DD',                                                                                                           
                    timePicker: false,                                                                                                              
                    ranges: {                                                                                                                       
                        'Next 7 days': [moment().add('days', 1), moment().add('days', 7)],                                                          
                        'Next month': [                                                                                                             
                            moment().add('month', 1).startOf('month'),                                                                              
                            moment().add('month', 1).endOf('month'),                                                                                
                        ],                                                                                                                          
                    },                                                                                                                              
                }, function(start, end) {                                                                                                           
                    $(start_date_el).val(start.format('YYYY-MM-DD'));                                                                               
                    $(end_date_el).val(end.format('YYYY-MM-DD'));                                                                                   

                    $(self).find("span").html(display_date(start, end));                                                                            
                });                                                                                                                                 

            }                                                                                                                                       
        });                                                                                                                                         
    };                                                                                                                                              
}).call(this, jQuery);