Search code examples
javascriptphptwitter-bootstrapdatepickerform-helpers

How to initialize Twitter bootstrap form-helper datepicker


I've been searching the internet on how to initialize a datepicker twitter bootstrap form helper, but I cant seem to find a tutorial for it. I already have the datepicker.js embeded, but I don't know how to initialize the js to the textbox I want it. How do I initialize the datepicker plugin?

EDIT:

I have added the text box for my datepicker:

        <div class="bfh-datepicker">
        <input  id="datepickers" type="text" class="datepicker">
        </div>

This is how I'm currently initializing it(not working)

$('#datepickers').bfhdatepicker('toggle');

Solution

  • Everything in your code is fine. Since you mentioned about datepicker.js embeded I'm giving my thoughts.

    There is no need of datepicker.js to be embedded separately because bootstrap-formhelpers.min.js will take care of it(that the specialty of bfh).

    Following the files are needed for Twitter bootstrap form helper.

    1. bootstrap.min.css v3.0.0
    2. bootstrap-formhelpers.min.css
    3. jQuery library v1.10.2
    4. bootstrap.min.js v3.0.0
    5. bootstrap-formhelpers.min.js

    See its working in JSFiddle

    Here is a official reference from whats to be included?

    BootstrapFormHelpers/
    |--- dist/
    |    |--- css/
    |         |--- bootstrap-formhelpers.css
    |         |--- bootstrap-formhelpers.min.css
    |    |--- img/
    |         |--- bootstrap-formhelpers-countries.flags.png
    |         |--- bootstrap-formhelpers-currencies.flags.png
    |         |--- bootstrap-formhelpers-googlefonts.png
    |    |--- js/
    |         |--- bootstrap-formhelpers.js
    |         |--- bootstrap-formhelpers.min.js