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>
mui 时间选择器和上传图片的更多相关文章
- mui时间选择器选择今天以后的时间
<script type="text/javascript"> (function($) { $.init(); // var result = $('#result' ...
- Hbuilder MUI 下拉选择与时间选择器
一. Hbuilder 下拉选择 <link rel="stylesheet" href="../../../assets/mui/css/mui.picker.m ...
- 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- ClockPicker – 时钟风格 Bootstrap 时间选择器
ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...
- Android课程---日历选择器和时间选择器
package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...
- 分享一下我封装iOS自定义控件的体会，附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>
前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...
- bootstrap 时间选择器 datetime
$("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...
- 移动端material风格日期时间选择器
原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
随机推荐
- Eclipse 无法引用到Maven 解决方法
问题描述:打开Eclipse进入java EE视图下,发现原有的Maven Dependencies目录不存在,显示的是org.maven.ide.eclipse.MAVEN2_CLASSPATH_C ...
- 2020 年 中国.NET开发者调查报告
微信公众号dotnet跨平台2020年初做的一个关于中国.NET开发者调查收到了开发者近 1400 条回复.这份调查报告涵盖了开发者工具链的所有部分,包括编程语言.应用架构.应用服务器.运行时平台.框 ...
- HttpContext.Current.Server未将对象引用到实例
问题描述: 在一些类库中需要读取当前系统的xml文件,当时用HttpContext.Current无法找到实例化对象 解决代码如下: XmlDocument xml = new XmlDocument ...
- java开发JSP+Servlet+bootstrap开发电影院购票系统 源码
基于JSP+Servlet+bootstrap开发电影院购票系统:开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+Mysql数据库 程序要求:电影院订票系统 用 ...
- JavaScript中基本数据类型之间的转换
在JavaScript中共有六种数据类型,其中有五种是基本数据类型,还有一种则是引用数据类型.五种基本数据类型分别是:Number 数值类型.String 字符串类型.Boolean 布尔类型, nu ...
- 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
- spark 报错 InvalidClassException: no valid constructor
2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...
- 这个 Python 代码自动补全神器搞得我卧槽卧槽的
是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ! 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...
- dotMemory 2019.3.1一直试用
创建一个bat脚本, 里面写上: reg delete HKEY_CURRENT_USER\Software\JetBrains\dotMemory /freg delete HKEY_CURRENT ...
- 【原创】关于pyinstaller打包的程序执行出错问题,pyinstaller3.5只支持matplotlib3.0.2已经解决
之前,在用pyinstaller打包一个python程序时没有问题,后来不知道什么原因,再打包时出现了所谓的pyinstaller打包报错: RecursionError: maximum recur ...