脆皮表单字段类型属性被忽略

问题描述

我正在尝试在我的django应用程序中使用酥脆形式，但似乎无法在字段上设置type属性。

#forms.py
class ReminderForm(ModelForm):

    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        self.helper=FormHelper()
        self.helper.layout = Layout(
            Fieldset('Reminder',Row(
                    Div(Field('message'),css_class="col"),),Row(
                    Div(Field('messagetype'),css_class="col-md-6"),Div(Field('account'),Row(
                    Div(Field('reminddate',type="date"),Div(Field('duedate',)  
        )

    class Meta:
        model=Reminder
        exclude=['sentdate','confirmdate','completedate']

我的情态形式

{% load cms_tags crispy_forms_tags %}

<div class="modal fade" id="{{formid}}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form >
        {% crispy form %}
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

以下输入的呈现的html以type =“ text”显示提醒日期和到期日期样式

<div class="modal-body">
        <form>
 <fieldset> <legend>Reminder</legend> <div class="form-row "> <div class="col"> <div id="div_id_message" class="form-group"> <label for="id_message" class="">
                Message
            </label> <div class=""> <textarea name="message" cols="40" rows="10" class="textarea form-control" id="id_message"></textarea> </div> </div> </div>

</div>
<div class="form-row "> <div class="col-md-6"> <div id="div_id_messagetype" class="form-group"> <label for="id_messagetype" class="">
                Messagetype
            </label> <div class=""> <select name="messagetype" class="select form-control" id="id_messagetype"> <option value="">---------</option> <option value="email">Email</option> <option value="sms">Text Message</option> <option value="internal">Internal Website</option>

</select> </div> </div> </div>
<div class="col-md-6"> <div id="div_id_account" class="form-group"> <label for="id_account" class="">
                Account
            </label> <div class=""> <select name="account" class="select form-control" id="id_account"> <option value="" selected="">---------</option> <option value="4">jim.pm</option> <option value="2">joe.sp</option> <option value="3">sally.om</option> <option value="1">sparrow</option>

</select> </div> </div> </div>

</div>
<div class="form-row "> <div class="col-md-6"> <div id="div_id_reminddate" class="form-group"> <label for="id_reminddate" class=" requiredField">
                Reminddate<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="reminddate" class="datetimeinput form-control" required="" id="id_reminddate"> </div> </div> </div>
<div class="col-md-6"> <div id="div_id_duedate" class="form-group"> <label for="id_duedate" class=" requiredField">
                Duedate<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="duedate" class="datetimeinput form-control" required="" id="id_duedate"> </div> </div> </div>

</div> </fieldset> </form>

        
      </div>

rendred form

如何正确设置type属性？其他属性（自定义属性）也可以正常工作。

解决方法

哦，您想要type = date，这是一个棘手的事情……那么您应该制作自己的小部件，但是如果您像我一样懒惰，则可以使用模板过滤器来解决：

from django import forms
from django import template
from django.utils.safestring import mark_safe

register = template.Library()


@register.filter
def set_input_type(field,field_type=None):
  if field_type:
    pass
  elif isinstance(field.field.widget,forms.DateInput):
    field_type = 'date'
  elif isinstance(field.field.widget,forms.TimeInput):
    field_type = 'time'
  elif isinstance(field.field.widget,forms.SplitDateTimeWidget):
    for subfield in field.field.widget.widgets:
      if isinstance(subfield,forms.DateInput):
        subfield.input_type = 'date'
      elif isinstance(subfield,forms.TimeInput):
        subfield.input_type = 'time'
  elif isinstance(field.field.widget,forms.DateTimeInput):
    # field_type = 'datetime-local'  # can't work with passing/returning ISO format
    # field_type = 'datetime'  # is deprecated,doesn't work in many browsers
    # use widget=forms.SplitDateTimeWidget() instead
    pass

  if field_type:
    field.field.widget.input_type = field_type

  return field

因此您可以在模板中更改类型，例如

{{ form.dt|set_input_type:'date' }}

但是如果仅使用{% crispy form %}，则必须采用第一种方法（最好）并制作自己的小部件：）

另一种方法是使用JS，例如$('#id_reminddate').attr('type','date');

因为它们在桌面浏览器中很丑陋，所以它们可能使用type = text，所以您将jqueryui之类的JS库用作Callendars

,

@Martin Beran向我指出了正确的方向。由于我一直尝试使用{％crispy form％}方法，因此我发现使用Meta类中的小部件覆盖提供了我所需要的！

    class Meta:
        model=Reminder
        exclude=['sentdate','confirmdate','completedate']
        widgets = {
            'reminddate': forms.DateInput(attrs={'type':'date'}),'duedate': forms.DateInput(attrs={'type':'date'})
        }

Form with bootstrap date control