Amaze UI

Datepicker


用于选择或输入日期

时间选择的参考:DateTimePicker - 日期时间选择插件

注意:

在触控设备上, <input> 获得焦点时会激活键盘,部分浏览器添加 readonly 属性以后可禁止键盘激活。

基础用法

Copy
<form action="" class="am-form" data-am-validator>
  <p>
  <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
  </p>
  <p><button class="am-btn am-btn-primary">提交</button></p>
</form>

<input> 上增加 data-am-datepicker 属性,调用日期插件。

在线运行

组合使用

Copy
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'dd-mm-yyyy'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

结合 .am-input-group 使用,父类添加 class .am-datepicker-date ,非 <input> 触发元素需增加 .am-datepicker-add-on class。

在线运行

主题用法

Copy
<p>
  <input type="text" class="am-form-field" placeholder="日历组件"
         data-am-datepicker="{theme: 'success', weekStart: 6}" readonly/>
</p>

默认为蓝色,设置 theme 选项可改变颜色:

  • success: 绿色
  • warning: 橙色
  • danger: 红色

在线运行

视图模式

设置日历初始视图模式

Copy
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

通过参数 viewMode 设置日历初始视图模式:

  • days: 显示天(默认)
  • months: 显示月
  • years: 显示年

在线运行

只选择到月份

Copy
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}">
  <input type="text" class="am-form-field" placeholder="日历组件" readonly>
  <span class="am-input-group-btn am-datepicker-add-on">
    <button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
  </span>
</div>

设置参数 minViewMode 可以限制视图模式。

在线运行

只选择到年份

Copy
<div>
  <input type="text" class="am-form-field" data-am-datepicker="{format: 'yyyy ', viewMode: 'years', minViewMode: 'years'}" placeholder="日历组件" data-am-datepicker readonly/>
</div>

注意 format: 'yyyy ' 里面 yyyy 后面多加一个空格。

在线运行

时间区间

2014-12-20
2014-12-25
Copy
<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
  <p>开始日期应小于结束日期!</p>
</div>
<div class="am-g">
  <div class="am-u-sm-6">
    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始日期</button><span id="my-startDate">2014-12-20</span>
  </div>
  <div class="am-u-sm-6">
    <button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束日期</button><span id="my-endDate">2014-12-25</span>
  </div>
</div>
<script>
  $(function() {
    var startDate = new Date(2014, 11, 20);
    var endDate = new Date(2014, 11, 25);
    var $alert = $('#my-alert');
    $('#my-start').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期!').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#my-start').data('date'));
        }
        $(this).datepicker('close');
      });

    $('#my-end').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() < startDate.valueOf()) {
          $alert.find('p').text('结束日期应大于开始日期!').end().show();
        } else {
          $alert.hide();
          endDate = new Date(event.date);
          $('#my-endDate').text($('#my-end').data('date'));
        }
        $(this).datepicker('close');
      });
  });
</script>

通过监听自定义事件 changeDate,可以在回调函数中进行验证等操作。通过 $().data('date') 获取改变后的日期。

在线运行

设置禁止选择日期

设置禁用日期

禁用日期

Copy
<div class="am-g">
  <div class="am-u-sm-6">
    设置禁用日期<br/>
    <p><input type="text" class="am-form-field" placeholder="今天之前的日期被禁用" id="my-start-2"/></p>
  </div>
  <div class="am-u-sm-6">
    禁用日期<br/>
    <p><input type="text" class="am-form-field" id="my-end-2" /></p>
  </div>
