六.MUI - datepicker(时间选择器)

 
 


完整代码:

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
    <div style="padding:15px;">
        <button id='pickDateBtn' type="button" class="mui-btn">选择日期</button>
    </div>
    <div style="padding:15px;">
        <button id='pickTimeBtn' type="button" class="mui-btn">选择时间</button>
    </div>
</div>
<script type="text/javascript">
document.getElementById("pickDateBtn").addEventListener('tap', function() {
    var dDate = new Date();
    //设置当前日期(不设置默认当前日期)
    dDate.setFullYear(2016, 7, 16);
    var minDate = new Date();
    //最小时间
    minDate.setFullYear(2010, 0, 1);
    var maxDate = new Date();
    //最大时间
    maxDate.setFullYear(2016, 11, 31);
    plus.nativeUI.pickDate(function(e) {
        var d = e.date;
        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
    }, function(e) {
        mui.toast("您没有选择日期");
    }, {
        title: '请选择日期',
        date: dDate,
        minDate: minDate,
        maxDate: maxDate
    });
});
document.getElementById("pickTimeBtn").addEventListener('tap', function() {
    var dTime = new Date();
    //设置默认时间
    dTime.setHours(6, 0);
    plus.nativeUI.pickTime(function(e) {
        var d = e.date;
        mui.toast("您选择的时间是:" + d.getHours() + ":" + d.getMinutes());
    }, function(e) {
        mui.toast("您没有选择时间");
    }, {
        title: "请选择时间",
        is24Hour: true,
        time: dTime
    });
}); class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
    <div style="padding:15px;">
        <button id='pickDateBtn' type="button" class="mui-btn">选择日期</button>
    </div>
    <div style="padding:15px;">
        <button id='pickTimeBtn' type="button" class="mui-btn">选择时间</button>
    </div>
</div>
<script type="text/javascript">
document.getElementById("pickDateBtn").addEventListener('tap', function() {
    var dDate = new Date();
    //设置当前日期(不设置默认当前日期)
    dDate.setFullYear(2016, 7, 16);
    var minDate = new Date();
    //最小时间
    minDate.setFullYear(2010, 0, 1);
    var maxDate = new Date();
    //最大时间
    maxDate.setFullYear(2016, 11, 31);
    plus.nativeUI.pickDate(function(e) {
        var d = e.date;
        mui.toast('您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
    }, function(e) {
        mui.toast("您没有选择日期");
    }, {
        title: '请选择日期',
        date: dDate,
        minDate: minDate,
        maxDate: maxDate
    });
});
document.getElementById("pickTimeBtn").addEventListener('tap', function() {
    var dTime = new Date();
    //设置默认时间
    dTime.setHours(6, 0);
    plus.nativeUI.pickTime(function(e) {
        var d = e.date;
        mui.toast("您选择的时间是:" + d.getHours() + ":" + d.getMinutes());
    }, function(e) {
        mui.toast("您没有选择时间");
    }, {
        title: "请选择时间",
        is24Hour: true,
        time: dTime
    });
});

js获取当前时间

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间 myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2018mui教程 mui实战视频教程 web移动端开发教程+源码 课程简介: 结合MUI框架完成HTML5移动端混合应用开发(微信实战)。 本课程将介绍如何使用HTML5完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信项目为目标,介绍MUI框架的使用,包含移动端排版布局,HTML5借助框架完成手机摄像头调用、手机相册调用、手机重力感应调用等特效,并最终完成微信案例项目。 课程目标: 学习HTML5移动端混合应用开发,并完成微信项目实战,本课程介绍了MUI框架的使用,以及Hbublder工具的基本操作。适用人群本课程适合具有HTML与CSS基础,了解HTML5及CSS3,并想跨入HTML5移动端混合应用开发领域的同仁。 课程目录介绍: 1【MUI框架】HTML5混合应用开发与MUI框架 2 MUI移动端框架初体验 3【微信主页】顶部标题栏 4【微信主页】底部Tab导航 5【微信主页】底部Tab导航样式调整 6【微信主页】图文列表 7【微信项目】整体效果展示 8【微信子页面】DIV方式创建子页面 9【真机调试】HTML5程序真机调试 10【微信子页面】WebView方式创建子页面 11【微信子页面】WebView方式创建子页面 12【微信子页面】webView子页面效果演示 13【微信子页面】底栏Tab页面切换 14【微信子页面】打开微信聊天子页面 15【微信子页面】聊天页面效果展示 16【微信子页面】页面间传值 17【相册】Html5访问手机相册,发送单张图片 18【相册】Html5访问手机相册,发送多张图片 19【摄像头】Html5访问手机摄像头,发送拍摄照片 20【摇一摇】获取重力感应 21【摇一摇】监控重力感应及摇一摇实现逻辑 22【微信子页面】发现页面 23【朋友圈】朋友圈页面布局 24【朋友圈】下拉刷新 25【朋友圈】上拉加载 26【事件】移动端事件 27【其他】MUI其他相关 28【案例包】项目案例包效果展示 29【案例包】项目案例包源码获取 30【应用退出】应用程序退出实现 31【打包部署】应用程序云端打包与发布 Mui视频教程部分 MUI - dialog对话框、ipnut (表单).mp4 MUI - datepicker(时间选择器).mp4 MUI 介绍、新项目创建、 基础布局.mp4 MUI - 窗口管理及窗口之间的数据传递.mp4 MUI - 复选框、单选框、使用js获取选择值.mp4 MUI - cardview(卡片视图)、mask(遮罩蒙版).mp4 MUI - accordion(折叠面板)、button(按钮).mp4 h.js 使用教程.mp4 MUI - actionsheet(操作表)、badge(数字角标).mp4 MUI - slide(轮播组件).mp4 APP与服务器之间的交互原理、MUI Ajax使用.mp4 MUI - progressbar(进度条)、滑块及switch开关.mp4 MUI - 事件管理及自定义事件详解.mp4 微信实战-结合MUI框架完成HTML5移动端混合应用开发视频教程

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值