zoukankan      html  css  js  c++  java
  • mui 时间选择器和上传图片

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>编辑店铺信息</title>
    <link href="../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../css/mui.poppicker.css" rel="stylesheet" />
    <script src="../js/mui.picker.min.js"></script>
    <script src="../js/mui.poppicker.js"></script>

    </script>
    <script type="text/javascript" charset="utf-8">
    mui.init();
    </script>
    <style>

    </style>
    </head>
    <body class="d_bg_fff">
    <!--头部开始-->
    <header id="backbtn" class="mui-bar2 mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">编辑店铺信息</h1>
    </header>
    <!--头部结束-->
    <!--内容开始-->
    <div class="mui-content">


    <!--lsy-->
    <div class="d_pin_fenge"></div>
    <!--店铺营业时间-->
    <div class="d_up_list w96 d_kuang fo">
    <div class="d_dian_lil fl">
    <i class="iconfont icon-shijian"></i>
    <span class="">店铺营业时间</span>
    </div>
    <div class="time fr">
    <input name="start" type="hidden" id="start" value="">
    <button id='demo2' class="btn mui-btn mui-btn-block" style="text-align: right;padding-left: 0;margin-left: 0;">请选择开始时间
    <i class="iconfont icon-arrow-down color_999 lsy-font-size-12"></i>
    </button>
    </div>
    </div>

    <!--店铺打烊时间-->
    <div class="d_up_list w96 d_kuang fo">
    <div class="d_dian_lil fl">
    <i class="iconfont icon-shijian1"></i>
    <span class="">店铺打烊时间</span>
    </div>
    <div class="time fr">
    <input name="end" type="hidden" id="end" value="">
    <button id='demo3' class="btn mui-btn mui-btn-block" style="text-align: right;padding-left: 0;margin-left: 0;">请选择打烊时间
    <i class="iconfont icon-arrow-down color_999 lsy-font-size-12"></i>
    </button>
    </div>
    </div>
    <div class="d_pin_fenge"></div>
    <div class="d_dian_li fo w96 lsy_dian_item">
    <div class="d_dian_lil">
    <i class="iconfont icon-take-photo"></i>
    <span class="">店铺主图</span>
    <span class="lsy-font-size-12 lsy_dian_span">(建议上传宽710×高240,大小不超过2M)</span>
    </div>
    <!--上传-->
    <div id="feedback" class="mui-page-content gz_question feedback">
    <div id='image-list' class="row image-list">

    </div>

    </div>
    </div>
    <div class="d_pin_fenge"></div>
    <!--商家实景-->
    <div class="d_dian_li fo w96 lsy_dian_item">
    <div class="d_dian_lil">
    <i class="iconfont icon-dianpuicon"></i>
    <span class="">商家实景</span>
    <span class="lsy-font-size-12 lsy_dian_span">(最多上传9张哦)</span>
    </div>
    <!--上传-->
    <div id="feedback" class="mui-page-content gz_question feedback">
    <div id='image-list-two' class="row image-list">

    </div>

    </div>
    </div>

    </div>

    <!--上传图片引入的-->
    <link rel="stylesheet" type="text/css" href="../css/feedback-page.css"/>
    <script src="../js/feedback-page.js"></script>
    <script src="../js/feedback-pagetwo.js"></script>



    <script>
    (function($, doc) {
    var _getParam = function(obj, param) {
    return obj[param] || '';
    };
    var end1 = "";
    // 出生年月
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var demo2 = document.getElementById('demo2');
    var demo3 = document.getElementById('demo3');
    // 开始时间
    demo2.addEventListener('tap', function() {
    var optionsJson = this.getAttribute('data-options') || '{}';
    var options = JSON.parse(optionsJson);
    var id = this.getAttribute('id');
    var picker = new $.DtPicker({
    type: "time",
    //type: "hour", //设置日历初始化
    beginYear: 2019, //设置开始日期
    endYear:2099
    //endDate: new Date //设置结束日期
    });
    picker.show(function(rs) {
    /*
    * rs.value 拼合后的 value
    * rs.text 拼合后的 text
    * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
    * rs.m 月,用法同年
    * rs.d 日,用法同年
    * rs.h 时,用法同年
    * rs.i 分(minutes 的第二个字母),用法同年
    */
    demo2.innerText = rs.text;
    var endDate1 = new Date(rs.text+":00");
    end1 = endDate1.getTime();
    start = rs.text;
    /*
    * 返回 false 可以阻止选择框的关闭
    * return false;
    */
    /*
    * 释放组件资源,释放后将将不能再操作组件
    * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
    * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
    * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
    */
    picker.dispose();
    });
    }, false);


    // 结束时间
    demo3.addEventListener('tap', function() {
    var optionsJson = this.getAttribute('data-options') || '{}';
    var options = JSON.parse(optionsJson);
    var id = this.getAttribute('id');
    var picker = new $.DtPicker({
    type: "datetime",
    //type: "hour", //设置日历初始化
    beginYear: 2019, //设置开始日期
    endYear:2099
    // endDate: new Date //设置结束日期
    });
    picker.show(function(rs) {
    /*
    * rs.value 拼合后的 value
    * rs.text 拼合后的 text
    * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
    * rs.m 月,用法同年
    * rs.d 日,用法同年
    * rs.h 时,用法同年
    * rs.i 分(minutes 的第二个字母),用法同年
    */
    demo3.innerText = rs.text;
    var endDate = new Date(rs.text+":00");
    var end2 = endDate.getTime();
    if(end2<=end1){
    mui.toast("结束时间必须晚于开始时间");
    }
    end = rs.text;
    /*
    * 返回 false 可以阻止选择框的关闭
    * return false;
    */
    /*
    * 释放组件资源,释放后将将不能再操作组件
    * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
    * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
    * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
    */
    picker.dispose();
    });
    }, false);
    })(mui, document);
    </script>
    </body>
    </html>

  • 相关阅读:
    课程开始的第一次作业
    第四次寒假作业——实现五种语言的选择
    关于改良报告与学习总结(Ⅰ)
    Vue路由守卫之路由独享守卫
    Vue路由守卫之组件内路由守卫
    Vue中如何插入m3u8格式视频,3分钟学会!
    Vue中如何使用less
    第一章 初识爬虫
    【JQuery】注册中实现图片预览
    【Python】多种方式实现生成验证码
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10776086.html
Copyright © 2011-2022 走看看