移动端安卓和IOS开发框架Framework7教程-Calendar / Datepicker

Calendar is a touch optimized component that provides an easy way to handle dates.

Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).

Create Calendar Instance

Calendar can be created and initialized only using JavaScript. We need to use related App's method:

myApp.calendar(parameters) - initialize Calendar with parameters

• parameters - object - object with Calendar parameters. Required.
• Method returns initialized Calendar instance

For example:

1. var myCalendar = app.calendar({
2.     input: '#calendar-input'
3. });

复制

Calendar Parameters

Let's look on list of all available parameters:

Parameter Type Default Description Common Picker Modal Component Parameters Specific Picker Parameters Callbacks

container	string or HTMLElement		String with CSS selector or HTMLElement where to place generated Calendar HTML. Use only for inline pickers
input	string or HTMLElement		String with CSS selector or HTMLElement with related input element
scrollToInput	boolean	true	Scroll viewport (page-content) to input when calendar opened
inputReadOnly	boolean	true	Sets "readonly" attribute on specified input
convertToPopover	boolean	true	Converts calendar modal to Popover on large screens (on iPad)
onlyOnPopover	boolean	false	Enable it and Calendar will be always opened in Popover
cssClass	string		Additional CSS class name to be set on calendar modal
toolbar	boolean	true	Enables calendar modal toolbar
toolbarCloseText	string	'Done'	Text for Done/Close toolbar button
toolbarTemplate	string		Toolbar HTML Template. By default it is HTML string with following template: <div class="toolbar">   <div class="toolbar-inner">     {{monthPicker}}     {{yearPicker}}   </div> </div> 复制
value	array		Array with initial selected dates. Each array item represents selected date
formatValue	function (p, values)		Function to format input value, should return new/formatted string value. values is array where each item represents selected date
monthNames	array	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']	Array with full month names
monthNamesShort	array	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Array with short month names
dayNames	array	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	Array with week day names
dayNamesShort	array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Array with week day short names
updateValuesOnTouchmove	boolean	true	Updates picker and input values during touch move
firstDay	number	1	First day of the week. By default 1 - Monday
weekendDays	array	[0, 6]	Array with index numeber of weekend days, by default it is Saturday and Sunday
dateFormat	string	'yyyy-mm-dd'	Default date format, available expressions: 'yyyy' - 4 digits year 'yy' - 2 digits year 'mm' - 2 digits month number, from 01 to 12 'm' - month number, from 1 to 12 'MM' - full month name 'M' - short month name 'dd' - 2 digits day number, from 01 to 31 'd' - day number, from 1 to 31 'DD' - full week day name 'D' - short week day name
multiple	boolean	false	Enable to allows select multiple dates/values
direction	string	'horizontal'	Months layout direction, could be 'horizontal' or 'vertical'
minDate	Date	null	Minimum allowed date
maxDate	Date	null	Maximum allowed date
touchmove	boolean	true	If enabled then calendar months slides follow finger during touch move
animate	boolean	true	Enables transition between months
closeOnSelect	boolean	false	Enable and calendar will be closed when user pick a date
weekHeader	boolean	true	Enable week header with short name week days
monthPicker	boolean	true	Enable month picker in toolbar
monthPickerTemplate	string		Month picker HTML template. By default it is: <div class="picker-calendar-month-picker">     <a href="#" class="link icon-only picker-calendar-prev-month">         <i class="icon icon-prev"></i>     </a>     <span class="current-month-value"></span>     <a href="#" class="link icon-only picker-calendar-next-month">         <i class="icon icon-next"></i>     </a> </div> 复制
yearPicker	boolean	true	Enable year picker in toolbar
yearPickerTemplate	string		Year picker HTML template. By default it is: <div class="picker-calendar-year-picker">     <a href="#" class="link icon-only picker-calendar-prev-year">         <i class="icon icon-prev"></i>     </a>     <span class="current-year-value"></span>     <a href="#" class="link icon-only picker-calendar-next-year">         <i class="icon icon-next"></i>     </a> </div> 复制
onChange	function (p, values, displayValues)		Callback function that will be executed when picker value changed. values anddisplayValues are arrays where each item represents value/display value of related column
onMonthAdd	function (p, monthContainer)		Callback function that will be executed when newly generated month HTML element will be added to calendar.
onDayClick	function (p, dayContainer, year, month, day)		Callback function that will be executed when user clicks/select any date
onMonthYearChangeStart	function (p, year, month)		Callback function that will be executed in the beginning of transition to another month/year
onMonthYearChangeEnd	function (p, year, month)		Callback function that will be executed in the end of transition to another month/year
onOpen	function (p)		Callback function that will be executed when picker is opened
onClose	function (p)		Callback function that will be executed when picker is closed

