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

漂亮的日期选择组件 - MCDatepicker
栏目分类:日期 / 时间   发布日期:2021-09-02   浏览次数:

用 Vanilla JavaScript 编写的精心设计、完全响应、高度可定制、与框架无关的日期和日期范围选择器组件。

更多功能:

  • 3 种模式:模态、内联或永久

  • 自定义工作日和月份名称。

  • 允许您将自定义事件添加到日期。

  • 允许您禁用周末和特定日期。

  • 允许您标记日期。

使用:

1. 首先,在文档中插入 MCDatepicker 的 JavaScript 和样式表。

<link rel="stylesheet" href="/dist/mc-calendar.min.css" />
<script src="/dist/mc-calendar.min.js"></script>

2. 将日期选择器附加到您提供的输入字段。这将在模态弹出窗口中打开日历界面,您可以在其中单击选择日期。

<input id="example" type="text" />
const myDatePicker = MCDatepicker.create({ 
      el: '#example'
})

3. 设置日期格式。默认值:'DD-MMM-YYYY'。

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      dateFormat: 'MMM-DD-YYYY',
})

4. 确定显示模式:“modal”、“inline”或“permanent”。

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      bodyType: 'inline',
})

5. 自定义工作日和月份名称。

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      customWeekDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      customMonths: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
})

6. 禁用特定日期。

const myDatePicker = MCDatepicker.create({ 
      el: '#example', 
      disableWeekends: false, 
      disableWeekDays: [], // ex: [0,2,5] 
})

7. 确定是否显示日历标题。默认值:true。

const myDatePicker = MCDatepicker.create({ 
      el: '#example', 
      showCalendarDisplay: false
})

8. 在页面加载时设置所选日期。

const myDatePicker = MCDatepicker.create({ 
      el: '#example', 
      selectedDate: new date(), // 今天
})

9. 更多默认值的配置选项。

const myDatePicker = MCDatepicker.create({ 
      el: '#example', 
      context: document.body, 
      autoClose: false, 
      closeOndblclick: true, 
      closeOnBlur: false, 
      customOkBTN: 'OK', 
      customClearBTN: 'Clear', 
      customCancelBTN: 'CANCEL' , 
      firstWeekday: 0, // ex: 1 接受数字 0-6; 
      minDate: null, 
      maxDate: null, 
      jumpToMinMax: true, 
      jumpOverDisabled: true, 
      disableDates: [], // ex: [new Date(2019,11, 25) ), new Date(2019, 11, 26)] 
      allowedMonths: [], // ex: [0,1] 接受数字 0-11; 
      allowedYears: [], // ex: [2022, 2023]
      disableMonths: [], /// 例如: [3,11] 接受数字 0-11; 
      disableYears: [], // 例如: [2010, 2011] 
      markDates: [], 
      theme: defaultTheme, 
})

10. API 方法。

// 打开
myDatePicker.open(); 
 
// 关闭
myDatePicker.close(); 
 
// 重置
myDatePicker.reset(); 
 
// 销毁
myDatePicker.destroy(); 
 
// 获取工作日的索引
myDatePicker.getDay(); 
 
// 获取月份中的第几天
myDatePicker.getDate(); 
 
// 获取月份的索引
myDatePicker.getMonth(); 
 
// 获取年份
myDatePicker.getYear(); 
 
// 获取日期对象
myDatePicker.getFullDate(); 
 
// 获取格式化日期
myDatePicker.getFormatedDate(); 
 
// 将提供的回调推送到数组
myDatePicker.markDatesCustom(date); 
 
// 设置日期
myDatePicker.setFullDate(date); 
myDatePicker.setDate(date); 
 
// 设置月份
myDatePicker.setMonth(month); 
 
// 设置年份
myDatePicker.setYear(year);


官方网站:https://github.com/mikecoj/MCDatepicker

相关热词: MCDatepicker日期选择

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