bootstrap 时间日期日历控件（datetimepicker）附效果图

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群

效果图

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script><script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script><title></title><style type="text/css">.myrow {display: flex;flex-direction: row;/*margin-left:1em;*/}.xxxx {height: 2px;background: #999999;margin-top: 16px;width: 2em;margin-left: 1em;margin-right: 1em;}</style></head><body><div class="form-group "><label for="name">身份证有效期限*</label><div class="myrow"><div class='input-group date' style="width: 14em;" id='datetimepicker1'><input type='text' class="timeInput form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div><div class="xxxx"></div><div class='input-group date' style="width: 14em;" id='datetimepicker2'><input type='text' class="timeInput form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div><script>$(function() {$('#form1').hide();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);});});$('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: "2018-1-1"});$('#datetimepicker2').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: "2028-1-1"});</script></body></html>

bootstrap 时间日期日历控件（datetimepicker）附效果图相关推荐

JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
bootstrap 英文日历_时间日期日历控件（bootstrap-datetimepicker）
1.引入jar 2.改写js $(function() { $(".startdate").datetimepicker({ language: i18n_lang, weekSt ...
bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
javascript 日期日历控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
一个可以显示具体时间的日历控件应用
1.先下载js文件,/Files/zhoubin525/calendar1.zip,然后解压添加到项目中. 2.在<script src="../js/calendar1.js&quo ...
9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
layui时间怎么设置年月日时分秒_layui-laydate时间日历控件使用方法详解
本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下此控件可使用layui或者独立版的layDate,两者初始化有些不同在 layui 模块中使用layui.code ...
android gridview控件使用详解_Android开发实现自定义日历、日期选择控件
点击上方蓝字关注 ?? 来源: wenzhihao123 https://www.jianshu.com/p/a2f102c728ce 前言最近项目需要日历效果,考虑用第三方的反而不太适合设计需求, ...
excel日历弄到html,如何在Excel中利用日历控件来快速输入日期
给大家分享了一个利用日历控件在Excel单元格中输入日期的小窍门.大家知道,物流和会计行业的报表,经常需要手工输入一些日期,例如发货日期,在途时间.到达配送中心日期.签收日期等,如果手工输入,难免出错 ...

bootstrap 时间日期日历控件（datetimepicker）附效果图

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群

bootstrap 时间日期日历控件（datetimepicker）附效果图相关推荐

最新文章

热门文章