Calendar Methods & Properties

After we initialize Calendar we have its initialized instance in variable (like myCalendar variable in example above) with helpful methods and properties:

Properties Methods

myCalendar.params	Object with passed initialization parameters
myCalendar.value	Array where each item represents selected date
myCalendar.opened	true if Calendar is currently opened
myCalendar.inline	true if Calendar is inline Calendar
myCalendar.cols	Array with specified Calendar columns. Each column also has its own methods and properties (look below)
myCalendar.container	Dom7 instance with Calendar HTML container
myCalendar.setValue(values)	Set new selected dates. values is array where each item represents selected date
myCalendar.nextMonth(duration)	Calendar transition to next month for specified duration in ms
myCalendar.prevMonth(duration)	Calendar transition to previous month for specified duration in ms
myCalendar.nextYear()	Calendar transition to next year
myCalendar.prevYear()	Calendar transition to previous year
myCalendar.setYearMonth(year, month, duration)	Calendar transition to specified year, month for specified duration in ms
myCalendar.open()	Open Calendar
myCalendar.close()	Close Calendar
myCalendar.destroy()	Destroy Calendar instance and remove all events

Access to Calendar's Instance

If you initialize Calendar as inline Calendar it is possible to access to Calendar's instance from its HTML container

1. var myCalendar = $$('.calenadr-inline')[0].f7Calendar;

复制

Examples

实例预览

Default Setup

1. <div class="content-block-title">Default setup</div>
2. <div class="list-block">
3.   <ul>
4.     <li>
5.       <div class="item-content">
6.         <div class="item-inner">
7.           <div class="item-input">
8.             <input type="text" placeholder="Your birth date" readonly id="calendar-default">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.   </ul>
14. </div>

复制

 

1. var calendarDefault = myApp.calendar({
2.     input: '#calendar-default',
3. });

复制

Custom Date Format

1. <div class="content-block-title">Custom date format</div>
2. <div class="list-block">
3.   <ul>
4.     <li>
5.       <div class="item-content">
6.         <div class="item-inner">
7.           <div class="item-input">
8.             <input type="text" placeholder="Select date" readonly id="calendar-date-format">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.   </ul>
14. </div>

复制

1. var calendarDateFormat = myApp.calendar({
2.     input: '#calendar-date-format',
3.     dateFormat: 'DD, MM dd, yyyy'
4. });

复制

Multiple Values

1. <div class="content-block-title">Multiple Values</div>
2. <div class="list-block">
3.   <ul>
4.     <li>
5.       <div class="item-content">
6.         <div class="item-inner">
7.           <div class="item-input">
8.             <input type="text" placeholder="Select multiple dates" readonly id="calendar-multiple">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.   </ul>
14. </div>

复制

1. var calendarMultiple = myApp.calendar({
2.     input: '#calendar-multiple',
3.     dateFormat: 'M dd yyyy',
4.     multiple: true
5. });

复制

Inline With Custom Toolbar

1. <div class="content-block-title">Inline with custom toolbar</div>
2. <div class="content-block">
3.   <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner">
4.     <div id="calendar-inline-container"></div>
5.   </div>
6. </div>

复制

1. var $$ = Dom7;
2. var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
3.  
4. var calendarInline = myApp.calendar({
5.     container: '#calendar-inline-container',
6.     value: [new Date()],
7.     weekHeader: false,
8.     toolbarTemplate: 
9.         '<div class="toolbar calendar-custom-toolbar">' +
10.             '<div class="toolbar-inner">' +
11.                 '<div class="left">' +
12.                     '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
13.                 '</div>' +
14.                 '<div class="center"></div>' +
15.                 '<div class="right">' +
16.                     '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
17.                 '</div>' +
18.             '</div>' +
19.         '</div>',
20.     onOpen: function (p) {
21.         $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
22.         $$('.calendar-custom-toolbar .left .link').on('click', function () {
23.             calendarInline.prevMonth();
24.         });
25.         $$('.calendar-custom-toolbar .right .link').on('click', function () {
26.             calendarInline.nextMonth();
27.         });
28.     },
29.     onMonthYearChangeStart: function (p) {
30.         $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
31.     }
32. });

复制