bootstrap-datepickerを使ってみる

Posted on by IKIX_wbdv

カレンダーを導入したい時のためのメモ．

<!DOCTYPE html>
<head>
　<meta charset="utf-8">
　<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
　<script>
　　$(function(){
　　　$('#picker .cal').datepicker({
　　　　format: "yyyy年mm月dd日",
　　　　language: "ja"
　　　});
　　　$('.cal').on('changeDate', function() {
　　　　$('#in').text(
　　　　　$('.cal').datepicker('getFormattedDate')
　　　　);
　　　});
　　});
　</script>
　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css">
　<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.ja.min.js"></script>
</head>
<body>
　<div id="picker">
　<label><span id="in"></span>のカレンダー</label>
　<div class="cal" data-date="2018年03月20日"></div>
　</div>
</body>
</html>