mdui实现日历日期选择器效果代码-html代码-BFW代码库

mdui实现日历日期选择器效果代码

代码语言：html

所属分类：选择器

代码描述：mdui实现日历日期选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en" class="mdui-theme-primary-teal mdui-theme-accent-teal">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdui.min.css">

    <style>
        html, body {
          height: 100%;
        }
        body {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          overflow-y: auto;
        }
        /*好看的更新动画*/
        mdui-replaceable {
          position: relative;
          display: block;
        }
        mdui-replaceable > div {
          box-sizing: border-box;
          width: 100%;
        }
        mdui-replaceable > .replacement-wrapper {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          text-align: inherit;
        }
        /*选择器公用样式*/
        .picker {
          width: 330px;
          box-shadow: 0 39px 56px 4px rgba(0, 0, 0, .24);
          border-radius: 2px;
          overflow: hidden;
          background: white;
          /*控件颜色*/
          --preferred-color: #009688;
        }
        .picker > header {
          width: 100%;
          background: var(--preferred-color, #009688);
          color: white;
        }
        .picker > header > button {
          text-align: left;
          box-sizing: border-box;
          border: none;
          padding: 0;
          background: none;
          color: white;
          font-family: Roboto, -apple-system, PingFang SC, Noto Sans CJK SC, sans-serif;
          font-size: 16px;
          font-weight: 500;
          height: 16px;
          opacity: .7;
          transition: all .2s ease;
        }
        .picker > header > button.picker-toggle-active {
          opacity: 1;
        }
        .picker > footer > button {
          color: var(--preferred-color, #009688)!important; /*MDUI对按钮的颜色设置会覆盖此属性*/
        }
        /*日期选择器样式*/
        .picker.date-picker > header {
          padding: 8px 24px 18px;
        }
        .picker.date-picker > header > * {
          margin-top: 12px;
          display: block;
        }
        .picker.date-picker > header > button.picker-toggle-date {
          height: 34px;
          font-size: 34px;
          line-height: 27px;
          letter-spacing: 1px;
          white-space: nowrap;
        }
        .picker.date-picker :is(.date-picker--month-controller, .date-picker--weekdays, .date-picker--calendar) { /* :is()是最新的，:matches()和:any()都是过时的 */
          padding: 0 12px;
        }
        .picker.date-picker :is(.date-picker--weekdays, .date-picker--calendar) {
          display: grid;
          row-gap: 4px;
          grid-template-columns: repeat(7, 1fr);
        }
        .picker.date-picker :is(.date-picker--weekdays, .date-picker--calendar) > :is(span, button) {
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          font-size: 12px;
          font-weight: 500;
        }
        .picker.date-picker .date-picker--month-controller {
          display: flex;
          align-items: center;
          margin-top: 10px;
        }
        .picker.date-picker .date-picker--month-controller > mdui-replaceable {
          flex: 1 1;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
        }
        .picker.date-picker .date-picker--weekdays > span {
          color: rgba(0, 0, 0, .38);
        }
  .........完整代码请登录后点击上方下载按钮下载查看