html Bootstrap DatePicker

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Bootstrap DatePicker相关的知识，希望对你有一定的参考价值。


<!-- http://bootstrap-datepicker.readthedocs.io/en/latest/markup.html -->
<!-- https://cdnjs.com/libraries/bootstrap-datepicker -->
<!-- https://github.com/eternicode/bootstrap-datepicker -->
<!-- http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=2&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
 -->


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
	
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

</head>
<body>
    <div class="container-fluid">       
		<form id="indexForm">
			<div class="form-group">
				<label>Date of Birth:</label>
				<input class="datepicker" type="text" name="dateofbirth" value="" />
			</div>
			<div class="form-group">
				<label>Date:</label>
				<input class="datepicker" type="text" name="date" value="" />
			</div>
		</form>
	</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $(function () {
            $(".datepicker").datepicker({
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true
            });
        });
    });
       
</script>
 
</html>

以上是关于html Bootstrap DatePicker的主要内容，如果未能解决你的问题，请参考以下文章

bootstrap datepicker插件用不了

html 创建Bootstrap datepicker并使用Moment将时间格式从C＃转换为JS可读

$（...）。datepicker不是函数--JQuery - Bootstrap

如何在 Django 应用程序中使用 bootstrap-datepicker？

减小 bootstrap-datepicker 字段的大小并更改文本颜色

Bootstrap 4 datepicker输入日历图标不可点击