<!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>

mui 时间选择器和上传图片的更多相关文章

  1. mui时间选择器选择今天以后的时间

    <script type="text/javascript"> (function($) { $.init(); // var result = $('#result' ...

  2. Hbuilder MUI 下拉选择与时间选择器

    一. Hbuilder 下拉选择 <link rel="stylesheet" href="../../../assets/mui/css/mui.picker.m ...

  3. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  4. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  5. ClockPicker – 时钟风格 Bootstrap 时间选择器

    ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...

  6. Android课程---日历选择器和时间选择器

    package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...

  7. 分享一下我封装iOS自定义控件的体会，附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>

    前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...

  8. bootstrap 时间选择器 datetime

    $("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...

  9. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

随机推荐

  1. ubuntu python及python IDLE 的安装

    ubuntu下Python的安装和使用 文章参考出处:https://www.cnblogs.com/luckyalan/p/6703590.html ubuntu14.04 安装Python2.7: ...

  2. thinkphp v5.1.36 LTS 如果设置跨域访问

    修改route/route.php中的路由例如 Route::get('new/:id', 'News/read') ->ext('html') ->header('Access-Cont ...

  3. [红日安全]Web安全Day1 - SQL注入实战攻防

    本文由红日安全成员: Aixic 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了一个名 ...

  4. JAVA架构师眼中的高并发架构，分布式架构 应用服务器集群

    前言 高并发经常会发生在有大活跃用户量,用户高聚集的业务场景中,如:秒杀活动,定时领取红包等. 为了让业务可以流畅的运行并且给用户一个好的交互体验,我们需要根据业务场景预估达到的并发量等因素,来设计适 ...

  5. Node.js文档-模块

    核心模块 Node为Javascript提供了很多服务器级别的API,绝大多数都被包装到了一个具名的核心模块中,例如文件操作的fs核心模块,http服务构建的http模块等,核心模块的使用必须通过re ...

  6. 教你如何理解JAVA的I/O类库

    花括号MC(huakuohao-mc):关注JAVA基础编程及大数据,注重经验分享及个人成长. Java 的 I/O 流,说简单也简单,说复杂也复杂.复杂是因为进行一次常规的文件 I/O 操作通常要用 ...

  7. css基础-盒子模型+背景和列表

    border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...

  8. 10.HanLP实现k均值--文本聚类

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 10. 文本聚类 正所谓物以类聚,人以群分.人们在获取数据时需要整理,将相似的数据 ...

  9. [PKUWC2018]Minimax [dp,线段树合并]

    好妙的一个题- 我们设 \(f_{i,j}\) 为 \(i\) 节点出现 \(j\) 的概率 设 \(l = ch[i][0] , r = ch[i][1]\) 即左儿子右儿子 设 \(m\) 为叶子 ...

  10. kali-linux下载地址

    1 https://www.kali.org/downloads/2 http://cdimage.kali.org/ 下载地址.