引导程序中的日期时间选择器不起作用
[英] DateTime picker in bootstrap is not working
本文介绍了引导程序中的日期时间选择器不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在引导程序中实现一个日期时间选择器.
我检查了网站,this 和 这个作为日期时间选择器不起作用的参考.
即使是现在,它也不起作用.
代码如下:
<div class='input-group date' id='datetimepicker1'><input type='text' data-format="dd/MM/yyyy" class="form-control"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
JS:
$('#datetimepicker1').datetimepicker({语言:'pt-BR'});
编辑
整个模态对话框的代码:
<div class="modalfade" id="modRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog modal-open modal-vertical-centric" id="wndRegBox"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">x</button><h4 class="modal-title" id="myModalLabel" style="color: white">请注册</h4>
<div class="modal-body"><div class="容器"><div class="row"><div class="col-xs-12 col-sm-8 col-md-6"><表单角色=表单"><h2></h2><hr class="colorgraph"><div class="row"><div class="col-xs-12 col-sm-6 col-md-6"><div class="form-group" id="rgrp1"><input type="text" name="first_name" id="rfirst_name" class="form-control input-lg" placeholder="First Name" tabindex="1">
<div class="col-xs-12 col-sm-6 col-md-6"><div class="form-group" id="rgrp2"><input type="text" name="last_name" id="rlast_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">
<div class="form-group" id="rgrp3"><div class='input-group date' id='datetimepicker1'><input type='text' data-format="dd/MM/yyyy" class="form-control"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="form-group" id="rgrp4"><input type="email" name="email" id="remail" class="form-control input-lg" placeholder="Email Address" tabindex="4">
<div class="row"><div class="col-xs-12 col-sm-6 col-md-6"><div class="form-group" id="rgrp5"><input type="password" name="password" id="rpassword" class="form-control input-lg" placeholder="密码" tabindex="5">
<div class="col-xs-12 col-sm-6 col-md-6"><div class="form-group" id="rgrp6"><input type="password" name="password_confirmation" id="rpassword_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
<hr class="colorgraph"></表单>
<div class="modal-footer"><button type="button" id="btnRegister" class="btn btn-primary gradient">Register</button><button type="button" class="btn btn-primary gradient" data-dismiss="modal">取消</button>
</div><!--/.modal-content --></div><!--/.modal-dialog --></div><!--/.modal -->
解决方案
你记得添加 moment.js
吗?
演示 http://jsfiddle.net/maxlipsky/cyk4f8wm/2/
I am trying to implement a datetime picker in bootstrap.
I checked the sites, this and this
as reference as the datetimepicker wasn't working.
Even now, it doesn't work.
Here is the code:
<div class="form-group" id="rgrp3">
<div class='input-group date' id='datetimepicker1'>
<input type='text' data-format="dd/MM/yyyy" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
JS:
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
EDIT
Code for the entire modal dialog :
<!-- Registration Modal -->
<div class="modal fade" id="modRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-open modal-vertical-centered" id="wndRegBox">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">x</button>
<h4 class="modal-title" id="myModalLabel" style="color: white">Please Sign Up</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6">
<form role="form">
<h2></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group" id="rgrp1">
<input type="text" name="first_name" id="rfirst_name" class="form-control input-lg" placeholder="First Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group" id="rgrp2">
<input type="text" name="last_name" id="rlast_name" class="form-control input-lg" placeholder="Last Name" tabindex="2">
</div>
</div>
</div>
<div class="form-group" id="rgrp3">
<div class='input-group date' id='datetimepicker1'>
<input type='text' data-format="dd/MM/yyyy" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group" id="rgrp4">
<input type="email" name="email" id="remail" class="form-control input-lg" placeholder="Email Address" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group" id="rgrp5">
<input type="password" name="password" id="rpassword" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group" id="rgrp6">
<input type="password" name="password_confirmation" id="rpassword_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnRegister" class="btn btn-primary gradient">Register</button>
<button type="button" class="btn btn-primary gradient" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
解决方案
Did you remember to add moment.js
?
DEMO http://jsfiddle.net/maxlipsky/cyk4f8wm/2/
这篇关于引导程序中的日期时间选择器不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文