web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
日期和时间
Bootstrap日期选择器插件bootstrap-datepicker
分类:
日期和时间
日期:
2024-05-14
点击(11)
评论(0)
演 示
免费下载
简介
bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言,可通过配置参数设置日期选择器,日期范围选择器等,功能非常强大。 ##### 安装 可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。 ##### Yarn yarn add bootstrap-datepicker ##### NPM npm install bootstrap-datepicker ##### Bower bower install bootstrap-datepicker ##### 使用方法 在页面中引入bootstrap相关文件,jquery和bootstrap-datepicker3.css,以及bootstrap-datepicker.js文件。 ```html
``` 如果需要使用i18n文件,还需要引入相应的js文件,例如简体中文需要引入bootstrap-datepicker.zh-CN.min.js文件。 ```html ``` ##### HTML结构 可以直接在input元素上添加data-provide="datepicker"属性直接将它转换为一个日期选择器。如果需要内联的日期选择器,可以使用data-provide="datepicker-inline"。例如: ```html
``` 如果需要一个容器,可以使用下面的代码: ```html
``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过datepicker()方法来初始化bootstrap-datepicker日期选择器插件。 ```html $('.datepicker').datepicker(); ``` ##### 配置参数 bootstrap-datepicker日期选择器插件可用的配置参数如下: ```html $('input').datepicker({ assumeNearbyYear: false, autoclose: false, // Callback functions beforeShowDay: $.noop, beforeShowMonth: $.noop, beforeShowYear: $.noop, beforeShowDecade: $.noop, beforeShowCentury: $.noop, calendarWeeks: false, clearBtn: false, toggleActive: false, daysOfWeekDisabled: [], daysOfWeekHighlighted: [], datesDisabled: [], endDate: Infinity, forceParse: true, format: 'mm/dd/yyyy', keepEmptyValues: false, keyboardNavigation: true, language: 'en', minViewMode: 0, maxViewMode: 4, multidate: false, multidateSeparator: ',', orientation: "auto", rtl: false, startDate: -Infinity, startView: 0, todayBtn: false, todayHighlight: false, updateViewDate: true, weekStart: 0, disableTouchKeyboard: false, enableOnReadonly: true, showOnFocus: true, zIndexOffset: 10, container: 'body', immediateUpdates: false, title: '', templates: { leftArrow: '«', rightArrow: '»' }, showWeekDays: true }); ``` ##### 方法 bootstrap-datepicker日期选择器插件可用的API方法有: ```html // shows the date picker $('input').datepicker('show'); // hides the date picker $('input').datepicker('hide'); // Clear the dates $('input').datepicker('clearDates'); // Destroys the date picker $('input').datepicker('destroy'); // Updates the date picker $('input').datepicker('update', DATE); // Sets a new date $('input').datepicker('setDate', DATE); // Sets a new date $('input').datepicker('setUTCDate', DATE); // Sets an array of dates $('input').datepicker('setDates', DATE); // Sets an array of UTC dates $('input').datepicker('setUTCDates', DATE); // Returns a localized date object $('input').datepicker('getDate'); // Returns a list of localized date objects $('input').datepicker('getDates'); // Returns a list of localized date objects $('input').datepicker('getUTCDates'); // Returns the lower date limit on the datepicker $('input').datepicker('getStartDate'); // Returns the upper date limit on the datepicker $('input').datepicker('getEndDate'); // Sets a new lower date limit on the datepicker $('input').datepicker('setStartDate', DATE); // Sets a new upper date limit on the datepicker $('input').datepicker('setEndDate', DATE); // Sets the days that should be disabled. $('input').datepicker('setDatesDisabled', DATE); // Sets the days of week that should be disabled. $('input').datepicker('setDaysOfWeekDisabled', DATE); // Sets the days of week that should be highlighted $('input').datepicker('setDaysOfWeekHighlighted', DATE); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告