mui的时间控件 picker

mui的时间控件 pickerhtml,body,.mui-content{height:0px;margin:0px;background-color:#efeff4;}h5.mui-content-padded{margin-left:3px;margin-top:20px!important;}h5.mui-content-padded:first-child

大家好,又见面了,我是你们的朋友全栈君。<!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>


<!–标准mui.css–>


<link rel=”stylesheet” href=”../css/mui.min.css”>


<!–App自定义的css–>


<link rel=”stylesheet” type=”text/css” href=”../css/app.css” />


<link rel=”stylesheet” type=”text/css” href=”../css/mui.picker.min.css” />


<style>


html,


body,


.mui-content {


height: 0px;


margin: 0px;


background-color: #efeff4;


}


h5.mui-content-padded {


margin-left: 3px;


margin-top: 20px !important;


}


h5.mui-content-padded:first-child {


margin-top: 12px !important;


}


.mui-btn {


font-size: 16px;


padding: 8px;


margin: 3px;


}


.ui-alert {


text-align: center;


padding: 20px 10px;


font-size: 16px;


}


* {


-webkit-touch-callout: none;


-webkit-user-select: none;


}


</style>


</head>


<body>





<div class=”mui-content”>


<div class=”mui-content-padded”>


<h5 class=”mui-content-padded”>常规示例</h5>


<button id=’demo4′  class=”btn mui-btn mui-btn-block”>选择日期 …</button>


<div id=’result’ class=”ui-alert”></div>


</div>


</div>


<script src=”../js/mui.min.js”></script>


<script src=”../js/mui.picker.min.js”></script>


<script>


document.getElementById(“demo4”).addEventListener(‘tap’, function() {

   
var dtpicker = new mui.DtPicker({

                        //value:self.AuthorizationTime,

                        type: “date”,//设置日历初始视图模式 

                        //beginDate: new Date(self.AuthorizationTime),//设置开始日期 

                        //endDate: new Date(self.nowDate.getFullYear(), self.nowDate.getMonth(), self.nowDate.getDate()),//设置结束日期 

                        labels: [‘年’, ‘月’, ‘日’]//设置默认标签区域提示语 

                       

                        }//时间/日期别名 

                    ) 

                    dtpicker.show(function(e) {

                        

                        document.getElementById(‘result’).html=e.text;

                       
//changedate(e.text);

                   

                    }) 

 


});





//可以转换格式017-01-01  转换成2017年1月1号


function changedate(result)


{








}


</script>


</body>

</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/142339.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Django(17)orm查询操作「建议收藏」

    Django(17)orm查询操作「建议收藏」前言查找是数据库操作中一个非常重要的技术。查询一般就是使用filter、exclude以及get三个方法来实现。我们可以在调用这些方法的时候传递不同的参数来实现查询需求。在ORM层面,这些查询条件都

    2022年7月29日
  • Django 教程_最简单剪花朵的步骤

    Django 教程_最简单剪花朵的步骤一、Django简介1.web框架介绍具体介绍Django之前,必须先介绍WEB框架等概念。web框架:别人已经设定好的一个web网站模板,你学习它的规则,然后“填空”或“修改”成你自己…

    2022年9月8日
  • ios项目开发(天气预报项目):通过经纬度获取当前城市名称

    ios项目开发(天气预报项目):通过经纬度获取当前城市名称

    2021年11月23日
  • Spring boot Mybatis 整合(注解版)

    Spring boot Mybatis 整合(注解版)之前写过一篇关于springboot与mybatis整合的博文,使用了一段时间spring-data-jpa,发现那种方式真的是太爽了,mybatis的xml的映射配置总觉得有点麻烦。接口定义和映射离散在不同的文件中,阅读起来不是很方便。于是,准备使用mybatis的注解方式实现映射。如果喜欢xml方式的可以看我之前的博文:SpringbootMybatis整合(完整版)开发环境:开

    2022年6月9日
  • layui 树形表格 treeTable使用详细指南,不能折叠解决办法

    layui 树形表格 treeTable使用详细指南,不能折叠解决办法最近在写一个商品分类管理的功能,本来想用layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点不适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的要求,特此将使用方法以及其中遇到的一些坑记录下来。。。首先看下treeTable的演示地址项目地址好了,如果看完演示到这里你觉得正好符合你的功能要求,就可以继续往下看了,虽…

    2022年5月4日
  • 完整html网页代码_css长度单位

    完整html网页代码_css长度单位长度单位转换JavaScript程序varcomputed=falsevardestination=”/”vardecimal=0functionconvert(entryform,from,to){convertfrom=from.selectedIndexconvertto=to.selectedIndexentryform.display.value=(…

    2022年9月3日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号