Search code examples
javascriptjquerytwitter-bootstrapdatepickertimepicker

Can I get timepicker to fire on a click in the input field?

I have spent HOURS trying to get any new timepicker to work (previously used https://github.com/weareoutman/clockpicker which was great but always went off screen on mobile phones).

Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got https://github.com/Eonasdan/bootstrap-datetimepicker going (not great on a mobile but...)

My problem is I have lots of tiny input fields for dates so I need to get rid of the glyphicon and just onclick on the input field itself.

I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
        <link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
        <script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>        
        <script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    </head>
    <body>
<div class="container">

    <div class="row">
        <div class='col-sm-6'>
            <form class="form">
            <div class="form-group">
                <div class='input-group date' id='datetimepicker4'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>

        </form>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({
                    pickDate: false,  minuteStepping:5, 
                });
            });
        </script>
    </div>
</div>        
</html>

EDIT: This is beyond weird. Got rid of the glyphicon. Put the other span around the input. Works but with a big ugly border. Tried disabling the input-group-addon class by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that class and it stopped working. So looks like some sort of regex within span is going on.

I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.

Solution

  • It's easy. Just refer to the documentation :)

    http://eonasdan.github.io/bootstrap-datetimepicker/#example6