javascript - 引导日期时间选择器插件?
问题描述
这是一个简单的 DatePicker 工作。
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: '"dd/MM/yyyy - hh:ii"',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datetimepicker(options);
})
</script>
<head>
<body>
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
</body>
上述代码应如何更改以使其使用 DATETIME 选择器?我假设我需要在标题中使用不同的插件?请问有人可以建议吗?
解决方案
$(function() {
$('#datetimepicker1').datetimepicker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
来源:https ://eonasdan.github.io/bootstrap-datetimepicker/
在以下方面的帮助下进行 SO 工作:https : //stackoverflow.com/a/40036266/4091337 和@Abhishek 在评论中
推荐阅读
- angular - 你如何在 TypeScript 中使用泛型的某些部分?
- c# - C# Lamba 表达式选择元素
- swift - 如何快速安装 Google-Maps-iOS-Utils?
- laravel - Laravel 分离不起作用 - 它只是将枢轴列更新为 null 而不是分离整个模型
- python - 如何构建具有模块依赖关系的独立 Python 程序?(Tweet2Vec)
- html - 试图创建这个 css 功能区。与丝带的曲线作斗争
- php - 带有选择下拉选项的前端注册表单
- python - 如何在 Visual Studio Code 中更改 Anaconda/Jupyter Notebooks 使用的端口
- shell - 在 Jenkins 服务器上执行 shell 脚本无法访问
- liferay-7 - 在 liferay 7 QUERY 上寻找用户/角色权限,