目录
  1. WIKI教程
  2. 学习Framework7
  3. 日历参数(Calendar Parameters)

日历参数(Calendar Parameters)

描述 (Description)

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

S.No 参数和描述 类型 默认
Common Picker Modal Component Parameters
1

container

这是生成日历HTML的位置。 它仅用于内联拾取器。

字符串或HTMLElement -
2

input

它是带有相关输入元素的字符串或HTMLElement。

字符串或HTMLElement -
3

scrollToInput

它是在打开日历上输入的滚动视口。

booleantrue
4

inputReadOnly

它用于在某些输入上设置readonly属性。

booleantrue
5

convertToPopover

它用于在大屏幕上将日历模式转换为弹出窗口。

booleantrue
6

onlyOnPopover

如果已启用，则始终以弹出框打开日历。

booleanfalse
7

cssClass

如果已启用，则始终以弹出框打开日历。

string-
8

closeByOutsideClick

如果启用此选项，则单击选取器外部时将关闭选取器。

booleantrue
9

toolbar

它启用日历模式工具栏。

booleantrue
10

toolbarCloseText

它是工具栏关闭按钮的文本。

stringDone
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

触摸移动时，它会更新选择器和输入值。

booleantrue
11

firstDay

这是一周的第一天。 默认情况下，它是1 - 星期一。

number1
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

它允许您选择多个日期/值。

booleanfalse
15

rangePicker

启用此选项以启用范围选择器。

booleanfalse
16

direction

它是月份布局方向，可以是horizontal或vertical 。

stringhorizontal
17

minDate

这是允许的最短日期。

Datenull
18

maxDate

这是允许的最大日期。

Datenull
19

touchmove

如果启用此选项，则在触摸移动期间，日历月会跟随手指滑动。

booleantrue
20

animate

它可以在几个月之间过渡。

booleantrue
21

closeOnSelect

如果已启用，则用户选择日期时将关闭日历。

booleanfalse
22

weekHeader

它表示工作日缩短的周标题。

booleantrue
23

monthPicker

如果启用，则在工具栏中显示月份选择器。

booleantrue
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

如果已启用，则在工具栏中显示年份选择器。

booleantrue
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)
         }
      }
   ],
   ...
});
↑回到顶部↑
WIKI教程 @2018