创建日程完善

2020/x-3/biz/css/base-ghh.css

@@ -3566,7 +3566,78 @@ input[type="search"]::-webkit-search-cancel-button {
  background: rgba(243, 88, 107, 0.1);
  border-radius: .04rem;
}
.schedule-date-conflict-warn .icon{
.schedule-date-conflict-warn .icon {
  font-size: .16rem;
  margin-right: .05rem;
}
.ipu-carousel.date-picker-row > ul > li {
  width: .47rem;
  text-align: center;
}
.row-date-month {
  margin: .2rem .2rem .1rem;
}
.date-picker-row .row-date-item-num {
  font-weight: 500;
  font-size: .14rem;
  line-height: .22rem;
  text-align: center;
  color: rgba(26, 32, 44, .85);
  padding: .07rem 0;
  width: .36rem;
  margin: 0 auto;
}
.date-picker-row .row-date-item-wkday {
  font-weight: 500;
  font-size: .12rem;
  line-height: .22rem;
  color: #1A202C;
  color: rgba(26, 32, 44, .45);
}
.ipu-carousel.date-picker-row > ul > li.picker .row-date-item-num-wrap {
  background: #F2F3F7;
}
.ipu-carousel.date-picker-row > ul > li.picker-begin .row-date-item-num-wrap,
.ipu-carousel.date-picker-row > ul > li.picker-end .row-date-item-num-wrap {
  background: linear-gradient(#F2F3F7, #F2F3F7) right center no-repeat;
  background-size: 50% 100%;
}
.ipu-carousel.date-picker-row > ul > li.picker-end .row-date-item-num-wrap {
  background-position: left center;
}
.ipu-carousel.date-picker-row > ul > li.picker-begin .row-date-item-num,
.ipu-carousel.date-picker-row > ul > li.picker-end .row-date-item-num {
  border-radius: 50%;
  background: #F2F3F7;
}
.ipu-carousel.date-picker-row > ul > li.slt .row-date-item-num {
  border-radius: 50%;
  background: #4690FF;
  color: #fff;
}
body.date-picked .list-item-unpicked,
.list-item-pickered {
  display: none;
}
body.date-picked .list-item-pickered {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.ipu-carousel.date-picker-row > ul > li.warn .row-date-item-num {
  color: #F3586B;
}

2020/x-3/biz/js/page/group-schedule-add.js

@@ -1,8 +1,12 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    $(".link-to-time-pick").click(function(){
    $(".link-to-time-pick").click(function () {
      window.location.href = 'group-schedule-time-picker.html';
      // 模拟交互用代码
      // 若是从选取日期页面返回时,有日期,执行下面代码，显示开始结束时间信息
      $("body").addClass("date-picked");
    });
    // 不设置起始和结束值
@@ -11,7 +15,7 @@ require(["ipuUI", "jquery"], function (ipuUI, $) {
      input: '#begin',
      dateFilter: function (num, type) {  //type y/m/d/h/i  年/月/日/时/分
        console.log(num, type);
        if(type == 'i' && num%10 != 0 ){
        if (type == 'i' && num % 10 != 0) {
          return false;
        }
      }

2020/x-3/group-schedule-add.html

@@ -56,7 +56,7 @@
          </div>
        </li>
        <li class="ipu-list-item">
        <li class="ipu-list-item list-item-unpicked">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-list-item-label">
              日程时间
@@ -67,23 +67,27 @@
          </div>
        </li>
        <li class="ipu-list-item">
        <li class="ipu-list-item list-item-pickered">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-flex ipu-flex-justify-space">
              <div class="ipu-list-item-label">
                日程时间
                起始时间
              </div>
              <div class="ipu-list-item-label">
                结束时间
              </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-space link-to-time-pick">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请选择时间" readonly>
                <input class="ipu-list-item-input" type="text" placeholder="请选择起始时间" readonly>
              </div>
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input ipu-txt-right" type="text" placeholder="" readonly>
                <input class="ipu-list-item-input ipu-txt-right" type="text" placeholder="请选择结束时间" readonly>
              </div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical ipu-over-hidden">
            <div class="ipu-list-item-label">

2020/x-3/group-schedule-time-picker.html

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>群组-新建群组日程-选择时间+</title>
  <title>群组日程-选择时间+</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
@@ -47,7 +47,7 @@
            </div>
            <div class="ipu-flex ipu-flex-justify-space link-to-time-pick">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请选择开始时间" readonly>
                <input class="ipu-list-item-input" type="text" placeholder="请选择开始时间" readonly value="2020-12-12">
              </div>
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input ipu-txt-right" type="text" placeholder="请选择结束时间" readonly>
@@ -57,11 +57,149 @@
        </li>
      </ul>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto fn-p-b ">
    <div class="date-block">
      <div class="row-date-month">
        2020年6月
      </div>
      <div class="ipu-carousel ipu-hammer-carousel date-picker-row">
        <ul class="ipu-carousel-wrapper">
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">11</div>
              </div>
              <div class="row-date-item-wkday">周日</div>
            </div>
          </li>
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">12</div>
              </div>
              <div class="row-date-item-wkday">周一</div>
            </div>
          </li>
          <li class="picker-begin">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">13</div>
              </div>
              <div class="row-date-item-wkday">周二</div>
            </div>
          </li>
          <li class="picker ">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">14</div>
              </div>
              <div class="row-date-item-wkday">周三</div>
            </div>
          </li>
          <li class="picker slt ">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">15</div>
              </div>
              <div class="row-date-item-wkday">周四</div>
            </div>
          </li>
          <li class="picker-end warn">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">16</div>
              </div>
              <div class="row-date-item-wkday">周五</div>
            </div>
          </li>
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">17</div>
              </div>
              <div class="row-date-item-wkday">周六</div>
            </div>
          </li>
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">18</div>
              </div>
              <div class="row-date-item-wkday">周日</div>
            </div>
          </li>
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">19</div>
              </div>
              <div class="row-date-item-wkday">周一</div>
            </div>
          </li>
          <li class="">
            <div class="row-date-item">
              <div class="row-date-item-num-wrap">
                <div class="row-date-item-num">20</div>
              </div>
              <div class="row-date-item-wkday">周二</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="common-page-content">
      <ul class="date-time-area">
        <li class="date-time-line">
          <div class="date-time-line-title">
            0:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            1:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            2:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            3:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            4:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            5:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            6:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            7:00
          </div>
        </li>
        <li class="date-time-line">
          <div class="date-time-line-title">
            8:00
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>