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等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
随机推荐
- C#的静态工厂方法与构造函数对比
最近,在与同事进行协同编程时,我们开始讨论在C#中初始化新对象的最佳方法.我一直是使用构造函数实现,尽管他倾向于静态工程方法.这引起了关于每种类型的利弊的大量来来回回的讨论. 为了说明我所说的内容,这 ...
- centos容器yum安装JDK环境
1.yum命令安装jdk 选择版本安装 -openjdk java--openjdk-devel 或者如下命令,安装jdk1.8.0的所有文件 -openjdk*yum install -y java ...
- docker实战部署Javaweb项目
一.部署环境说明 docker服务版本:version 18.09.0nginx服务版本:version: nginx/1.15.10redis服务版本:version: redis/5.0.3tom ...
- SAP Basis DEBUG改表数据权限角色设计
SAP Basis DEBUG改表数据权限角色设计 项目实践中,因种种原因不得不要通过debug才能解决一些特定的问题,所以就涉及到了debug权限角色的定义了. DEBUG的权限,无非就是: 1)数 ...
- Binder基本使用
Android开发中,Binder是一种跨进程通信方式,而使用AIDL可以实现Binder的工作. 如何使用它是了解它的第一步,本文章主要记录使用Binder的一些步骤.(代码思路参考<Andr ...
- AndroidStudio跑起来第一个App时新手遇到的那些坑
场景 当你看了一个Android教程,满心欢喜想要运行第一个HelloWorld时却发现,Android Studio新建的工程老是报错. 会编译不通过.运行按钮灰色.没有虚拟机,一个简简单单的Hel ...
- M5310-A 版本
模块外表 型号 BAND M5310-A MBRH0S04 +NB ...
- [.NET][C#] C#中的时间戳
Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年1月1日0时0分0秒( ...
- 小Z的袜子(hose) HYSBZ - 2038 莫队+分块
#include<bits/stdc++.h> using namespace std; typedef long long ll; typedef pair<ll,ll>pl ...
- Asp.ner Core-Blazor随手记
后续继续补充内容.... 1.安装.Net Core3.0 SDK及以上版本都有待Blazor 2.如果想在.razor页面直接使用C#代码,相当于html里面嵌入了C#代码,可以在命令行里面输入下面 ...