add time picker in twitter bootstrap

Question

I am desperately trying to integrate a time picker in my app, but without success. I tried to use this code to do it: https://github.com/weareoutman/clockpicker

I have all the files and the paths are properly set. Here is the weird thing. If I integrate this code:

        <!-- Or just a input -->
    <input id="demo-input" />

    <!-- jQuery and Bootstrap scripts -->
    <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>

    <!-- ClockPicker script -->
    <script type="text/javascript" src="../dist/bootstrap-clockpicker.min.js"></script>

    <script type="text/javascript">
    $('.clockpicker').clockpicker()
        .find('input').change(function(){
            // TODO: time changed
            console.log(this.value);
        });
    $('#demo-input').clockpicker({
        autoclose: true
    });

    if (something) {
        // Manual operations (after clockpicker is initialized).
        $('#demo-input').clockpicker('show') // Or hide, remove ...
                .clockpicker('toggleView', 'minutes');
    }
    </script>

I have declared the css file in the header too:

        <!-- ClockPicker Stylesheet -->
    <link rel="stylesheet" type="text/css" href="../dist/bootstrap-clockpicker.css">

into the input.html file of my app and starts this app, I can see the box where the clock is supposed to be active but nothing happens when I click on the box, while the clock should appear. However, if I run the html file in the browser, as a stand alone unit, then the clock works as it should be. In the app, the input file is called from a higher up file view.py:

@app.route('/input') 
def addresses_input(): 
return render_template("input.html") 

I coded in python and used flask

Anyone has an idea? I have been struggling with this for quite some time now and I cannot find an answer...

Thanks!

Answer 1

Your @route should look like

from wtforms.fields.html5 import DateField

class TimeForm(Form):
    time_picker = DateField('DatePicker', format='%Y-%m-%d')

@app.route('/current_page', methods=['POST'])
def show_time():
    time_form = TimeForm() # this could be the class as well
    if time_form.validate_on_submit():
        return time_form.time_picker.data.strftime('%Y-%m-%d')
    return render_template('bootstrap_template.html', form=form)

You can get the time picker in the jinja2 template in following way

bootstrap_template.html

<form action="some_action" method="post">
    {{ time_form.time_picker(class='datepicker') }}
    {{ time_form.hidden_tag() }}
    <input type="submit"/>
</form>

Please note - you will need to add your js library and css file in template file.