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

功能丰富的日期时间选择器组件 - DateTimePickerComponent
栏目分类:日期 / 时间   发布日期:2021-08-21   浏览次数:

用 JavaScript 编写的响应式、多语言、功能丰富且易于自定义的日期、时间和日期范围选择器组件。

如何使用它:

1. 安装并下载 NPM。

# NPM
$ npm i date-time-picker-component --save

2. 导入日期时间选择器组件。

// using a bundler
import 'date-time-picker-component/dist/css/date-time-picker-component.min.css';
import { DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker } from "date-time-picker-component/dist/js/date-time-picker-component.min";
// browser
<link href="dist/css/date-time-picker-component.min.css" rel="stylesheet" />
<script src="dist/js/date-time-picker-component.min.js"></script>

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

<div id="datepicker"></div>
new DatePicker('datepicker');
// browser
new DateTimePickerComponent.DatePicker('datepicker');

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

<div id="datetimepicker"></div>
new DateTimePicker('datetimepicker');
// browser
new DateTimePickerComponent.DateTimePicker('datetimepicker');

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

<div id="start1"></div>
<div id="end1"></div>
new DateRangePicker('start1', 'end1');
// browser
new DateTimePickerComponent.DateRangePicker('start1', 'end1');

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

<div id="start2"></div>
<div id="end2"></div>
new DateTimeRangePicker('start2', 'end2');
// browser
new DateTimePickerComponent.DateTimeRangePicker('start2', 'end2');

7. 自定义日期时间选择器组件。

new DateTimePickerComponent.DateRangePicker('start1', 'end1',{ 
 
    // 第一个日期
    first_date: "2030-01-02", 
 
    // 最后一个日期
    last_date: new Date( 2030, 0, 29 ), 
 
    // 开始日期
    start_date: "2030-01-05", 
 
    // 仅适用于范围选择器
    end_date: "2030-10-05", 
 
    // 0 = Sunday, 1 = Monday 
    first_day_no: 1, 
 
    // "short_ISO" or "full_ISO" 
    date_output: "timestamp ", 
 
    // 仅适用于范围选择器
    min_range_hours: 1, 
     
});


8. 本地化日期时间选择器组件。

new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
 
    l10n: {
      'jan':'Gen',
      'feb':'Feb',
      'mar':'Mar',
      'apr':'Apr',
      'may':'Mag',
      'jun':'Giu',
      'jul':'Lug',
      'aug':'Ago',
      'sep':'Set',
      'oct':'Ott',
      'nov':'Nov',
      'dec':'Dic',
      'jan_':'Gennaio',
      'feb_':'Febbraio',
      'mar_':'Marzo',
      'apr_':'Aprile',
      'may_':'Maggio',
      'jun_':'Giugno',
      'jul_':'Luglio',
      'aug_':'Agosto',
      'sep_':'Settembre',
      'oct_':'Ottobre',
      'nov_':'Novembre',
      'dec_':'Dicembre',
      'mon':'Lun',
      'tue':'Mar',
      'wed':'Mer',
      'thu':'Gio',
      'fri':'Ven',
      'sat':'Sab',
      'sun':'Dom',
      'mon_':'Lunedì',
      'tue_':'Martedì',
      'wed_':'Mercoledì',
      'thu_':'Giovedì',
      'fri_':'Venerdì',
      'sat_':'Sabato',
      'sun_':'Domenica',
    };
 
});


9. 将自定义样式应用到日期时间选择器组件。

new DateTimePickerComponent.DateRangePicker('start1', 'end1',{
 
    样式:{
      active_background: '#e34c26',
      active_color: '#fff',
      inactive_background: '#0366d9',
      inactive_color: '#fff'
    },
 
});

10. 将日期时间选择存储在隐藏输入中。

<!-- 日期选择器 -->
<div id="datepicker">
  <input type="hidden" class="date_output" value="2030-05-22">
</div>
 
<!-- 日期范围选择器 -->
<div id="start1">
  <!-- 覆盖 start_date -->
  <input type="hidden" class="date_output" value="2030-05-22">
</div>
<div id="end1">
  <!-- 覆盖 end_date -->
  <input type="hidden" class="date_output" value="2030-05-22T10:00:00">
</div>


官方网站:https://github.com/marcellosurdi/DateTimePickerComponent

相关热词: 日期时间选择器组件

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