</div>
<script>
  $(function() {
    var nowTemp = new Date();
    var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
    var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
    var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
    var $myStart2 = $('#my-start-2');

    var checkin = $myStart2.datepicker({
      onRender: function(date, viewMode) {
        // 默认 days 视图,与当前日期比较
        var viewDate = nowDay;

        switch (viewMode) {
          // moths 视图,与当前月份比较
          case 1:
            viewDate = nowMoth;
            break;
          // years 视图,与当前年份比较
          case 2:
            viewDate = nowYear;
            break;
        }

        return date.valueOf() < viewDate ? 'am-disabled' : '';
      }
    }).on('changeDate.datepicker.amui', function(ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
          var newDate = new Date(ev.date)
          newDate.setDate(newDate.getDate() + 1);
          checkout.setValue(newDate);
        }
        checkin.close();
        $('#my-end-2')[0].focus();
    }).data('amui.datepicker');

    var checkout = $('#my-end-2').datepicker({
      onRender: function(date, viewMode) {
        var inTime = checkin.date;
        var inDay = inTime.valueOf();
        var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

        // 默认 days 视图,与当前日期比较
        var viewDate = inDay;

        switch (viewMode) {
          // moths 视图,与当前月份比较
          case 1:
            viewDate = inMoth;
            break;
          // years 视图,与当前年份比较
          case 2:
            viewDate = inYear;
            break;
        }

        return date.valueOf() <= viewDate ? 'am-disabled' : '';
      }
    }).on('changeDate.datepicker.amui', function(ev) {
      checkout.close();
    }).data('amui.datepicker');
  });
</script>

初始化的时候通过 onRender 选项设置禁用日期。

v2.5onRender 方法增加了 viewMode 参数,以便更准确的处理不同视图渲染。

viewMode 内部调用时使用了以下值:

  • 0: 天视图
  • 1: 月视图
  • 2: 年视图

在线运行

语言扩展

内置英语和简体中文支持,默认为中文,要支持更多语言可以通过 Datepicker.locales 扩展。

设置语言:

Copy
<p>
  <input type="text" class="am-form-field" placeholder="YYYY-MM-DD"
         data-am-datepicker="{locale: 'en_US'}" readonly/>
</p>

扩展语言:

Copy
<p>
  <input type="text" class="am-form-field" placeholder="扩展语言 French"
         data-am-datepicker="{locale: 'fr', autoClose: 0}" readonly/>
</p>

<script>
(function($) {
  $.AMUI && $.AMUI.datepicker && ($.AMUI.datepicker.locales.fr = {
    days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
    daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
    daysMin: ["D", "L", "Ma", "Me", "J", "V", "S", "D"],
    months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
    monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jui", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    weekStart: 1
  });
})(window.jQuery);
</script>

调用方式

通过 Data API

添加 data-am-datepicker 属性,并设置相关选项。

<input class="" data-am-datepicker="{format: 'yyyy-mm'}"/>

JS 调用

通过 $().datepicker(options) 调用。

$('#my-datepicker').datepicker({format: 'yyyy-mm'});

方法说明

方法名称描述
.datepicker('open')显示日历
.datepicker('close')隐藏日历
.datepicker('place')更新调用datepicker的相对位置
.datepicker('setValue', value)设置Datepicker新值

选项说明

参数描述
format日期格式,默认为 yyyy-mm-dd,可以选择 yy/mm/ddmm/dddd/mm/yyyydd/mm/yydd/mm等,中间分隔符可以使用 /-
viewMode日期选择器初始视图模式,string|integer, 默认为 0,可选值 daysmonthsyears或者对应的 012
minViewMode日期选择器初始视图模式限制,string|integer, 默认为 0,可选值daysmonthsyears或者对应的 012
onRender渲染日历时调用的函数,比如 .am-disabled 设置禁用日期。
theme设置日期颜色主题,可选值为 successdangerwarning,对应为绿色、红色、橙色,默认为蓝色。
locale语言设置, 可选值为 zh_CNen_US,默认为中文。
autoClose日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days 视图有效)。

设置 viewModeminViewMode 需要注意日期格式 format 的设置。

事件说明

选择日期时,通过查看控制台选择的日期。

Copy
<p><input type="text" class="am-form-field" placeholder="日历组件" id="doc-datepicker"/></p>
<script>
$(function() {
  $('#doc-datepicker').datepicker().
    on('changeDate.datepicker.amui', function(event) {
      console.log(event.date);
    });
});
</script>
事件名称描述
changeDate.datepicker.amui日期改变时触发