A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

a382792481

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© a382792481 初级黑马   /  2019-7-17 16:04  /  895 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

[JavaScript] 纯文本查看 复制代码
//起始时间限制
var d       = new Date()
var year    = d.getFullYear() ;
var month   = d.getMonth()+1;
var day     = d.getDate();
var hour    = d.getHours();
var minute  = d.getMinutes();

  (function($) {

  /*开始时间*/
    $.init();
    var result10 = $('#result10')[0];
    var btns10 = $('#demo10');
    var result11 = $('#result11')[0];
    var btns11 = $('#demo11');
    btns10.each(function(i, btn) {
      btn.addEventListener('tap', function() {
        var _self = this;
        if(_self.picker) {
          _self.picker.show(function (rs) {
            result10.innerText = rs.text;
            _self.picker.dispose();
            _self.picker = null;
          });
        } else {
          var optionsJson = this.getAttribute('data-options') || '{}';
          var options = JSON.parse(optionsJson);
          var id = this.getAttribute('id');

          _self.picker = new $.DtPicker({
            type: "time",//设置日历初始视图模式 
            beginDate: new Date(year, month, day, hour, minute),//设置开始日期
          });
          _self.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 的第二个字母),用法同年
             */
            result10.innerText = rs.text;
            /* 
             * 返回 false 可以阻止选择框的关闭
             * return false;
             */
            /*
             * 释放组件资源,释放后将将不能再操作组件
             * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
             * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
             * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
             */
            _self.picker.dispose();
            _self.picker = null;
          });
        }
      }, false);
    });

  /*结束时间*/
    btns11.each(function(i, btn) {
      btn.addEventListener('tap', function() {
        var _self = this;
        if(_self.picker) {
          _self.picker.show(function (rs) {
            result11.innerText = rs.text;
            _self.picker.dispose();
            _self.picker = null;
          });
        } else {
          var optionsJson = this.getAttribute('data-options') || '{}';
          var options = JSON.parse(optionsJson);
          var id = this.getAttribute('id');
          
          _self.picker = new $.DtPicker({
            type: "time",//设置日历初始视图模式 
            beginDate: new Date(year, month, day, hour, minute),//设置开始日期
          });
          _self.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 的第二个字母),用法同年
             */
            result11.innerText = rs.text;
            /* 
             * 返回 false 可以阻止选择框的关闭
             * return false;
             */
            /*
             * 释放组件资源,释放后将将不能再操作组件
             * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
             * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
             * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
             */
            _self.picker.dispose();
            _self.picker = null;
          });
        }
        
      }, false);
    });
  })(mui);

例如(实现成下面这样的):



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马