jquery datePicker日期时间段选择器效果代码
代码语言:html
所属分类:选择器
代码描述:jquery datePicker日期时间段选择器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日期时间选择器</title> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2431045_hbwl3x53oep.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/datePicker.css"> </head> <style> body{background-color: #fff} .wrap{ line-height: 40px; height: 40px; border: 1px solid #dcdfe6; width: 400px; margin: 40px auto 0; display: flex; transition: border-color .2s; border-radius: 4px; } .wrap:hover{ border-color: #c0c4cc; } .wrap:active{ border-color: #66b1ff; } .wrap.active{ border-color: #66b1ff; } .wrap > div{ flex: 1; padding: 0 10px; display: flex; cursor: pointer; } .wrap .ali-iconfont{ display: inline-block; width: 20px; text-align: center; margin-right: 5px; } .wrap-l-starTime, .wrap-l-endTime{ display: flex; justify-content: center; align-items: center; } .wrap [name="startTime"], .wrap [name="endTime"]{ flex: 1; width: 100%; } .wrap [name="startTime"], .wrap [name="endTime"], .wrap [name="startTime"]:focus, .wrap [name="endTime"]:focus{ border: none; outline: none; cursor: pointer; } </style> <body> <div class="wrap"> <div class="wrap-l"> <i class="ali-iconfont ali-iconshizhong"></i> <div class="wrap-l-starTime"> <input name="startTime" type="text" placeholder="开始日期"> </div> </div> <div class="wrap-r"> <i class="ali-iconfont ali-iconshizhong"></i> <div class="wrap-l-endTime"> <input name="endTime" type="text" placeholder="结束日期"> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.2.29.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-datePicker.min.js"></script> <script> var fastTime = { true: { 4: { // 双日历天、小时的快速选择格式 '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }, '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }, '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') } }, 5: { // 双日历天、小时的快速选择格式 '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }, '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') }, '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().format('YYYY-MM-DD HH:mm:ss') } }, 6: { // 双日历周的快速选择格式 '本周': { startTime: moment().startOf('week').subtract(0, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') }, '最近2周': { startTime: moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') }, '最近4周': { startTime: moment().startOf('week').subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') }, '最近8周': { startTime: moment().startOf('week').subtract(8, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') }, }, 7: { // 双日历月的快速选择格式 "本月": { startTime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')}, "本年": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')}, "最近六个月": { startTime: moment().startOf('month').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')} }, 8:{ // 双日历季的快速选择格式 "本季度": { startTime: moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')}, "今年至今": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')}, "上一季度": { startTime: moment().subtract(1, 'quarter').startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().........完整代码请登录后点击上方下载按钮下载查看
网友评论0