bootstrap-datepaginator

2018-08-11 admin

bootstrap-datepaginator是什么

什么是bootstrap-datepaginator,Date Paginator for Twitter Bootstrap

bootstrap-datepaginator介绍、bootstrap-datepaginator使用

<link href="./css/bootstrap.css" rel=“stylesheet”> <link href="./css/bootstrap-datepicker.css" rel=“stylesheet”>

<!-- Required Javascript --> <script src="./js/jquery.js"></script> <script src="./js/moment.js"></script> <script src="./js/bootstrap-datepicker.js"></script> <script src="./js/bootstrap-datepaginator.js"></script>


The component will bind to any existing DOM element.

<div id=“paginator”></div>


The most basic usage, in most cases this is all you'll need.

$(’#paginator’).datepaginator();


For advanced configuration, an options object can be passed on initialization.

var options = { selectedDate: ‘2013-01-01’, selectedDateFormat: ‘YYYY-MM-DD’ } $(’#paginator’).datepaginator(options);


## [](#options)Options

### [](#enddate)endDate

String, or Moment. Default: End of time

Sets the latest date that may be selected, all later dates will be disabled.

### [](#enddateformat)endDateFormat

String. Default: 'YYYY-MM-DD'

Sets the date format used when parsing string representations of endDate.

### [](#highlightselecteddate)highlightSelectedDate

Boolean. Default: true

Whether or not to distinguish visually the selected date.

###highlightToday Boolean. Default: true

Whether or not to distinguish visually today's date.

### [](#hint)hint

String. Default: 'dddd, Do MMMM YYYY'

Format used for on hover hint. String tokens are parsed against a given date.

### [](#injectstyle)injectStyle

Boolean. Default: true

By default the required styles are injected into the DOM automatically and no external css reference is required. In the event that you want to override and customize the default style, set injectStyle to false and ensure that bootstrap-datepaginator.css (or your modified css) is referenced.

Please note - where multiple paginators are applied to the same page, all must be set to injectStyle false otherwise the DOM injected style takes precedence.

### [](#itemwidth)itemWidth

Integer. Default: 35

Minimum width specified in pixels for an item.

### navItemWidth

Integer. Default: 20

Minimum width specified in pixels for the nav items e.g. left and right arrows

### [](#offdays)offDays

String (csv). Default: 'Sat,Sun'

Sets days of the week to be considered off days, visually greyed out.

### [](#offdaysformat)offDaysFormat

String. Default: 'ddd'

Sets the format used when evaluating offDays. For example, 'ddd' formats as a 3 letter abbreviation representing the day of the week, therefore Saturday becomes 'Sat'.

Please review Moment.js formatting guide for a full list of supported options.

### [](#selecteddate)selectedDate

String, or Moment. Default: moment(), equivalent to new Date()

Sets the initial selected date, provided as either a Moment.js moment object or String.

*If you're planning on providing a String, please ensure you review the dateFormat option.

### [](#selecteddateformat)selectedDateFormat

String. Default: 'YYYY-MM-DD'

Sets the date format used throughout the components lifecycle when parsing the selected date object.

### [](#selecteditemwidth)selectedItemWidth

Integer. Default: 120

Minimum width specified in pixels for the selected item.

### [](#showcalendar)showCalendar

Boolean. Default: true

Whether or not to display the clickable calendar icon visible on selected date. By setting to false you are effectively removing the calendar date select functionality from the user.

### [](#showoffdays)showOffDays

Boolean. Default: true

Whether or not to display off days.

### [](#showstartofweek)showStartOfWeek

Boolean. Default: true

Whether or not to display the start of week divider.

### [](#size)size

String. Default: normal

Sets the height of the paginator component. Accepts small, normal, large.

### [](#startdate)startDate

String, or Moment. Default: Beginning of time

Sets the earliest date that may be selected, all earlier dates will be disabled.

### [](#startdateformat)startDateFormat

String. Default: 'YYYY-MM-DD'

Sets the date format used when parsing string representations of startDate.

### [](#startofweek)startOfWeek

String. Default: 'Mon'

Sets for display purposes the start of the week, visually illustrated by a thicker dividing line betweeen dates.

### [](#startofweekformat)startOfWeekFormat

String. Default: 'ddd'

Sets the format used when evaluating startOfWeek. For example, 'ddd' formats as a 3 letter abbreviation representing the day of the week, therefore Saturday becomes 'Sat'.

Please review Moment.js formatting guide for a full list of supported options.

### [](#squareedges)squareEdges

Boolean. Default: false

Toggles the border radius between Bootstrap's default rounded edges (border-radius: 4px) and overridden square edges (border-radius: 0px).

### [](#text)text

String. Default: 'ddd<br/>Do'

Format used for item text i.e. date format. String tokens are parsed against a given date.

### [](#textselected)textSelected

String. Default: 'dddd

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37755.html

文章标题:bootstrap-datepaginator

回到顶部