最近在創建記錄的時候,需要用到日曆的功能。本身是使用的bootstrap佈局的,所以就找到Datepicker,看了一下用起來還是挺方便的。下面就是使用過程。
依賴的資源
- jQuery
- Moment.js
- Bootstrap.js
- Bootstrap Datepicker script
- Bootstrap CSS
- Bootstrap Datepicker CSS
安裝方式
由於我是Visual Studio開發工具,所以就使用bower安裝這個資源。
bower install eonasdan-bootstrap-datetimepicker#latest --save
通過上面的命令,就將資源引入到工程裏了。下面就可以在頁面中使用了。
<head>
<!-- ... -->
<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>