【JS】用JS实现系统常见日周月时间按钮切换效果

这里的页面样式基于bootstrap.css样式文件，时间控件引用的是datetimepicker.js,如果想详细了解时间控件的操作，可以参考网址http://www.bootcss.com/p/bootstrap-datetimepicker/,本篇文章只简单介绍按钮控件的简单切换，先上效果图：

1.HTML

<div class="btnDataType pull-left"><div class="btn-group dataType" id="time"><div class="btn-group timeBtn" style="border:none"><div class="btn btn-default DayRang" data-role="time" data-time="Day">日</div><div class="btn btn-default WeekRang" data-role="time" data-time="week">周</div><div class="btn btn-default MonthRang active" data-role="time" data-time="month">月</div></div></div><div style="display: inline-block;"><form action="#" class="form-inline "><div class="input-daterange input-group " id="Day" ><input type="text" class="form-control" data-time="start"><span class="input-group-addon">至</span><input type="text" class="form-control" data-time="end"></div><div class="input-daterange input-group" id="week" style="display: none;"><input type="week" class="form-control" data-time="start"><span class="input-group-addon">至</span><input type="week" class="form-control" data-time="end" value=""></div><div class="input-daterange input-group" id="month" style="display: none;"><input type="text" class="form-control" data-time="start"><span class="input-group-addon">至</span><input type="text" class="form-control" data-time="end"></div></form></div></div>

2.CSS样式
其中很多样式都引用了bootstrap.css文件，一些按钮样式或者相关的在这里就不在赘述

.btn-group {border: 1px solid #AAA4A4;border-radius: 3px;position: relative;display: inline-block;vertical-align: middle;
}
.btn-default {background: #fff;margin-top: 0;position: relative;top: 0;color: #2863AD;border: 0;z-index: 100;
}
.btn-default:hover, .content .btn-default.active{color: #fff;background: #2863AD;border-color: #2863AD;
}

3.JS代码

//实现按钮切换以及对应时间框的显示隐藏效果
//这里注意上面的html的<div>元素中的id="time",以及对应元素中data-time和data-role的用法，这种写法复用性很强，类似功能的直接修改对应id就可以
$(function(){$('#time [data-role="time"]').click(function(e){$(e.currentTarget).addClass('active').siblings().removeClass('active') ;//增加删除时间选中的样式$('#'+$(e.currentTarget).data('time')).show().siblings().hide();//显示隐藏对应选择时间的日期选择框});
})

这里结合了bootstrap框架和H5 的data-属性，有兴趣的可以了解一下，这里提供官方文档地址：
http://v3.bootcss.com/
下一篇接着更新时间选择器datetimepicker的用法，和这篇样式结合到一起，就可以根据自己的需求实现年月日周等时间选择的效果了

【JS】用JS实现系统常见日周月时间按钮切换效果相关推荐

js 日期加减操作（日、月、年）
js 日期加减操作(日.月.年) 先定义当前时间 const myDate = new Date() 2.日期加减操作 myDate.setYear(myDate.getFullYear() + 1) ...
oracle 按日输出取整数,Oracle按日周月分組統計，及next_day()函數詳解
1.概述工作中遇到如下問題:統計周期內關鍵詞數,而這里的周期內最常用的就是日周月. 日月比較容易處理,周的話可以通過next_day()函數實現. 2.實例問題如下,有一張表ljb_test,包括 ...
MACD多周期共振指标公式，日周月共振
有人问多周期MACD怎么写,编写指标的难度其实不大,主要问题是解决多周期MACD显示的问题.日线.周线.月线三个周期,每个周期都有快线DIF和慢线DEA两条线,一共6条,怎么在副图上清晰显示出来. 一 ...
java8 日期范围内日/周/月/季度/年的日期结果集
java8 日期范围内日/周/月/季度/年的日期结果集 /*** 根据时间范围列出所有日/周/月/季/年** @Author Moqi* @Date 2020/4/30* @Version V1. ...
mysql分季度统计数据,mysql按日周月季度统计数据
mysql按日周月季度统计数据 mysql按日.周.月.季度统计数据 1.使用DATE_FORMAT做等值条件查询 2.DATE_FORMAT函数语法,参考w3school 3.可使用格式 4.使用示 ...
php文章周月总排行榜怎么实现,帝国cms7.0实现日周月点击排行的方法
本文将为您介绍的是帝国cms7.0实现日周月点击排行的方法,具体操作方法请看下文: 新增信息的排行不太符合我的要求.就自己琢磨了一套全站信息的月点击.周点击排行.需要新增几个字段及修改文件.下面开 ...
KDJ日周月金叉共振指标
昨天介绍了MACD多周期共振指标公式,KDJ通过类似的写法,也可以共振.本文介绍的KDJ日周月金叉共振指标包含日周金叉共振.日月金叉共振.周月金叉共振.日周月金叉共振四种类型. 需要注意的问题依然是周 ...
Oracle按日周月分组统计，及next_day()函数详解
1.概述工作中遇到如下问题:统计周期内关键词数,而这里的周期内最常用的就是日周月. 日月比较容易处理,周的话可以通过next_day()函数实现. 2.实例问题如下,有一张表ljb_test,包括 ...
日周月筛选器_天谕2.09月3日周版本更新维护内容预告
亲爱的谕霸: 为了给谕霸们带来更好的游戏品质以及更极致的游戏体验,我们会不断对游戏进行调整和修复. <天谕2.0>9月3日周版本更新维护内容预告特别提示本周维护时间为9月3日上午8:00 ...
纵享丝滑滑动切换的周月日历，水滴效果，丰富自定义日历样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QF0ojEiz-1650020556182)(https://user-gold-cdn.xitu.io/2018/2/ ...

【JS】用JS实现系统常见日周月时间按钮切换效果

【JS】用JS实现系统常见日周月时间按钮切换效果相关推荐

最新文章

热门文章