javascript - 在 Twitter Bootstrap 中添加时间选择器

Question

我拼命尝试在我的应用程序中集成时间选择器，但没有成功。我尝试使用此代码来执行此操作:https://github.com/weareoutman/clockpicker

我拥有所有文件并且路径已正确设置。这是奇怪的事情。如果我集成此代码:

        <!-- 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>

我也在标题中声明了 css 文件:

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

进入我的应用程序的 input.html 文件并启动该应用程序，我可以看到时钟应该处于事件状态的框，但当我单击该框时没有任何反应，而时钟应该出现。 但是，如果我在浏览器中运行 html 文件，作为一个独立的单元，那么时钟就会正常工作。 在应用程序中，输入文件是从更高层的文件 view.py 调用的:

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

我用 python 编码并使用 Flask

有人有想法吗？我已经为此苦苦挣扎了很长一段时间，但找不到答案......

谢谢!

Answer 1

你的@route应该看起来像

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)

您可以通过以下方式获取jinja2模板中的时间选择器

bootstrap_template.html

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

请注意 - 您需要在模板文件中添加 js 库和 css 文件。