diy date picker 演示

diy-date-picker 演示

diy-date-picker 是一个用原生的 JavaScript 实现的日期选择器的插件，无依赖，非常轻小。

基本用法

默认

            
<!-- HTML -->
<template>
  <input class="input-control" type="text" id="baseUsage"/>
</template>

<!-- JavaScript -->
<script>
  diyDatePicker.init('#baseUsage');
</script>

组件用法

input组件

            
<!-- HTML -->
<template>
  <div class="input-group">
    <i class="icon icon-date">
    <input class="input-control" type="text" id="componentUsage"/>
  </div>
</template>

<!-- JavaScript -->
<script>
  diyDatePicker.init('.input-group', {
    clearable: true // 显示清除按钮
  });
</script>

禁用日期

禁用今天以后的日期

            
<!-- HTML -->
<template>
  <input class="input-control" type="text" id="disableDateUsage"/>
</template>

<!-- JavaScript -->
<script>
  diyDatePicker.init('#disableDateUsage', {
    disabledDate: function (date) { // 参数 date 是日期选择器中的某一个日期
      return date.getTime() > new Date().getTime();
    }
  });
</script>

定制箭头图标

            
<!-- HTML -->
<template>
  <input class="input-control" type="text" id="templatesUsage"/>
</template>

<!-- JavaScript -->
<script>
  diyDatePicker.init('#templatesUsage', {
    templates: {
      prevYearArrow: '<i class="icon icon-arrow-left-o"></i>',
      prevMonthArrow: '<i class="icon icon-arrow-left"></i>',
      nextMonthArrow: '<i class="icon icon-arrow-right"></i>',
      nextYearArrow: '<i class="icon icon-arrow-right-o"></i>',
    }
  });
</script>

格式化

            
<!-- HTML -->
<template>
  <input class="input-control" type="text" id="formatUsage"/>
</template>

<!-- JavaScript -->
<script>
  diyDatePicker.init('#formatUsage', {
    format: 'yyyy/mm/dd';
  });
</script>

国际化

i18n

            
<!-- HTML -->
<template>
  <input class="input-control" type="text" id="i18nUsage"/>
</template>

<!-- JavaScript -->
<script src="${yourPath}/dist/locales/diy-date-picker.en.min.js"></script>
<script>
  diyDatePicker.init('#i18nUsage', {
    clearable: true, // show clear button
    lang: 'en' // select english for language
  });
</script>