bootstrap有没有日历控件

bootstrap有日历控件即时间日期日历控件，名称为“datetimepicker”，是一个Bootstrap组件，能够简化页面上日期、时间的输入。datetimepicker控件支持日期选择和格式设定、支持时间段选择控制，只需要在需要的页面使用script和link标签引入相关文件即可使用。

本文操作环境：Windows7系统、bootstrap3、Dell G3电脑。

bootstrap有没有日历控件？

bootstrap有时间日期日历控件，名称datetimepicker，是一个Bootstrap组件，能够简化页面上日期、时间的输入。

Bootstrap datetimepicker控件的使用

1、支持日期选择，格式设定

2、支持时间选择

3、支持时间段选择控制

4、支持中文

涉及的样式及js:

直接上例子吧。

    

        

            选择日期：
            
            

                
                
                    
                
            
        
    
    

        

            选择日期+时间：
            
            

                
                
                    
                
            
        
    

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });
    $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD hh:mm',
        locale: moment.locale('zh-cn')
    });
});
 
 
 
/*4.17版本一些可能用得到的方法参数*/
/*
        showClose:true//是否显示关闭 按钮
        /*viewMode: 'days',//天数模块展示，months则为以月展示
        daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开
        calendarWeeks: false,//显示 周 是 今年第几周
        toolbarPlacement:'default', //工具摆放的位置，top 则为上，默认为底
        showTodayButton:false,//是否工具栏 显示 直达今天天数的 按钮，默认false
        showClear:false, //是否 工具栏显示  清空 输入框  的按钮。默认false
*/

截图：

空心菜的米库

1，对界面进行了美化2，对文件里边相同代码进行了综合3，增加了点击次数统计，并对3次点击以上的域名增加热门字样4，对本站出售和个人出售进行了划分5，增加钻石状态说明6，增加了完整的后台界面7，增加对资料修改功能8，增加回收站，可以任意删除域名、恢复删除域名和永久删除数据9，还有其他的细节大家自己看~10.增加域名证书显示11.域名到期时间采用日历控件形式12.后台登陆添加了验证码功能13.还有很多

下载

起始时间的例子：

    

        

            选择开始时间：
            
            

                
                
                    
                
            
        
    
    

        

            选择结束时间：
            
            

                
                
                    
                
            
        
    

$(function () {
    var picker1 = $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn'),
        //minDate: '2016-7-1'
    });
    var picker2 = $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });
    //动态设置最小值
    picker1.on('dp.change', function (e) {
        picker2.data('DateTimePicker').minDate(e.date);
    });
    //动态设置最大值
    picker2.on('dp.change', function (e) {
        picker1.data('DateTimePicker').maxDate(e.date);
    });
});

截图：

初始化的时候，使用defaultDate指定默认时间：

 $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });

当然了，也可以用JS 代码 控制input框 默认值。

具体示例：

选择日期：




                    






选择日期+时间：




                    







    

推荐：《bootstrap教程》