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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Redis集群主从复制(一主两从)搭建配置教程【Windows环境】

    如何学会在合适的场景使用合适的技术方案,这值得思考。由于本地环境的使用,所以搭建一个本地的Redis集群,本篇讲解Redis主从复制集群的搭建,使用的平台是Windows,搭建的思路和Linux上基本一致! (精读阅读本篇可能花费您15分钟,略读需5分钟左右)Redis主从复制简单介绍为了使得集群在一部分节点下线或者无法与集群的大多数节点进行通讯的情况下, 仍然可以正常运…

    2022年2月27日
    51
  • android之实现打开相册、拍照录像、播放视频、保存图片到系统相册\指定位置、图片压缩[通俗易懂]

    android之实现打开相册、拍照录像、播放视频、保存图片到系统相册\指定位置、图片压缩[通俗易懂]———照相录像——//实现照相、录像的功能publicvoidcameraForphoto(){Intentintent=newIntent(MediaStore.ACTION_IMAGE_CAPTURE);Filefile=newFile(Environment.getExternalStorageDirecto…

    2022年9月16日
    0
  • pycharm 2021永久激活码【最新永久激活】

    (pycharm 2021永久激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html2QQ4OQYW6M-eyJsa…

    2022年3月22日
    179
  • 最流行的三大数据建模工具

    最流行的三大数据建模工具越来越多的业务,越来越多的信息化系统,让很多公司拥有了海量数据,但是分散的数据、隔离的系统,又形成了一个个数据孤岛。于是,为了利用好数据,各大公司纷纷建设了数据仓库,或者是最近升级为大数据平台之类的,但是,不同条线不同场景的数据又要如何整合到同一个仓库呢?数据模型就此应运而生,通过高度抽象的数据模型,整合各个源系统的数据,最终形成统一、规范、易用的数据仓库,进而提供包括数据集市、数据挖掘…

    2022年6月1日
    36
  • Cloud Foundry中gorouter对StickySession的支持

    Cloud Foundry中gorouter对StickySession的支持

    2021年11月28日
    45
  • 2022.01 激活_在线激活

    (2022.01 激活)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月30日
    112

发表回复

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

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