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

代码语言：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);
        }
        .picker.date-picker .date-picker--calendar {
          grid-template-rows: repeat(6, 1fr);
        }
        .picker.date-picker .date-picker--calendar > button {
          border: none;
          background: none;
          padding: 0;
          border-radius: 50%;
          transition: all .2s ease;
        }
        .picker.date-picker .date-picker--calendar > button:first-of-type {
          grid-column-start: var(--start-day-weekday, 1);
        }
        .picker.date-picker .date-picker--calendar > button:hover {
          background: rgba(0, 0, 0, .1);
        }
        .picker.date-picker .date-picker--calendar > button.date-picker-today {
          color: var(--preferred-color, #009688);
        }
        .picker.date-picker .date-picker--calendar > button.date-picker-selected {
          background: var(--preferred-color, #009688);
          color: white!important;
        }
        .picker.date-picker .date-picker--calendar > button.date-picker-selected:hover {
          opacity: .87;
        }
        .picker.date-picker .date-picker--chronology {
          box-sizing: border-box;
          overflow-y: scroll;
          margin: 0;
          padding: 10px 0 0;
          display: flex;
          flex-direction: column;
          height: 346px;
        }
        .picker.date-picker .date-picker--chronology > li {
          list-style: none;
          flex-shrink: 0;
          width: 100%;
          margin: 0;
          padding: 0;
          text-align: center;
          font-size: 16px;
          color: rgba(0, 0, 0, ..87);
          height: 36px;
          line-height: 36px;
          transition: all .2s ease;
        }
        .picker.date-picker .date-picker--chronology > li:hover {
          background: rgba(0, 0, 0, .1);
          color: var(--preferred-color, #009688);
        }
        .picker.date-picker .date-picker--chronology > li.chronology-selected {
          color: var(--preferred-color, #009688);
          height: 40px;
          line-height: 40px;
          margin: 10px 0;
          font-size: 26px;
          font-weight: 500;
        }
        /*时间选择器样式*/
    </style>


</head>

<body>
    <div class="picker date-picker">
        <!--dialog 元素有自己的样式，而且默认会藏起来自己，使用不便-->
        <header>
            <div class="picker-title">Start date</div>
            <button class="mdui-ripple picker-toggle-year" id="year">
      <mdui-replaceable>-</mdui-replaceable>
    </button>
            <button class="mdui-ripple picker-toggle-date picker-toggle-active" id="date">
      <mdui-replaceable>-</mdui-replaceable>
    </button>
        </header>
        <!--mdui-replaceable 的加入，使HTML结构很复杂，所以有必要用class来简化CSS选择器，不然选择器一堆“>”真是看不下去-->
        <mdui-replaceable>
            <section class="date-picker--month-controller">
                <button class="mdui-btn mdui-btn-icon mdui-ripple" id="previous-month"><i class="mdui-icon material-icons">keyboard_arrow_left</i></button>
                <mdui-replaceable id="date-presenter">-</mdui-replaceable>
                <button class="mdui-btn mdui-btn-icon mdui-ripple" id="next-month"><i class="mdui-icon material-icons">keyboard_arrow_right</i></button>
            </section>
            <aside class="date-picker--weekdays"></aside>
            <mdui-replaceable class="date-picker--calendar-wrapper"></mdui-replaceable>
        </mdui-replaceable>
        <footer class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" id="date-picker-cancel">CANCEL</button>
            <button class="mdui-btn mdui-ripple" id="date-picker-confirm">OK</button>
        </footer>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mdui.min.js"></script>
    <script>
        const $ = mdui.$;
        
        //本地化信息，可自己修改
        const localization = {
          weekdays: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'.split(','),
          weekdayAbbreviations: 'SMTWTFS'.split(''), //为了减少后边检测这是数组还是字符串的工作量（因为字符串没有map这样的方法），这里直接做成数组
          months: 'January,February,March,April,May,June,July,August,September,October,November,December'.split(','),
          monthAbbreviations: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(','), //自己手机的 Material Design 应用上九月的缩写都是Sep，尽管课本上的缩写是“Sept.”。
          am: 'AM',
          pm: 'PM',
          cancelText: 'CANCEL',
          confirmText: 'OK',
          //日期选择器上的日和月
          dayText(weekday, month, day) {
            return `${this.weekdays[weekday]}, ${this.monthAbbreviations[month]} ${day}`;
          },
          monthText(month, year) {
            return `${this.months[month]} ${year}`;
          }
        };
        
        //简体中文，去掉下划线（并给上边的加上下划线）以应用
        const _localization = {
          weekdayAbbreviations: '日一二三四五六'.split(''),
          //星期、月份什么的只会被下面两个函数引用，所以没必要的话，不写也完全可以，星期缩写除外
          am: '上午',
          pm: '下午',
          cancelText: '取消',
          confirmText: '确定',
          //日期选择器上的日和月
          dayText(weekday, month, day) {
            return `${month}月${day}日星期${this.weekdayAbbreviations[weekday]}`;
          },
          monthText(month, year) {
            return `${year}年${month + 1}月`;
          }
        };
        
        //在更新内容时，可以有各种好看的动画
        //更新内容在Shadow DOM里的话，就不能继承外部的CSS，会导致样式错误，所以不能用Shadow DOM。
        customElements.define('mdui-replaceable', class extends HTMLElement {
          #stack = [];
          #wrapper = document.createElement('div');
          animations = {
            fade: {
              enter: { opacity:[0, 0, 1] },
              exit: { opacity: [1, 0, 0] }
            },
            'slide-left': {
              enter: {
                transform: ['translateX(100%)', 'translateX(0)'],
                opacity: [0, 1]
              },
              exit: [
                { transform: 'translateX(0)', opacity: 1 },
                { transform: 'translateX(-100%)', opacity: 0 }
              ]
            },
            'slide-right': {
              enter: {
                transform: ['translateX(-100%)', 'translateX(0)'],
                opacity: [0, 1]
              },
              exit: [
                { transform: 'translateX(0)', opacity: 1 },
                { transform: 'translateX(100%)', opacity: 0 }
              ]
            },
            'slide-up': {
              enter: {
                transform: ['translateY(100%)', 'translateY(0)'],
                opacity: [0, 1]
              },
              exit: [
                { transform: 'translateY(0)', opacity: 1 },
                { transform: 'translateY(-100%)', opacity: 0 }
              ]
            },
            'slide-down': {
              enter: {
                transform: ['translateY(-100%)', &.........完整代码请登录后点击上方下载按钮下载查看