Currency Inputs Using Bootstrap and Django Crispy Forms

A frequent requirement is to include a ‘$’ on currency inputs. Bootstrap has functionality to do this, but it is not easy to find in the docs. Here is an example:

Screenshot from 2015-03-09 10:12:04

Which is accomplished using:

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Cool… except how to get that markup using crispy? Turns out the creators of crispy have already figure it out. Here is an example:

from crispy_forms.layout import Layout
from crispy_forms.bootstrap import PrependedText

Layout('a field', 'another field', PrependedText('currency field', '$'))

Keepin’ it crispy!

Advertisements

One thought on “Currency Inputs Using Bootstrap and Django Crispy Forms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s