javascript - 引导日期选择
问题描述
为什么以下代码在https://angrytools.com/bootstrap/editor/上正常工作,而在 Visual Studio Code 中不起作用。这是关于 datepick 操作
请帮忙
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
$('.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap datepicker</h1>
<div class="input-group date">
<input type="text" class="form-control date"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>
解决方案
我认为您以错误的顺序链接脚本和 CSS,这就是它不起作用的原因。请参见下面的工作示例。
您必须链接 2 个 CSS 文件和 3 个 JS 文件。这就是你出错的地方。
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
label{margin-left: 20px;}
#datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<label>Select Date: </label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
推荐阅读
- node.js - Google Recaptcha 服务器验证返回 connect ETIMEDOUT in express
- linux - 如何将字符串附加到 visudo?
- sql - 将多个值插入单个外键的同一行
- javascript - 如何在 laravel 的 javascript 中使用 trigger() 触发输入值?
- c# - 如何使用按钮 x:Name 或其他东西来指示按钮
- node.js - 我的 index.js 正在使用 'require' 我如何才能使用使用 'import' 的 'gtfs' 包
- spring-boot - PropertyReferenceException 找不到类型 UserRegistration 的属性 ID
- python - Python CSV 文件行比较
- memory-management - 本地集群上的 Dask 数据加载:“Worker 超出了 95% 的内存预算”。重新启动然后“KilledWorker”
- python - 熊猫无法识别 Excel 文件