当前位置：首页 > 网页特效 > 日期和时间

bootstrap4日期时间选择器插件

分类：日期和时间日期：2024-05-14 点击(1) 评论(0)

bootstrap4日期时间选择器插件

简介

这是一款bootstrap4日期时间选择器插件。该bootstrap4日期时间选择器插件提供大量配置参数，可以基于bootstrap4制作出简单实用的日期选择器效果。它的特点还有：

- 支持语言国际化和timezone。
- 支持日期选择模式和时间选择模式。
- 支持最大和最小日期选择。
- 可自定义触发日期选择器的图标。
- 支持禁用指定的日期。
- 支持年/星期预览模式。
- 支持某个星期中禁用某些天。
- 可自定义日期格式。
- 提供大量的配置参数和API接口。
#####  使用方法
在页面中引入jquery和bootstrap4相关文件，以及moment.js和tempusdominus-bootstrap-4.min.js文件。
```html
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.js"></script>
<script src="tempusdominus-bootstrap-4.min.js"></script>
```
#####  HTML结构
一个最基本的bootstrap4日期时间选择器的HTML结构如下。

```html
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>     
```  
#####  初始化插件
在页面DOM元素加载完毕之后，通过datetimepicker方法来初始化该bootstrap4日期选择器插件。

```html
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
</script>
```
#####  配置参数
该bootstrap4日期选择器插件的可用配置参数有：

```html
$('#datetimepicker-demo').datetimepicker({
 
  // requires moment-timezone.js
  timeZone: '',
 
  // date format
  // http://momentjs.com/docs/#/displaying/format/
  format: false,
  dayViewHeaderFormat: 'MMMM YYYY',
  extraFormats: false,
 
  // step size
  stepping: 1,
 
  // min/max dates
  minDate: false,
  maxDate: false,
 
  // uses current date/time
  useCurrent: true,
 
  // uses Bootstraps collapse to switch between date/time pickers
  collapse: true,
 
  // https://github.com/moment/moment/tree/develop/locale
  locale: moment.locale(),
 
  // default date
  defaultDate: false,
 
  // disabled dates
  // array of [date, moment, string]
  disabledDates: false,
 
  // enabled dates
  // array of [date, moment, string]
  enabledDates: false,
 
  // default icons
  icons: {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up: 'fa fa-arrow-up',
    down: 'fa fa-arrow-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-calendar-check-o',
    clear: 'fa fa-delete',
    close: 'fa fa-times'
  },
 
  // tooltip options
  tooltips: {
    today: 'Go to today',
    clear: 'Clear selection',
    close: 'Close the picker',
    selectMonth: 'Select Month',
    prevMonth: 'Previous Month',
    nextMonth: 'Next Month',
    selectYear: 'Select Year',
    prevYear: 'Previous Year',
    nextYear: 'Next Year',
    selectDecade: 'Select Decade',
    prevDecade: 'Previous Decade',
    nextDecade: 'Next Decade',
    prevCentury: 'Previous Century',
    nextCentury: 'Next Century',
    pickHour: 'Pick Hour',
    incrementHour: 'Increment Hour',
    decrementHour: 'Decrement Hour',
    pickMinute: 'Pick Minute',
    incrementMinute: 'Increment Minute',
    decrementMinute: 'Decrement Minute',
    pickSecond: 'Pick Second',
    incrementSecond: 'Increment Second',
    decrementSecond: 'Decrement Second',
    togglePeriod: 'Toggle Period',
    selectTime: 'Select Time',
    selectDate: 'Select Date'
  },
 
  // uses strict
  useStrict: false,
 
  // displays side by side
  sideBySide: false,
 
  // disabled days of the week
  daysOfWeekDisabled: false,
 
  // shows the week of the year
  calendarWeeks: false,
 
  // 'decades','years','months','days'
  viewMode: 'days',
 
  // toolbar placement
  toolbarPlacement: 'default',
 
  // enable/disable buttons
  buttons: {
    showToday: false,
    showClear: false,
    showClose: false
  },
 
  // widget position
  widgetPositioning: {
    horizontal: 'auto',
    vertical: 'auto'
  },
 
  // string or jQuery object
  widgetParent: null,
 
  // ignore read only input
  ignoreReadonly: false,
 
  // always keep open
  keepOpen: false,
 
  // shows on focus
  focusOnShow: true,
 
  // inline mode
  inline: false,
 
  // makes the date picker not revert or overwrite invalid dates
  keepInvalid: false,
 
  // debug mode
  debug: false,
 
  // shows on focus and icon click
  allowInputToggle: false,
 
  // disables time selection
  disabledTimeIntervals: false,
 
  // disables/enables hours
  disabledHours: false,
  enabledHours: false,
 
  // changes the viewDate without changing or setting the selected date
  viewDate: false,
 
  // allows multiple dates
  allowMultidate: false,
 
  // custom separator
  multidateSeparator: ','
   
});
```

web299.com

bootstrap4日期时间选择器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果