bootstrap 时间控件

几种bootstrap时间控件总结记录

githup地址:https://github.com/suidagang/bootsrapdatetimepicker

示例

包部分











html部分

年月日
//选择年月日的       
$('#datetimepicker_day').datetimepicker({
    format: 'yyyymmdd',
    weekStart: 1,
    autoclose: true,
    startView: 2,
    minView: 2,
    forceParse: false,
    language: 'zh-CN'
});
年月
//选择年月   
$('#datetimepicker_month').datetimepicker({
    language: 'zh-CN',
    format: 'yyyymm',
    weekStart: 1,
    autoclose: true,
    startView: 3,
    minView: 3,
    forceParse: false
});
//选择年  
$('#datetimepicker_year').datetimepicker({
    format: 'yyyymm',
    weekStart: 1,
    autoclose: true,
    startView: 4,
    minView: 4,
    forceParse: false,
    language: 'zh-CN'
});
年月日时分
$("#datetimepicker_year_time").datetimepicker({
    language: 'zh-CN',
    autoclose: true,//选中之后自动隐藏日期选择框
    clearBtn: false,//清除按钮
    todayBtn: true,//今日按钮
    format: 'yyyy-mm-dd hh:ii:ss',
    startView: 'month',// 进来是月
    minView: 0,// 可以看到小时
    maxView: 1,
    minuteStep: 5, //分钟间隔为1分
    todayHighlight: false,
    forceParse: true,
    endDate: new Date()
}).on('changeDate', function (ev) {
    if (ev.date) {
        $("#eDatePicker").datetimepicker('setStartDate', new Date(ev.date.valueOf()))
    } else {
        $("#eDatePicker").datetimepicker('setStartDate', null);
    }
});
年月日时间范围
$('input[name="daterange"]').daterangepicker();
年月日时分时间范围
//年月日时分时间范围
$('#rangeTime').daterangepicker({
        timePicker: true,
        timePickerIncrement: 1,
        format: 'MM/DD/YYYY h:mm:ss A'
    }, function (start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
});

你可能感兴趣的:(bootstrap,javascript,html)