js日历控件（可精确到分钟）

首先介绍一下JS日历控件的基础要素：

HTML结构

<input type="text" id="input-time" name="time" placeholder="选择时间" readonly>

CSS样式

这里我们采用了Bootstrap的样式，如果你没有引入Bootstrap相关CSS文件，请自行修改样式。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
    .datepicker {
      margin: 0;
    }
    .timepicker {
      margin: 0;
    }
</style>

JS依赖

这里使用了Bootstrap Datetimepicker来实现日历和时间控件的展示，同时依赖jQuery。

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>

JS初始化

$(document).ready(function() {
    // 初始化日期选择器
    $('#input-time').datetimepicker({
        language: 'zh-CN',
        autoclose: true,
        format: 'yyyy-mm-dd hh:ii:ss'
    });
    // 时间选择器独立设置
    $('.timepicker').timepicker({
        minuteStep: 1,
        showMeridian: false,
        defaultTime: ''
    });
});

这里我们使用了$()函数对文档对象进行了ready事件的监听，在文档加载完成之后，调用了datetimepicker的初始化方法。同时，我们也对时间选择器初始化了一些参数。

接下来，我们来看两个实例，分别说明了如何在日期选择器中添加自定义的快捷操作，以及如何在控件选中后触发一个回调函数。

实例一：快捷方式

$(document).ready(function() {
    // 初始化日期选择器
    $('#input-time').datetimepicker({
        language: 'zh-CN',
        autoclose: true,
        format: 'yyyy-mm-dd hh:ii:ss',
        shortcuts: {
            'today': ['今天', ''],
            'yesterday': ['昨天', moment().subtract(1, 'days')],
            'last7Days': ['近7天', moment().subtract(6, 'days')],
            'last30Days': ['近30天', moment().subtract(29, 'days')],
            'lastMonth': ['上个月', moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
            'thisMonth': ['本月', moment().startOf('month'), moment().endOf('month')],
        }
    });
    // 时间选择器独立设置
    $('.timepicker').timepicker({
        minuteStep: 1,
        showMeridian: false,
        defaultTime: ''
    });
});

在快捷方式的设置中，我们可以通过shortcuts参数自定义快捷图标，同时设置对应的值。例如，'today': ['今天', '']，该参数表示将今天的日期设置为默认值，同时图标上显示“今天”两个字。

实例二：回调函数

$(document).ready(function() {
    // 初始化日期选择器
    $('#input-time').datetimepicker({
        language: 'zh-CN',
        autoclose: true,
        format: 'yyyy-mm-dd hh:ii:ss'
    }).on('changeDate', function(e) {
        console.log('选中的日期是：', e.date);
    });
    // 时间选择器独立设置
    $('.timepicker').timepicker({
        minuteStep: 1,
        showMeridian: false,
        defaultTime: ''
    });
});

在回调函数的设置中，我们使用了datetimepicker的changeDate事件，当选择器的日期被改变时，将会触发该事件，并打印选中的日期对象。你可以在回调函数中进行一些额外的操作，比如将日期传递给后台进行相关的处理。

至此，JS日历控件的完整攻略已经分析完毕，有需要的同学可以结合自身需求进行相应的配置。