网站建设资讯

NEWS

网站建设资讯

如何在angular项目中使用bootstrap-datetimepicker时间插件

今天就跟大家聊聊有关如何在angular项目中使用bootstrap-datetimepicker时间插件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联公司是专业的南海网站建设公司,南海接单;提供成都网站设计、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行南海网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、需求:

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

二、最后效果

如何在angular项目中使用bootstrap-datetimepicker时间插件

三、需要引入的文件(src/index.html)

如何在angular项目中使用bootstrap-datetimepicker时间插件

注意: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').datetimepicker('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());
});

看完上述内容,你们对如何在angular项目中使用bootstrap-datetimepicker时间插件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网页名称:如何在angular项目中使用bootstrap-datetimepicker时间插件
当前URL:http://njwzjz.com/article/jdojsi.html

其他资讯