title: Twitter Bootstrap Datepicker within modal window
body: <p>I am currently using the Twitter Bootstrap framework, and when using the modal windows I cannot get over js elements to work like datepicker or validation, though chosen and uniform render correctly. please see my modal window below:</p>
  
  <pre><code>  &lt;div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button class="close" data-dismiss="modal" type="button"&gt;×&lt;/button&gt;
            &lt;h3&gt;New Member Form&lt;/h3&gt;
          &lt;/div&gt;
          &lt;form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;&lt;input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="&gt;&lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="widget-content nopadding"&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_role"&gt;Role&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;select id="user_role" name="user[role]" style="display: none; " class="chzn-done"&gt;&lt;option value=""&gt;Select member role&lt;/option&gt;
                    &lt;option value="1"&gt;Player&lt;/option&gt;
                    &lt;option value="2"&gt;Coach&lt;/option&gt;
                    &lt;option value="3"&gt;Parent&lt;/option&gt;
                    &lt;option value="4"&gt;Manager&lt;/option&gt;
                    &lt;option value="5"&gt;Non-player&lt;/option&gt;&lt;/select&gt;&lt;div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "&gt;&lt;a href="javascript:void(0)" class="chzn-single"&gt;&lt;span&gt;Select member role&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "&gt;&lt;div class="chzn-search" style=""&gt;&lt;input type="text" autocomplete="off" style="width: 212px; "&gt;&lt;/div&gt;&lt;ul class="chzn-results"&gt;&lt;li id="user_role_chzn_o_0" class="active-result result-selected" style=""&gt;Select member role&lt;/li&gt;&lt;li id="user_role_chzn_o_1" class="active-result" style=""&gt;Player&lt;/li&gt;&lt;li id="user_role_chzn_o_2" class="active-result" style=""&gt;Coach&lt;/li&gt;&lt;li id="user_role_chzn_o_3" class="active-result" style=""&gt;Parent&lt;/li&gt;&lt;li id="user_role_chzn_o_4" class="active-result" style=""&gt;Manager&lt;/li&gt;&lt;li id="user_role_chzn_o_5" class="active-result" style=""&gt;Non-player&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_full_name"&gt;Full name&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_last_name"&gt;Last name&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_email"&gt;Email&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_date_of_birth"&gt;Date of birth&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_gender"&gt;Gender&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"&gt;&lt;option value=""&gt;Select gender&lt;/option&gt;
                    &lt;option value="Male"&gt;Male&lt;/option&gt;
                    &lt;option value="Female"&gt;Female&lt;/option&gt;&lt;/select&gt;&lt;div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "&gt;&lt;a href="javascript:void(0)" class="chzn-single"&gt;&lt;span&gt;Select gender&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "&gt;&lt;div class="chzn-search" style=""&gt;&lt;input type="text" autocomplete="off" style="width: 212px; "&gt;&lt;/div&gt;&lt;ul class="chzn-results"&gt;&lt;li id="user_gender_chzn_o_0" class="active-result result-selected" style=""&gt;Select gender&lt;/li&gt;&lt;li id="user_gender_chzn_o_1" class="active-result" style=""&gt;Male&lt;/li&gt;&lt;li id="user_gender_chzn_o_2" class="active-result" style=""&gt;Female&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_team"&gt;Team&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"&gt;&lt;option value=""&gt;None&lt;/option&gt;
                    &lt;option value="4"&gt;Metro 3 East&lt;/option&gt;
                    &lt;option value="1"&gt;State League 3&lt;/option&gt;
                    &lt;option value="2"&gt;State League 4&lt;/option&gt;
                    &lt;option value="3"&gt;Metro 3 South&lt;/option&gt;
                    &lt;option value="5"&gt;Pennant E&lt;/option&gt;
                    &lt;option value="6"&gt;Under 9 White&lt;/option&gt;
                    &lt;option value="7"&gt;Under 9 Navy&lt;/option&gt;
                    &lt;option value="8"&gt;Under 13 Pennant South East&lt;/option&gt;
                    &lt;option value="9"&gt;Under 17 Pennant South East&lt;/option&gt;
                    &lt;option value="10"&gt;Under 15 South (1)&lt;/option&gt;
                    &lt;option value="11"&gt;Under 11 Pennant South East&lt;/option&gt;
                    &lt;option value="12"&gt;Under 11 South&lt;/option&gt;&lt;/select&gt;&lt;div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "&gt;&lt;a href="javascript:void(0)" class="chzn-single"&gt;&lt;span&gt;None&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "&gt;&lt;div class="chzn-search" style=""&gt;&lt;input type="text" autocomplete="off" style="width: 212px; "&gt;&lt;/div&gt;&lt;ul class="chzn-results"&gt;&lt;li id="user_team_id_chzn_o_0" class="active-result result-selected" style=""&gt;None&lt;/li&gt;&lt;li id="user_team_id_chzn_o_1" class="active-result" style=""&gt;Metro 3 East&lt;/li&gt;&lt;li id="user_team_id_chzn_o_2" class="active-result" style=""&gt;State League 3&lt;/li&gt;&lt;li id="user_team_id_chzn_o_3" class="active-result" style=""&gt;State League 4&lt;/li&gt;&lt;li id="user_team_id_chzn_o_4" class="active-result" style=""&gt;Metro 3 South&lt;/li&gt;&lt;li id="user_team_id_chzn_o_5" class="active-result" style=""&gt;Pennant E&lt;/li&gt;&lt;li id="user_team_id_chzn_o_6" class="active-result" style=""&gt;Under 9 White&lt;/li&gt;&lt;li id="user_team_id_chzn_o_7" class="active-result" style=""&gt;Under 9 Navy&lt;/li&gt;&lt;li id="user_team_id_chzn_o_8" class="active-result" style=""&gt;Under 13 Pennant South East&lt;/li&gt;&lt;li id="user_team_id_chzn_o_9" class="active-result" style=""&gt;Under 17 Pennant South East&lt;/li&gt;&lt;li id="user_team_id_chzn_o_10" class="active-result" style=""&gt;Under 15 South (1)&lt;/li&gt;&lt;li id="user_team_id_chzn_o_11" class="active-result" style=""&gt;Under 11 Pennant South East&lt;/li&gt;&lt;li id="user_team_id_chzn_o_12" class="active-result" style=""&gt;Under 11 South&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_mobile"&gt;Mobile&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel"&gt;
                    &lt;span class="help-block"&gt;
                      &lt;input name="user[private_mobile]" type="hidden" value="0"&gt;&lt;div class="checker" id="uniform-user_private_mobile"&gt;&lt;span&gt;&lt;div class="checker" id="uniform-user_private_mobile"&gt;&lt;span&gt;&lt;input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;
                      &lt;a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)"&gt;Private&lt;/a&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_manager_access"&gt;Manager access&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input name="user[manager]" type="hidden" value="0"&gt;&lt;div class="checker" id="uniform-user_manager"&gt;&lt;span&gt;&lt;div class="checker" id="uniform-user_manager"&gt;&lt;span&gt;&lt;input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="user_admin_access"&gt;Admin access&lt;/label&gt;
                  &lt;div class="controls"&gt;
                    &lt;input name="user[admin]" type="hidden" value="0"&gt;&lt;div class="checker" id="uniform-user_admin"&gt;&lt;span&gt;&lt;div class="checker" id="uniform-user_admin"&gt;&lt;span&gt;&lt;input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "&gt;&lt;/span&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;div class="pull-right"&gt;
                &lt;input class="btn btn-primary" name="commit" type="submit" value="Create User"&gt;
                &lt;a class="btn btn-danger" data-dismiss="modal" href="#"&gt;Cancel&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  </code></pre>