CODEWITHSUNDEEP
javascriptruby-on-railsrubytwitter-bootstrapbootstrap-datetimepicker
sanjams
sanjams

Reputation: 190

Bootstrap datetimepicker not firing when inside Boostrap Collapse

I am trying to put a bootstrap datetimerpicker inside of a bootstrap collapse, but when I click on the glyphcon, the calander does not dropdown. I assume that there is some javascript conflict that is preventing the dropdown of the calander where the user can pick a date.

Here is the code:

        <div class="col-sm-3 sidebar">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">Request Pickup</h4>
                </div>
              </a>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <h4>Selected A Date</h4>
                    <div class="row">
                        <div class='col-sm-6'>
                            <div class="form-group">
                                <div class='input-group date' id='datetimepicker1'>
                                    <input type='text' class="form-control" id="delivery_time" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#datetimepicker1').datetimepicker({
                                  format: "dd MM yyyy - HH:ii P",
                                  showMeridian: true,
                                  autoclose: true,
                                  todayBtn: false
                                });
                            });
                        </script>
                    </div>
              </div>
            </div>
          </div>
        </div>
    </div>

I am using rails with this gem which works perfectly when not in a collapse. Any help or critiques are greatly appreciated. Thanks

Upvotes: 1

Views: 1163

Answers (1)

Jason Tate
Jason Tate

Reputation: 716

Looks like you either provided an incorrect link, or may be referring to the incorrect documentation; as most options you are using are not part of the datetimepicker in question http://eonasdan.github.io/bootstrap-datetimepicker/Options/

It's hard to tell what format you are trying to use for your date, as you are not using valid moment format(s) http://momentjs.com/docs/#/displaying/format/

You will also likely need to add some custom CSS to allow for overflow: visible; on Bootstrap panels.

Provided we are talking about the right datetimepicker, something like this should get you going. You will have to play with the moment formats to suit your needs.

See Fiddle: http://jsfiddle.net/spasticdonkey/6g7j55f2/3/

$(function () {
    $("#datetimepicker1").datetimepicker({
        format: "DD MM YYYY - HH:mm Z",
        useCurrent: false
    });
});

Upvotes: 2

Related Questions