angular项目中bootstrap

angular项目中bootstrap

一、需求：

后台系统中经常会使用到的功能，选择一个时间区间，根据这个时间http://区间去筛选一些信息，比如，某一时间段的注册用户。

二、最后效果

三、需要引入的文件（src/index.html）

注意：1、jquery文件先引用，因为在初始化日期插件是，需要找到DOM中的对象，添加一些样式；

2、可以看到，我项目中并没有引用bootstrap.min.css这个文件，因为是在index.html全局引用的这个样式，对已经写好的样式有很大的影响，因此产生的影响就是样式是乱掉的，你看到的效果图（第一张图片）的样式就需要自己动手啦，写一个共用的样式，在每个组件中引用。

具体样式就不加了，相信如果你引用插件的这个坑淌过来了，这点儿小事儿，就想一颗奶油巧克力，带着成就感慢慢‘品尝'吧~

四、代码部分

A、 To Date

（html代码）

时间（To Date）:

-

js代码

//初始化日期插件 -- 选择到天

$('#startTime').datetimepicker({

format: 'yyyy-mm-dd',//显示格式

todayHighlight: 1,//今天高亮

minView: "month",//设置只显示到月份

startView:2,

forceParse: 0,

showMeridian: 1,

autoclose: true,//选择后自动关闭

language: 'zh-CN',

weekStart: 1,

// todayBtn: 1,

// autoclose: 1,

// todayHighlight: 1,

// startView: 2,

// minView: 2,

// forceParse: 0,

// pickerPosition:'bottom-right'//日期插件弹出的位置

}).on("changeDate", function () {

$('#endTime').datetimepicker('setStartDate', $("#startTime").val());

console.log( $("#startTime").val());

$("#endTime").focus()

});

$('#endTime').datetimepicker({

format: 'yyyy-mm-dd',//显示格式

todayHighlight: 1,//今天高亮

minView: "month",//设置只显示到月份

startView:2,

forceParse: 0,

showMeridian: 1,

autoclose: true,//选择后自动关闭

language: 'zh-CN',

weekStart: 1,

// todayBtn: 1,

// autoclose: 1,

// todayHighlight: 1,

// startView: 2,

// minView: 2,

// forceParse: 0,

// pickerPosition:'bottom-right'//日期插件弹出的位置

}).on("changeDate", function () {

$('#startTime').datetimepicker('setEndDate', $("#endTime").val());

console.log( $("#endTime").val());

});

format这个参数可以设置日期的格式，yyyy-mm-dd，yyyy/mm/dd

B、To Minute

(html代码)

时间（To Minute）：

-

(JS 代码)

// //初始化日期插件 -- 选择到分钟

$('#startTimeMinute').datetimepicker({

//language: 'fr',

format: 'yyyy-mm-dd hh:ii',//显示格式

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1

}).on("changeDate", function () {

$('#endTimeMinute').datetimekLqZreIEpicker('setStartDate', $("#startTimeMinute").val());

console.log( $("#startTimeMinute").val());

$("#endTimeMinute").focus()

});

$('#endTimeMinute').datetimepicker({

//language: 'fr',

format: 'yyyy-mm-dd hh:ii',//显示格式

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1

}).on("changeDate", function () {

$('#startTimeMinute').datetimepicker('setEndDate', $("#endTimeMinute").val());

console.log( $("#endTimeMinute").val());

});

注意：因为是一个时间区间，第一个input是开始时间，第二个是结束时间，开始时间必须在结束时间之前，因此，id必须加在input上，而不是div上。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。