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
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.