关于时间选择的小功能的实现，使用bootstrap-datepicker来实现

在时间选择的时候，最常见的是年月日的选择。

当然了，也有更简单的，只是关于年的选择。

这里向大家介绍一下该功能的实现。效果就是下面这样的。

第1步，导入Javascript和CSS

代码如下

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css"/>

然后绑定Input元素

     window.onload = function () {
        $('.yearpicker').datepicker({
                format: "yyyy",
                autoclose: true,
                minViewMode: "years"
        });
     }

第3步，编写Input标签

<input type="text" class="form-control yearpicker" id="building-year-from" placeholder="築年?(西暦入力)" />
<input type="text" class="form-control yearpicker" id="building-year-to"   placeholder="?築年(西暦入力)" />

这样就完成了。

也可以参考下面的网址

 https://jsfiddle.net/hLe0yhz5/1/ 

关于yearpicker （不推荐）

 https://saravanajd.github.io/YearPicker/index.html 

这个插件呢，也可以用。但有一个问题就是FocusOut失去焦点之后，下面的时间选择框是不会自动消失的。

有些客户是按Tab键进行选择的。不会自动消失，这就不方便了。