HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ Framework7 Calendar 日历 Framework7 Calendar 日历 ❯

Framework7 - 日历参数

说明

Framework7 提供了与日历一起使用的参数列表，列于下表 −

S.No 参数和说明 类型 默认
常用选择器模式组件参数
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

工具栏

启用日历模式工具栏。

 boolean true
10

工具栏关闭文本

工具栏关闭按钮的文本。

 string 完成
11

toolbarTemplate

这是工具栏HTML模板。默认情况下它是HTML字符串，具有以下模板 −

<div class = "toolbar">
   <div class = "toolbar-inner">
      {{monthPicker}}
      {{yearPicker}}
   </div>
</div>
string -
具体日历参数
1

值

这是包含初始选定日期的数组。

 array -
2

已禁用

这是附加的已禁用日期。

 日期范围 -
3

事件

这是包含事件的日期，将标有点在日历日。

 日期范围 -
4

rangesClasses

用于添加自定义 CSS 类以进行其他样式设置。

 array -
5

formatValue

用于格式化输入值并返回新的/格式化的字符串值的函数。 values 是由表示所选日期的项目组成的数组。

 function (p, values) -
6

monthNames

这是包含完整月份的数组。

 array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']
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

月份布局方向，可以是水平或垂直。

 string 水平
17

minDate

允许的最小日期。

 日期 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

此回调如果用户点击任何日期，将执行该函数。

 function (p, dayContainer, year, month, day) -
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 ({
   ...
   //2016 年 12 月 1 日和 2016 年 12 月 10 日禁用:
   disabled: [new Date(2016, 12 , 1), new Date(2016, 12, 10)],
   ...
});

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

var myCalendar = myApp.calendar ({
   ...
   //已禁用 2016 年 12 月的所有日期
   disabled: function (date) {
      if (date.getFullYear() === 2016 && date.getMonth() === 12) {
         return true;
      } else {
         return false;
      }
   },
   ...
});

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

  • 具有 from 和 to 属性的对象。

  • 仅 from 或 to 属性。

  • 具有混合日期和对象的数组。

var myCalendar = myApp.calendar ({
   ...
   //禁用 2016 年 12 月 1 日至 2016 年 12 月 10 日之间的所有日期
   disabled: {
      from: new Date(2016, 12, 1),
      to: new Date(2016, 12, 10)
   },
   ...
}); 

Or

var myCalendar = myApp.calendar ({
   ...
   //自 2015 年 12 月起禁用一切
   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

它采用具有日期范围和类名的对象数组，如以下代码所示 −

var myCalendar = myApp.calendar ({
   ...
   //Add classes for november and december
   rangesClasses: [
      //为所有 11 月的日期添加 day-november 类
      {
        // cssClass 属性中此范围的字符串 CSS 类名
        cssClass: 'day-november ', //string CSS 类
        
        // range 属性中的日期范围
        range: function (date) {
        return date.getMonth() === 11
        }
      },
      
      //为 2016 年 12 月 1 日至 10 日添加day-holiday类
      {
         cssClass: 'day-holiday',
         range: {
            from: new Date(2016, 12, 1),
            to: new Date(2016, 12, 10)
         }
      }
   ],
   ...
});

framework7_calendar.html

❮ Framework7 Calendar 日历 Framework7 Calendar 日历 ❯