angular项目中bootstrap-datetimepicker时间插件的使用示例

前端之家收集整理的这篇文章主要介绍了angular项目中bootstrap-datetimepicker时间插件的使用示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、需求:

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

二、最后效果

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

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

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

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

四、代码部分

A、 To Date

HTML代码

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',function () {
$('#startTime').datetimepicker('setEndDate',$("#endTime").val());
console.log( $("#endTime").val());
});

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

B、To Minute

(HTML代码)

(JS 代码)

插件 -- 选择到分钟 $('#startTimeMinute').datetimepicker({ //language: 'fr',format: 'yyyy-mm-dd hh:ii',//显示格式 weekStart: 1,todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,showMeridian: 1 }).on("changeDate",function () { $('#endTimeMinute').datetimepicker('setStartDate',$("#startTimeMinute").val()); console.log( $("#startTimeMinute").val()); $("#endTimeMinute").focus() });

$('#endTimeMinute').datetimepicker({
//language: 'fr',showMeridian: 1

}).on("changeDate",function () {
$('#startTimeMinute').datetimepicker('setEndDate',$("#endTimeMinute").val());
console.log( $("#endTimeMinute").val());
});

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

至此,我已经如愿看到了理想的效果,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/33172.html

猜你在找的Bootstrap相关文章