在twitter bootstrap中添加时间选择器
在twitter bootstrap中添加时间选择器
提问于 2015-06-20 00:23:22
我拼命地想在我的应用程序中集成一个时间选择器，但没有成功。我尝试使用以下代码来完成此操作：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文件作为一个独立单元运行，那么时钟就会正常工作。在应用程序中，输入文件是从更高的up文件view.py调用的：
@app.route('/input')
def addresses_input():
return render_template("input.html") 我用python编写代码，使用flask。
有谁有主意吗？我已经在这个问题上挣扎了很长一段时间，我找不到答案……
谢谢!
回答 1
Stack Overflow用户
发布于 2015-06-20 00:46:05
路由您的@应该类似于
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文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30942881
复制相关文章
相似问题
腾讯云开发者
