Framework7 - 日历参数

描述

Framework7 提供了一系列参数，这些参数用于日历，并在下表中列出 -

以下是用于日历的参数列表。

序号	参数及描述	类型	默认值
常用 Picker 模态组件参数
1	容器这是生成的日历 HTML 放置的位置。仅用于内联选择器。	字符串或 HTMLElement	-
2	输入它是与相关输入元素的字符串或 HTMLElement。	字符串或 HTMLElement	-
3	滚动到输入打开日历时，它会滚动到输入。	布尔值	真
4	输入只读它用于在某些输入上设置只读属性。	布尔值	真
5	转换为弹出窗口它用于在大屏幕上将日历模态转换为弹出窗口。	布尔值	真
6	仅在弹出窗口中如果启用，日历始终在弹出窗口中打开。	布尔值	假
7	CSS 类如果启用，日历始终在弹出窗口中打开。	字符串	-
8	点击外部关闭如果启用，当您点击选择器外部时，选择器将关闭。	布尔值	真
9	工具栏它启用日历模态工具栏。	布尔值	真
10	工具栏关闭文本它是工具栏关闭按钮的文本。	字符串	完成
11	工具栏模板它是工具栏 HTML 模板。默认情况下是 HTML 字符串，具有以下模板 - <div class = "toolbar"> <div class = "toolbar-inner"> {{monthPicker}} {{yearPicker}} </div> </div>	字符串	-
特定日历参数
1	价值它是包含初始选中日期的数组。	数组	-
2	禁用它是其他禁用的日期。	日期范围	-
3	事件它是带有事件的日期，将在日历日期上用点标记。	日期范围	-
4	范围类它用于为其他样式添加自定义 CSS 类。	数组	-
5	格式化值它是用于格式化输入值并返回新的/格式化的字符串值的函数。值是包含表示选中日期的项目的数组。	函数 (p, values)	-
6	月份名称它是包含完整月份的数组。	数组	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
7	月份简称它是包含月份简称的数组。	数组	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
8	星期名称它是包含星期的数组。	数组	['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
9	星期简称它是包含星期简称的数组。	数组	['周日', '周一', '周二', '周三', '周四', '周五', '周六']
10	触摸移动时更新值触摸移动时更新选择器和输入值。	布尔值	真
11	第一天它是星期中的第一天。默认情况下，它是 1 - 星期一。	号码	1
12	周末它是包含周末索引号的数组。默认情况下，它是星期六和星期日。	数组	[0, 6]
13	日期格式它是默认日期格式，以下是可用的表达式 - 'yyyy' - 它是 4 位数的年份。 'yy' - 它是 2 位数的年份。 'mm' - 它是 2 位数的月份数字，即从 01 到 12。 'm' - 它是 1 到 12 的月份数字。 'MM' - 它是完整的月份名称。 'M' - 它是月份名称的简称。 'dd' - 它是 2 位数的日期数字，即从 01 到 31。 'd' - 它是 1 到 31 的日期数字。 'DD' - 它是完整的星期名称。 'D' - 它是星期名称的简称。	字符串	'yyyy-mm-dd'
14	多选允许您选择多个日期/值。	布尔值	假
15	范围选择器启用此功能以启用范围选择器。	布尔值	假
16	方向它是月份布局方向，可以是水平或垂直。	字符串	水平
17	最小日期它是允许的最小日期。	日期	空
18	最大日期它是允许的最大日期。	日期	空
19	触摸移动如果启用，则日历月份在触摸移动期间跟随手指。	布尔值	真
20	动画它启用月份之间的过渡。	布尔值	真
21	选中时关闭如果启用，则当用户选择日期时，日历将关闭。	布尔值	假
22	星期标题它表示带有星期简称的星期标题。	布尔值	真
23	月份选择器如果启用，则在工具栏中显示月份选择器。	布尔值	真
24	月份选择器模板它是月份选择器 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>	字符串	-
25	年份选择器如果启用，则在工具栏中显示年份选择器。	布尔值	真
26	年份选择器模板它是年份选择器 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>	字符串	-
回调函数
1	更改当选择器值更改时，它将运行的回调函数。它接受值和显示值数组作为参数，其中每个项目代表相关列的值/显示值。	函数 (p, values, displayValues)	-
2	添加月份它是当新生成的月份 HTML 元素添加到日历时将运行的回调函数。	函数 (p, monthContainer)	-
3	点击日期如果用户点击任何日期，此回调函数将执行。	函数 (p, dayContainer, year, month, day)	-
4	月份年份更改开始此回调函数将在过渡到另一个月/年开始时执行。	函数 (p, year, month)	-
5	月份年份更改结束此回调函数将在过渡到另一个月/年结束时执行。	函数 (p, year, month)	-
6	打开选择器打开时，此回调函数将执行。	函数 (p)	-
7	关闭选择器关闭时，此回调函数将执行。	函数 (p)	-

日期范围

诸如禁用、事件和范围类之类的日历参数接受所谓的日期范围。指定和捕获所有可能的日期组合很容易。以下代码显示了如何使用日期数组 -

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

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

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;
      }
   },
   ...
});

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

带有从和到属性的对象。
只有从或到属性。
包含混合日期和对象的数组。

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)
      }
   ],
   ...
});

范围类

它采用包含日期范围和类名的对象的数组，如下面的代码所示 -

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

framework7_calendar.htm

打印页面