当前位置:主页 > JavsScript库 > 日期 / 时间 >

Bulma的多功能日期时间选择器 - bulma-calendar
栏目分类:日期 / 时间   发布日期:2021-08-16   浏览次数:

用于 Bulma 框架的响应式、可定制且功能丰富的日期和时间选择器组件。

主要特征:

  • 支持日期、时间和日期范围选择。

  • 支持对话和内联显示模式。

  • 多语言。

  • 自定义日期和时间格式。

  • 允许设置最小/最大/开始/结束日期。

  • 允许您禁用特定日期。

  • 也可作为 Vue 组件使用。

bulma-calendar使用:

1. 使用 NPM 安装并导入 bulma-calendar。

# NPM
$ npm i bulma-calendar --save
@import 'bulma.sass'
@import "bulmaCalendar.sass"
import bulmaCalendar from '~bulma-calendar/dist/js/bulma-calendar.min.js';

2.在页面上创建一个普通的输入框。

<input class="demo" />

3. 创建一个基本的日期选择器。

var myCal = bulmaCalendar.attach('.demo', {
    // 这里选项
});

4. 创建一个基本的时间选择器。

var myCal = bulmaCalendar.attach('.demo', {
    type: 'time'
});

5. 创建一个基本的日期时间选择器。

var myCal = bulmaCalendar.attach('.demo', {
    type: 'datetime'
});

6. 创建一个基本的日期范围选择器。

var myCal = bulmaCalendar.attach('.demo', {
    isRange: true
});

7. 在弹出对话框中显示日期选择器。

var myCal = bulmaCalendar.attach('.demo', {
    displayMode: 'dialog'
});

8. 将日期选择器显示为内嵌日历。

var myCal = bulmaCalendar.attach('.demo', {
    displayMode: 'inline'
});

9. 设置日期选择器的语言。默认为“navigator.language”。

var myCal = bulmaCalendar.attach('.demo', {
 
    // 日期、时间或日期时间
    type: undefined,
 
    // 主色
    color: 'primary',
 
    // 启用日期范围选择
    isRange: false,
 
    // 允许相同day
    allowSameDayRange: true,
 
    // 国际化
    lang: navigator.language || 'en-US',
 
    // 自定义日期/时间/月/年格式
    dateFormat: 'MM/dd/yyyy',
    timeFormat: 'HH:mm',
    navigationMonthFormat: 'MMMM',
    navigationYearFormat: 'yyyy',
    headerMonthYearFromat: 'MMMM yyyy',
 
    // dialog or inline
    displayMode: 'default',
 
    // 允许手动编辑时间
    editTimeManually: false,
 
    // 位置
    position: 'auto',
 
    // 显示标题
    showHeader: true,
 
    // 顶部或底部
    headerPosition: 'top',
 
    // 显示页脚
    showFooter: true,
 
    // 显示按钮
    showButtons: true,
    showTodayButton: true,
    showClearButton: true,
 
    // 自定义标签这里
    cancelLabel: 'Cancel',
    clearLabel: 'Clear',
    todayLabel: 'Today',
    nowLabel: 'Now',
    validateLabel: 'Validate',
 
    // 允许在月和年之间切换
    enableMonthSwitch: true,
    enableYearSwitch: true,
 
    // 开始/结束日期
    // Date | String
    startDate: undefined,
    endDate: undefined,
 
    // 最小/最大日期
    // Date | String
    minDate: null,
    maxDate: null,
 
    // 禁用日期
    // Date[] | String[] | Function(this, day)
    disabledDates: [],
 
    // 禁用工作日
    // Number[] | String '1,2,3,...'
    disabledWeekDays: undefined,
 
    // 高亮日期
    // Date[] | String[] | Function(this, day)
    highlightedDates: [],
 
    // 0 = Sunday
    weekStart: 0,
 
    // 开始/结束时间 
    // Date | String
    startTime: undefined,
    endTime: undefined,
 
    // 步长
    minuteSteps: 5,
 
    // 从/到标签
    labelFrom: '',
    labelTo: '',
 
    // 通过点击覆盖关闭日期选择器
    closeOnOverlayClick: true,
 
    // 关闭选择后的日期选择器
    closeOnSelect: true,
 
    // 点击输入时切换日期选择器
    toggleOnInputClick: true,
 
    // 回调
    onReady: null,
    onValidate: null,
 
    // 自定义图标
    icons: {
      previous: '<svg viewBox="0 0 50 80" xml:space="preserve">\n      <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>\n    </svg>',
      next: '<svg viewBox="0 0 50 80" xml:space="preserve">\n      <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>\n    </svg>',
      time: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">\n      <g>\n        <path fill="currentcolor" d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>\n\t      <path fill="currentcolor" d="M30,6c-0.552,0-1,0.447-1,1v23H14c-0.552,0-1,0.447-1,1s0.448,1,1,1h16c0.552,0,1-0.447,1-1V7C31,6.447,30.552,6,30,6z"/>\n      </g>\n    </svg>',
      date: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">\n      <g>\n        <path d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6zM4,58V17h52v41H4z"/>\n        <path d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"/>\n      </g>\n    </svg>'
    }
     
});



官方网站:https://github.com/Wikiki/bulma-calendar

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库