Search code examples
jquerybootstrap-datepickereonasdan-datetimepicker

Possible Issue? - Unable to disable hours with Time Intervals with bootstrap-datetimepicker v4.17.42

I am trying to disable certain hours in concrete dates with bootstrap-datetimepicker.

I read in the docs http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#disabledtimeintervals the disabledTimeIntervals function that matches my needs.

I tried with several environments, installing as follows (v4.17.42) current:

    $ bower install eonasdan-bootstrap-datetimepicker#latest --save

and I tried installing the version 4.14.30 (with same results)

    $ bower install eonasdan-bootstrap-datetimepicker#4.14.30 --save

Once all components installed (jquery, bootstrap, moment.js and eonasdan-bootstrap-datetimepicker), I get the datetimePicker working correctly.

The problems start here:

When I try to disable a range of hours, I get no errors, and when I click the hours arrows, the picker don't allow me to change to the disabled hour, but when I click the hour number to see all hours in the day, the theorically "disabled" hour does not appear as disabled and I can select it!

My code:

<html>
    <head>
        <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
        <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
    </head>
    <body>
        <div class="container">
            <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" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#datetimepicker1').datetimepicker({
                            debug: true,
                            format: 'YYYY-MM-DD HH:mm:ss',
                            sideBySide: true,
                            disabledTimeIntervals: [
                                [moment('2016-12-31 21:59:59'), moment('2016-12-31 23:00:00')]
                            ]
                        });
                    });
                </script>
            </div>
        </div>
    </body>
</html>

I suspect that is an issue because the same code is working like expected in this fiddle: http://jsfiddle.net/gLzvqqrj/3/

Anybody knows how to check the version of datetimepicker is used in the fiddle? Or better, why is my code not working?

Solution

  • Ok, sorry for the inconvenience, today is working properly.

    If anybody is with the same problem as I, make sure to clear ALL the browser cache, not only reload holding the Ctrl as I did...