CODEWITHSUNDEEP
twitter-bootstrapweb2py
aka_007
aka_007

Reputation: 41

How to integrate bootstrap datepicker with custom forms of web2py?

I am using the bootstrap form from .... http://tarruda.github.io/bootstrap-datetimepicker/ but how do I combine it with the custom form of web2py?

Upvotes: 2

Views: 1519

Answers (1)

Anthony
Anthony

Reputation: 25536

The best option is probably to define a custom widget. Not tested, but something like this:

def bootstrap_datetime(field, value):
    input = INPUT(_name=field.name, _type='text',
                  _id='%s_%s' % (field.tablename, field.name),
                  data=dict(format='dd/MM/yyyy hh:mm:ss'),
                  value=str(value) if value is not None else '',
                  requires=field.requires)
    return DIV(input,
               SPAN(I(data={'time-icon': 'icon-time',
                            'date-icon': 'icon-calendar'})),
               _class='input-append date')

db.define_table('mytable',
    Field('myfield', 'datetime', widget=bootstrap_datetime),
    ...)

Then in the view, you can do:

{{=form}}

to get the standard form, or if you want to customize the layout, to display the datetime widget, you would do:

{{=form.custom.widget.myfield}}

You'll also need to load the datetimepicker module on the page and include something like this:

<script type="text/javascript">
  $(function() {
    $('div.date').datetimepicker({
      language: 'en',
      pick12HourFormat: true
    });
  });
</script>

Upvotes: 1

Related Questions