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等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
随机推荐
- 高可用web架构: LVS+keepalived+nginx+apache+php+eaccelerator（+nfs可选 可不选）
LVS(负载均衡器).Heartbeat.Corosync.Pacemaker.Web高可用集群.MySQL高可用集群.DRDB.iscsi.gfs2.cLVM等,唯一没有讲解的就是L ...
- Linux 软件安装卸载 （源码、rpm）
Linux下软件的安装主要有两种不同的形式.第一种安装为源码安装,文件名为xxx.tar.gz压缩包为主;以第一种方式发行的软件多为以源码形式发送的.第二种方式则是另一种安装文件名为xxx.i386. ...
- SpringBoot基础篇-SpringBoot快速入门
SpringBoot基础 学习目标: 能够理解Spring的优缺点 能够理解SpringBoot的特点 能够理解SpringBoot的核心功能 能够搭建SpringBoot的环境 能够完成applic ...
- jenkins 参数化运行性能测试脚本
概述 我们用jenkins做持续集成的时候,常常需要跑不同的脚本,传不同的参数.尤其是性能基准测试,线程数和持续时间需要实时调整以满足我们的测试需求.那么是不是需求变了,我们 就需要重新准备一套脚本? ...
- （数据科学学习手札78）基于geopandas的空间数据分析——基础可视化
本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 通过前面的文章,我们已经对geopanda ...
- java 入门如何设计类
2019/12/24 | 在校大二上学期 | 太原科技大学 初学java后,我们会发现java难点不在于Java语法难学,而是把我们挂在了如何设计类的“吊绳”上了.这恰恰也是小白 ...
- 腾讯2020校园招聘-后台&综合-第一次笔试 题解
对数据结构和算法感兴趣的可以关注一下https://github.com/MCQ1999/Datastructure_Algorithm_Solutions,分享算法题的解题思路和代码~ 1.压缩算法 ...
- .net core 中api 模型验证
AddControllers/AddMvc方法允许添加自定义ActionFilterAttribute进行过滤 文档中这么定义Filter: 可以创建自定义筛选器,用于处理横切关注点. 横切关注点的示 ...
- Umi 小白纪实（三）—— 震惊！路由竟然如此强大！
在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角 借用一句广告词,Umi 路由的能量,超乎你的想象 一.基本用法 Umi 的路由根结点是全局 layout s ...
- MRAM技术进入汽车应用
在整个地址空间范围内读写各种类型的数据.通常MRAM的操作和时序类似于32位微控制器的规范和时序.与DLFASH相比,当今的非易失性存储器可以接受MRAM设备的性能和吞吐量. 与当今的DFLASH相比 ...