BootStrap3中日期选择器的使用

需要用到的css、js文件如下

版本截图如下：

引用示例：

    //CSS<link href="${path}/static/css/bootstrap.min.css" rel="stylesheet"><link href="${path}/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">//JS<%--jquery必须放在其他js文件之前--%><script src="${path}/static/js/jquery.min.js"></script><%--bootstrap日期选择器国际化包--%><script src="${path}/static/js/moment-with-locales.min.js"></script><script src="${path}/static/js/bootstrap.min.js"></script><%--bootstrap日期选择器包--%><script src="${path}/static/js/bootstrap-datetimepicker.min.js"></script>

//示例代码
<div class="form-group"><label class="col-sm-2 control-label">出版日期</label><div class="col-sm-10"><input type="text" class="form-control" id="input_book_published"placeholder="book published"></div></div>

js代码

//日期选择器$('#input_book_published').datetimepicker({//'dddd YYYY年MM月DD日 HH:mm:ss' 星期几 年月日 时分秒//YYYY年MM月DD日 HH:mm:ss' 年月日 时分秒format: 'YYYY-MM-DD',//国际化，这里指中文language: "zh-CN",//判断日期是否改变，改变就将日期选择框关闭}).on('dp.change', function (ev) {var newDateTime = ev.date ? ev.date.format('yyyy-MM-dd HH:mm:ss') : "";var oldDateTime = ev.oldDate ? ev.oldDate.format('yyyy-MM-dd HH:mm:ss') : "";if (newDateTime != oldDateTime) {$(this).data("DateTimePicker").hide();}});

成功截图

BootStrap3中日期选择器的使用相关推荐

【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
DatePickerDatePickerDatePicker和TimePickerTimePickerTimePicker是安卓自带的日期选择器,可以变换多种样式,下面是他们的简单使用. 显示年月日和 ...
美团APP中日期选择器的bug复现
前几天做了一个滑动日期选择器,我发了一篇文章,是仿的12306上面的酒店入住日期选择,在做那个的时候我也看了一下美团还有携程上面的酒店入住日期选择,都是大同小异,但是发现美团上的酒店入住日期选择器有个 ...
Elementui中日期选择器的使用
准备这里使用了moment.js 关于moment.js的使用,请看Vue项目中使用moment.js 日期选择器的使用首先定义一个子组件DatePicker.vue <template&g ...
ElementUI 中日期选择器总结
elememtUI日期选择器 <el-date-pickerv-model="value1"type="datetime"placeholder=&quo ...
vue使用element-ui中日期选择器 (el-date-picker) 出现报错
一.代码 <template><div><el-date-pickerv-model="value1"type="date"pla ...
bootstrap 日历中文_bootstrap日期选择器本地化-中文
最近用bootstrap做项目,所以就顺便搜了下用bootstrap写的日期选择器. 搜到的第一和第二条结果虽然是官网,但上面挂的还是基于bootstrap2的日期选择器(此时为北京时间2017-12 ...
ant-design for react 日期选择器遇到的问题。（mars3d开发）
问题描述: 在修复mars3d react功能示例的bug中发现当endTime值为空时,就会出现下面的情况.moment方法中需要两个参数且不能为空.出现这种情况的原因是将日期选择器中的时间清空. ...
Android中DatePicker日期选择器的使用和获取选择的年月日
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...

BootStrap3中日期选择器的使用

需要用到的css、js文件如下

BootStrap3中日期选择器的使用相关推荐

最新文章

热门文章