日期时间选择器拖动选择效果
代码语言:html
所属分类:选择器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::before, *::after { position: relative; box-sizing: border-box; } html { height: 100%; display: flex; background: #eee; } body { margin: auto; } :root { --color-primary: #00AEF2; } .calendar { font-size: 3vw; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 0.25em 0; margin: auto; padding: 1em; background: #FFF; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25); border-radius: .5em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .day:first-child { grid-column-start: 4; } .day { padding: 0.5em; text-align: center; } .day::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .day[data-selected]::before { border-radius: .5em; } .day[data-selected="start"]::before { border-top-right-radius: 0; border-bottom-right-radius: 0; } .day[data-selected], .day[data-selected] ~ .day { color: white; } .day[data-selected]::before, .day[data-selected] ~ .day::before { background-color: var(--color-primary); } .day[data-selected="start"] ~ .day:not([data-selected="end"])::before { opacity: 0.5; } .day[data-selected="end"][data-selected="end"]::before { border-top-left-radius: 0; border-bottom-left-radius: 0; } .day[data-selected="end"] ~ .day { color: inherit; } .day[data-selected="end"] ~ .day::before { background-color: transparent; } </style> </head> <body translate="no"> <div class="calendar"> <div class="day" data-day="1"><span class="number">1</span></div> <div class="day" data-day="2"><span class="number">2</span></div> <div class="day" data-day="3"><span class="number">3</span></div> <div class="day" data-day="4"><span class="number">4</span></div> <div class="day" data-day="5"><span class="number">5</span></div> <div class="day" data-day="6"><span class="number">6</span></div> <div class="day" data-day="7"><span class="number">7</span></div> <div class="day" data-day="8"><span class="number">8</span></div> <div class="day" data-day="9"><span class="number">9</span></div> <div class="day" data-day="10"><span class="number">10</span></div> <div class="day" data-day="11"><span class="number">11</span></div> <div class="day" data-day="12"><span class="number">12</span></div> <div class="day" data-day="13" data-selected="start"><span class="number">13</span></div> <div class="day" data-day="14"><span class="number">14</span></div> <div class="day" data-day="15"><span class="number">15</span></div> <div class="day" data-day="16"><span class="number">16</span></div> <div class="day" data-day="17"><span class="number">17</span></div> <div class="day" data-day="18"><span class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0