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

心酱儿

已于 2023-03-29 11:53:00 修改

阅读量8.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

于 2017-09-05 18:36:24 首次发布

本文链接：https://blog.youkuaiyun.com/wbx_wlg/article/details/77854748

这里的页面样式基于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>
  <