datePicker 日期时间选择

datePicker

日期选择或者时间选择

使用方法

AlipayJSBridge.call('datePicker', {
  beginDate: '2016-10-10',
  minDate: '2016-10-9',
  maxDate: '2017-10-9',
  mode: 1,
}, function(e) {
  alert(JSON.stringify(e));
});

 AlipayJSBridge.call('datePicker', {
  minDate: '2015-1-1 0:0:0',
  maxDate: '2050-1-1 0:0:0',
  mode: 2
},function(e) {
  console.log(e);
});

代码演示

不同模式下的日期/时间选择

<h1>点击按钮查看各个模式下日期选择</h1>

<a href="javascript:void(0)" class="btn date">选择日期</a>
<a href="javascript:void(0)" class="btn time">选择时间</a>
<a href="javascript:void(0)" class="btn datetime">选择日期+时间</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.date').addEventListener('click', function() {
    AlipayJSBridge.call('datePicker', {
      beginDate: '2016-10-10',
      minDate: '2016-10-9',
      maxDate: '2017-10-9',
      mode: 1,
    }, function(e) {
      alert(JSON.stringify(e));
    });
  });
  document.querySelector('.time').addEventListener('click', function() {
    AlipayJSBridge.call('datePicker', {
      mode: 0,
    }, function(e) {
      alert(JSON.stringify(e));
    });
  });
  document.querySelector('.datetime').addEventListener('click', function() {
    AlipayJSBridge.call('datePicker', {
      minDate: '2016-10-9',
      maxDate: '2017-10-9',
      beginDate: '2016-10-9',
      mode: 2,
    }, function(e) {
      alert(JSON.stringify(e));
    });
  });
});
</script>

身份证日期选择

<h1>点击按钮选择身份证有效期</h1>

<a href="javascript:void(0)" class="btn date">选择日期</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.date').addEventListener('click', function() {
    AlipayJSBridge.call('datePicker', {
      beginDate: '2015-10-12',
      minDate: '2015-10-09',
      maxDate: '2016-10-09',
      mode: 1,
      isIDCard: true
    }, function(e) {
      alert(JSON.stringify(e));
    })
  });
});
</script>

API

AlipayJSBridge.call('datePicker', {
  mode, beginDate, minDate, maxDate, isIDCard
}, fn);

入参

出参

回调函数带入的参数result: {error, date}

使用注意

• mode虽然以日期格式字符串表示，但是并不是说返回的格式是这样的，返回的格式是根据系统格式决定的，比如返回日期可能是2016-10-10。也就是说，它的作用是决定选择什么。
• 选择时间(mode=1)，或选择日期+时间(mode=2)时，不支持对秒的选择界面，返回结构中的秒数被置为00
• 如果要通过代码隐藏日期选择，请使用AlipayJSBridge.call('hideDatePicker');
• minDate, maxDate, beginDate并不只是日期，还可以是时间。
• isIDCard的作用是让我们可以选择长期，英文系统下是**Long Term，公民在46周岁后领取身份证，有效期是长期。
• 特别注意，安卓下传入参数的时候，必须做到beginDate >= minDate以及beginDate <= maxDate，否则会报参数错误。