Django Float Field input

Question

Which is the best way to create a django form field that accepts floats and has the same functionality as a NumberInput? What I mean with same functionality is that django's NumberInput has arrows right next to the input that can increase or decrease the number and it also accepts min_value and max_value. If I use a TextInput widget I won't get this functionality. If I use NumberInput widget it wont work with floats:

homework = forms.FloatField(
    required=False, max_value=10, min_value=0, 
    widget=NumberInput(
        attrs={'id': 'form_homework'}
    )
)

enter image description here

It doesn't include floats (i.e 5.5) when I click the + - buttons. Also, it doesn't show the float at all if I want to set the actual float (the homework's grade) as an initial value (using Jquery).

Any advice is welcome.

EDIT:

If I do:

class NumberInput(TextInput):
    input_type = 'number'

homework = forms.FloatField(
    required=False, max_value=10, min_value=0,
    widget=NumberInput(
        attrs={'id': 'form_homework', 'step': '0.1'}
    )
)

The 'step' attribute works but the max_value/min_value doesn't. If I do not define NumberInput that way and use the regular NumberInput, it doesn't work at all.

you will likely have to find a javascript that will implement this feature; there are a number that you can use that give options for what the up/down arrow will do (i.e. set the "step" size, i.e. 0.10 or 1.0, etc). — warath-coder
– warath-coder, Commented Jan 14, 2015 at 18:06
So.. yes I guess I can do with with Js, but I was wondering if there is a django widget or something. — Alejandro Veintimilla
– Alejandro Veintimilla, Commented Jan 14, 2015 at 18:30

Super Kai - Kazuya Ito · Accepted Answer · 2023-07-29 02:28:36Z

9

You can do this by including NumberInput with your form widget and setting step attribute

homework = forms.FloatField(
    required=False, max_value=10, min_value=0, 
    widget=forms.NumberInput(
        attrs={'id': 'form_homework', 'step': "0.01"}
    )
)

Difference from above answer is missing forms reference with NumberInput of form

edited Jul 29, 2023 at 2:28

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Aug 15, 2017 at 8:39

pbhstack

1,06014 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Super Kai - Kazuya Ito · Accepted Answer · 2023-07-29 02:30:54Z

5

Just specify "step" attribute as a widget attribute, this way:

homework = forms.FloatField(
    required=False, max_value=10, min_value=0, 
    widget=NumberInput(
        attrs={'id': 'form_homework', 'step': "0.01"}
    )
)

edited Jul 29, 2023 at 2:30

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Jan 14, 2015 at 20:16

matagus

6,2162 gold badges28 silver badges40 bronze badges

3 Comments

Alejandro Veintimilla Over a year ago

Thanks for your answer, It doesn't work though. Please look at the Edit.

thespacecamel Over a year ago

I think @matagus was suggesting to use django.forms.NumberInput, not create your own input with that name.

Pixel Over a year ago

For anyone wondering on @thespacecamel that means editing the code to look as follows - widget=forms.NumberInput(attrs=

Super Kai - Kazuya Ito · Accepted Answer · 2023-07-29 02:29:44Z

2

You can also do this by including TextInput with your form widget

homework = forms.FloatField(
    required=False, 
    widget=forms.TextInput(
        attrs={'type': 'number', 'id':'form_homework', 'min': '0', 'max':'10', 'step':'0.01'}
    )
)

edited Jul 29, 2023 at 2:29

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Aug 8, 2018 at 8:12

Nikolay Poshidaev

211 bronze badge

Comments

Super Kai - Kazuya Ito · Accepted Answer · 2023-07-29 02:27:38Z

0

You can use forms.NumberInput as shown below, then all work properly:

from django import forms

homework = forms.FloatField(
    required=False, max_value=10, min_value=0,
    widget=forms.NumberInput(
        attrs={'id': 'form_homework', 'step': 0.1}
    )
)

In addition, this code below also works properly:

from django import forms

homework = forms.FloatField(
    required=False,
    widget=forms.NumberInput(
        attrs={'id': 'form_homework', 'max': 10, 'min': 0, 'step': 0.1}
    )
)

edited Jul 29, 2023 at 2:27

answered Jul 29, 2023 at 2:20

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

Collectives™ on Stack Overflow

Django Float Field input

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related