日期选择Js插件

日期选择Js插件源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-时间

更新时间: 2021-08-22

精心设计,充分响应,高度可定制的日期选择JS插件,日期和日期范围选择器组件用纯JavaScript编写的。

配置周和月份的名字
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'
      ]
})
格式
const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      dateFormat: 'MMM-DD-YYYY',
})
更多配置参数
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 accept numbers 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] accept numbers 0-11;
      allowedYears: [], // ex: [2022, 2023]
      disableMonths: [], /// ex: [3,11] accept numbers 0-11;
      disableYears: [], // ex: [2010, 2011]
      markDates: [],
      theme: defaultTheme,
})
一些API
// open
myDatePicker.open();

// close
myDatePicker.close();

// reset
myDatePicker.reset();

// destroy
myDatePicker.destroy();

// get the index of the weekday
myDatePicker.getDay();

// get the day of the month
myDatePicker.getDate();

// get the index of the month
myDatePicker.getMonth();

// get the year
myDatePicker.getYear();

// get the the date object
myDatePicker.getFullDate();

// get the formated date
myDatePicker.getFormatedDate();

// push the provided callback to an array
myDatePicker.markDatesCustom(date);

// set date
myDatePicker.setFullDate(date);
myDatePicker.setDate(date);

// set month
myDatePicker.setMonth(month);

// set year
myDatePicker.setYear(year);
事件处理 
myDatePicker.onOpen(() => console.log('Do Something'));
myDatePicker.onClose(() => console.log('Do Something'));
myDatePicker.onCancel(() => console.log('Do Something'));
myDatePicker.onSelect((date, formatedDate) => console.log('Do Something'));
myDatePicker.onMonthChange(() => console.log('Do Something'));
myDatePicker.onYearChange(() => console.log('Do Something'));

日期选择Js插件

正在加载文件目录...

也许你还喜欢

  1. 带农历的jQuery时间选择插件
  2. jQuery框弹出日历插件
  3. CalendarPicker.js创意日历插件
  4. jquery手机滑动选择日期插件mobileSelect
  5. 弹出式日期和时间选择js插件
  6. Js单双日历插件日期范围选择
文本阅读更多和收缩js插件
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器