日历参数（Calendar Parameters）

优质

小牛编辑

131浏览

2023-12-01

描述 (Description)

Framework7提供了一个参数列表，这些参数与日历一起使用并列在下表中 -

下面给出了列表参数，它们与日历一起使用。

S.No	参数和描述	类型	默认
Common Picker Modal Component Parameters
1	container 这是生成日历HTML的位置。它仅用于内联拾取器。	字符串或HTMLElement	-
2	input 它是带有相关输入元素的字符串或HTMLElement。	字符串或HTMLElement	-
3	scrollToInput 它是在打开日历上输入的滚动视口。	boolean	true
4	inputReadOnly 它用于在某些输入上设置readonly属性。	boolean	true
5	convertToPopover 它用于在大屏幕上将日历模式转换为弹出窗口。	boolean	true
6	onlyOnPopover 如果已启用，则始终以弹出框打开日历。	boolean	false
7	cssClass 如果已启用，则始终以弹出框打开日历。	string	-
8	closeByOutsideClick 如果启用此选项，则单击选取器外部时将关闭选取器。	boolean	true
9	toolbar 它启用日历模式工具栏。	boolean	true
10	toolbarCloseText 它是工具栏关闭按钮的文本。	string	Done
11	toolbarTemplate 它是工具栏HTML模板。默认情况下是HTML字符串，下面是模板 - `<div class = "toolbar"> <div class = "toolbar-inner"> {{monthPicker}} {{yearPicker}} </div> </div>`	string	-
Specific Calendar Parameters
1	value 它是具有初始选定日期的数组。	array	-
2	disabled 这是额外的禁用日期。	日期范围	-
3	events 这是具有事件的日期，并将在日历日标记为dot 。	日期范围	-
4	rangesClasses 它用于添加自定义CSS类以用于其他样式。	array	-
5	formatValue 它是格式化输入值并返回新/格式化字符串值的函数。 values是由表示所选日期的项组成的数组。	function (p, values)	-
6	monthNames 这是完整月份的阵列。	array	['1月'，'2月'，'3月'，'4月'，'5月'，'6月'，'7月'，'8月'，'9月'，'10月'，'11月'，'12月']
7	monthNamesShort 它是月份名称的缩写形式的数组。	array	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
8	dayNames 这是有工作日的数组。	array	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
9	dayNamesShort 它是工作日名称的缩写形式的数组。	array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
10	updateValuesOnTouchmove 触摸移动时，它会更新选择器和输入值。	boolean	true
11	firstDay 这是一周的第一天。默认情况下，它是1 - 星期一。	number	1
12	weekendDays 它是一个索引号为周末天数的数组。默认情况下，它是星期六和星期日。	array	[0, 6]
13	dateFormat 它是默认日期格式，下面是可用的表达式 - 'yyyy' - 这是4位数的年份。 'yy' - 这是2位数的年份。 'mm' - 这是2位数的月份数，即从01到12。 'm' - 从1到12的月份数。 'MM' - 这是完整的月份名称。 'M' - 这是月份名称的缩写形式。 'dd' - 这是2位数的日期编号，即从01到31。 'd' - 这是从1到31的日期编号。 'DD' - 这是完整的工作日名称。 'D' - 这是工作日名称的缩写形式。	string	'yyyy-mm-dd'
14	multiple 它允许您选择多个日期/值。	boolean	false
15	rangePicker 启用此选项以启用范围选择器。	boolean	false
16	direction 它是月份布局方向，可以是horizontal或vertical 。	string	horizontal
17	minDate 这是允许的最短日期。	Date	null
18	maxDate 这是允许的最大日期。	Date	null
19	touchmove 如果启用此选项，则在触摸移动期间，日历月会跟随手指滑动。	boolean	true
20	animate 它可以在几个月之间过渡。	boolean	true
21	closeOnSelect 如果已启用，则用户选择日期时将关闭日历。	boolean	false
22	weekHeader 它表示工作日缩短的周标题。	boolean	true
23	monthPicker 如果启用，则在工具栏中显示月份选择器。	boolean	true
24	monthPickerTemplate 它是月份选择器HTML模板。默认情况下如下 - `<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>`	string	-
25	yearPicker 如果已启用，则在工具栏中显示年份选择器。	boolean	true
26	yearPickerTemplate 它是年份选择器HTML模板。默认情况下，如下 - `<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>`	string	-
Callbacks
1	onChange 它是回调函数，它将在选择器值更改时运行。它接受values和displayValues数组作为参数，其中每个项表示相关列的value/display value 。	function (p, values, displayValues)	-
2	onMonthAdd 当新生成的月份HTML元素将添加到日历时，它将运行回调函数。	function (p, monthContainer)	-
3	onDayClick 如果用户单击任何日期，将执行此回调函数。	功能（p，dayContainer，年，月，日）	-
4	onMonthYearChangeStart 此回调函数将在转换到另一个月/年的过程中执行。	function (p, year, month)	-
5	onMonthYearChangeEnd 此回调函数将在转换到另一个月/年的过程中执行。	function (p, year, month)	-
6	onOpen 打开选择器时将执行此回调函数。	function (p)	-
7	onClose 当选择器关闭时，将执行此回调函数。	function (p)	-

日期范围

日历参数（如disabled ， events和rangesClasses接受所谓的日期范围。可以轻松指定和捕获日期的所有可能组合。以下代码显示如何使用包含日期的数组 -

var myCalendar = myApp.calendar ({
   ...
   //Disabled 1st December 2016 and 10th December 2016:
   disabled: [new Date(2016, 12 , 1), new Date(2016, 12, 10)],
   ...
});

您可以使用自定义函数，您需要返回true或false ，如下面的代码所示 -

var myCalendar = myApp.calendar ({
   ...
   //Disabled all dates in December 2016
   disabled: function (date) {
      if (date.getFullYear() === 2016 && date.getMonth() === 12) {
         return true;
      } else {
         return false;
      }
   },
   ...
});

您还可以使用以下列出的任何方式 -

具有from和to属性的对象。
from或to物业。
具有混合日期和对象的数组。

var myCalendar = myApp.calendar ({
   ...
   //Disable all dates between 1st December 2016 and 10th December 2016
   disabled: {
      from: new Date(2016, 12, 1),
      to: new Date(2016, 12, 10)
   },
   ...
}); 
Or
var myCalendar = myApp.calendar ({
   ...
   //Disable everyting since December 2015
   disabled: {
      from: new Date(2016, 12, 1)
   },
   ...
}); 
Or
var myCalendar = myApp.calendar ({
   ...
   events: [
      new Date(2016, 12, 1),
      new Date(2016, 12, 10),
      {
         from: new Date(2016, 12, 15),
         to: new Date(2016, 12, 20)
      },
      {
         from: new Date(2016, 12, 25),
         to: new Date(2016, 12, 30)
      }
   ],
   ...
});

rangesClasses (rangesClasses)

它需要具有日期范围和类名的对象数组，如以下代码所示 -

var myCalendar = myApp.calendar ({
   ...
   //Add classes for november and december
   rangesClasses: [
      //Add <i>day-november</i> class for all november dates
      {
         // string CSS class name for this range in <i>cssClass</i> property
         cssClass: 'day-november ', //string CSS class
         // Date Range in <i>range</i> property
         range: function (date) {
            return date.getMonth() === 11
         }
      },
      //Add <i>day-holiday</i> class for 1-10th December 2016
      {
         cssClass: 'day-holiday',
         range: {
            from: new Date(2016, 12, 1),
            to: new Date(2016, 12, 10)
         }
      }
   ],
   ...
});