Question

我尝试实施this解决方案来创建带有数据选择器的表单字段。该字段出现，但不显示日历。这是一个常规输入字段。我不知道我是否遗漏了任何包含内容。你能帮忙吗？

我的forms.py:

class CreateProjectForm(forms.Form):
    project_expiration = forms.DateField(widget=forms.TextInput(attrs={'class':'datepicker'}))

    def __init__(self, *args, **kwargs):
        super(CreateProjectForm, self).__init__(*args, **kwargs)
        self.fields['project_expiration'].label = "Expiration Date:"

我的模板：

    {% for field in form %}

    <div class="form-group">
        <div class="col-sm-3">
            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
        </div>

         <div class=" col-sm-9">
            {{field}}
        </div>
    </div>

    {{field.non_field_errors }}
    {{field.errors}}

    {% endfor %}

更新：同样在我的模板中：

<script>
  $(function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1900:2012",
      });
  });
</script>

我的包括：

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

Answer 1

请确保在结束</body>标记之前放置内联JavaScript。它应该在它应该生效的html之后以及它所依赖的js文件之后。

Answer 2

要使datepicker初始化代码起作用，它必须放在带有datepicker类的HTML标记之后（建议在body标记的末尾），或者必须用以下内容包装：

$(document).ready(function() {
    // YOUR INITIALIZATION CODE HERE
});

因此，当您的输入标记已经由浏览器呈现并且可以在其上应用任何javascript时，它将被执行。

django数据输入中的Datapicker

2 个答案: