日期插件

laydate插件

laydate日历插件是一个简单好用的插件

只需要引入一个js文件就可以了: (但是要把插件的文件都放入项目结构中)

 <script type="text/javascript" src="/layDate-v5.0.9/layDate-v5.0.9/laydate/laydate.js"></script>

使用时根据选择器触发:

<input type='text' placeholder='选择日期' id='inp'>
...
<script>
    laydate.render({
        elem : '#inp'    // 选择器
    });
</script>

当点击这个input标签就会弹出如下:

bootstrap 日期插件

bootstrap有datepicker和datatimepicker两种

datatimepicker比datapicker更细化, 可以展示年, 月, 日, 时等视图

使用时导入相应文件:

<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel='stylesheet' href='/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'>

<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script	src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script	src="/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>

 使用:

<input id="datatime" placeholder='选择日期'/>
...
$(function() {
    $("#datatime").datetimepicker({
        format : 'yyyy-mm-dd',
        minView : 'year',
        language : 'zh-CN',
        autoclose : true,        //选中自动关闭
        startDate : '1995-01-01',
        todayBtn : true,
        startView : '2'
    });
}); 

 

如果触发的选择器是一个div, 则页面加载后, 直接显示出来, 不用点击(laydate插件没有效果)

可选属性

weekStart  --  从哪天开始 0-6, 0表示周日

startDate -- 最小日期

endDate -- 最大日期

autoclose -- 选择一个日期后是否立即关闭此日期时间选择器

startView -- 默认为3, 显示的视图(年, 月, 日等)

todayBtn -- 默认为false, 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮

$(function() {
    $("#datatime").datetimepicker({
        format : 'yyyy-mm-dd hh:mm:ss',	// 要显示出来的日期格式
        minView : 'month',				// 精确到哪一级时间
        language : 'en',				// 语言
        autoclose : false,				// 选择结束后, 是否能重新选择
        startDate : '1995-01-01',		// 最小时间(居然没有对应的endDate属性)
        todayBtn : true,				// 是否显示下方的当前按钮
        todayHighlight : true,			// 当天日期高亮
        startView : '2',				// 默认是2, 显示哪种面板
        weekStart : 1,					// 默认是为0, 表示周日开始, 设置为1, 则表示周一开始
    });
	
    // 可以单独设置最小日期与最大日期
    $('#datatime').datetimepicker('setStartDate', '1990-01-01');
    $('#datatime').datetimepicker('setEndDate', '2020-01-01');
}); 

中文日期

引入另一个js文件

<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel='stylesheet' href='/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'>

<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script	src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script	src="/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script	src="/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

 再将language的值改为zh-CN即可

$(function() {
    $("#datatime").datetimepicker({
        format : 'yyyy-mm-dd hh:mm:ss',	// 要显示出来的日期格式
        minView : 'month',				// 精确到哪一级时间
        language : 'zh_CN',				// 默认语言为en
        autoclose : false,				// 选择结束后, 是否能重新选择
        startDate : '1995-01-01',		// 最小时间(居然没有对应的endDate属性)
        todayBtn : true,				// 是否显示下方的当前按钮
        todayHighlight : true,			// 当天日期高亮
        startView : '2',				// 默认是2, 显示哪种面板
        weekStart : 1,					// 默认是为0, 表示周日开始, 设置为1, 则表示周一开始
    });
	
    // 可以单独设置最小日期与最大日期
    $('#datatime').datetimepicker('setStartDate', '1990-01-01');
    $('#datatime').datetimepicker('setEndDate', '2020-01-01');
});