semantic-ui时间控件使用

semantic-ui时间控件使用

不独光阴朝复暮，杭州老去被潮催 《潮》白居易 唐 号香山居士 祖籍山西太原 生于河南新郑 唐代三大诗人之一，与刘禹锡并称“刘白” （772-846）

首先导入必要的外部文件（直接引用请注意中英文）

<script type=“ text / javascript ” src =“ /bower_components/semantic-ui-calendar/dist/calendar.min.js ” > </script> 
< link  rel =“ stylesheet ” href =“ / bower_components / semantic-ui -calendar / dist / calendar.min.css “ />

<div class="inline field required">
	<label>xxx日期：</label> 
	<div  id="mycalendar" class="ui  icon input" style="position: relative;">
	<input onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" name="startTime" 	 id="startTime"	th:value="${arrange.startTime}"
readonly="readonly" placeholder="请选择开始倒班日期" /> 
<i class="calendar  alternate outline icon" ></i>
 </div>
</div>

$('#mycalendar').calendar('behavior name', argumentOne, argumentTwo);

添加各种函数，其中函数如下：

函数名	函数介绍
popup(arguments)	调用弹出模块(例如传递’show’将显示日历弹出)。
focus	聚焦在日历的输出框
blur	失去焦点
clear	清空选择的日期
get date	获得选择的日期
set date(date, updateInput = true, fireChange = true)	设置选定的日期。将false传递给updateInput以禁用对输入的更新。将false传递给fireChange以禁用此更改的onChange回调。
get mode	获取当前选择模式(年、月、日、小时、分钟)。
set mode(mode)	设置当前的选择模式(年、月、日、小时、分钟)
get startDate	获取范围选择的开始日期。
set startDate(date)	设置范围选择的开始日期。
get endDate	获取范围选择的结束日期。
set endDate(date)	设置范围选择的结束日期。
get focusDate	获取当前聚焦的日期。
set focusDate(date)	设置当前聚焦的日期。

控件属性设置

1. type: 'datetime',     // 选择器类型，可以是“datetime”、“date”、“time”、“month”或“year”
2. firstDayOfWeek: 0,    // 首日列的日期(0 =星期日)
3. constantHeight: true, //向更短的月份添加行以保持日日历高度一致(6行)
4. today: false,         // 在日历底部显示一个“今天/现在”按钮
5. closable: true,       // 选择日期/时间后关闭弹出窗口
6. monthFirst: true,     // 月的前一天解析/转换日期从/到文本
7. touchReadonly: true,  // 在触摸设备上设置输入为只读
8. inline: false,        //以内联方式创建日历，而不是在弹出窗口中创建
9. on: null,             // 何时显示弹出框(输入默认为‘focus’，其他为‘click’)
10. initialDate: null,    //当没有选择日期时初始显示的日期(null = now)
11. startMode: false,  // 显示模式开始，可以是“年”、“月”、“日”、“小时”、“分钟”(false =“日”)
12. minDate: null,        //可选择的最小日期/时间，之前的日期/时间被禁用
13. maxDate: null,    // 可选择的最大日期/时间，禁用之后的日期/时间
14. ampm: true,           // 在时间模式下显示am/pm
15. disableYear: false,   // 禁用年份选择模式
16. disableMonth: false,  // 禁用月选择模式
17. disableMinute: false, // 禁用分钟选择模式
18. formatInput: true,    //格式输入文本输入模糊和模块创建
19. startCalendar: null,  //表示日期范围的开始日期的另一个日历的jquery对象或选择器
20. endCalendar: null,  // jquery对象或选择器，用于表示日期范围的结束日期的另一个日历
21. multiMonth: 1,        // 显示多个月时，在“天”模式
    //弹出选项('popup'， 'on'， 'hoverable'和显示/隐藏回调被覆盖)
22. popupOptions: {//弹出选项
      position: 'bottom left',
      lastResort: 'bottom left',
      prefer: 'opposite',
      hideOnScroll: false
    },
23. text: {
      days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      today: 'Today',
      now: 'Now',
      am: 'AM',
      pm: 'PM'
    },
24. formatter: {
      header: function (date, mode, settings) {
        //为给定的“日期”和“模式”返回一个字符串显示在标题上
      },
      yearHeader: function (date, settings) {
        //返回一个字符串，以便在年份模式中显示给定的“日期”的标题
      },
      monthHeader: function (date, settings) {
        //返回一个字符串，以显示在标题为给定的“日期”在月份模式
      },
      dayHeader: function (date, settings) {
        //返回一个字符串，以显示在标题为给定的“日期”在天模式
      },
      hourHeader: function (date, settings) {
        //返回一个字符串，在小时模式下显示在标题中
      },
      minuteHeader: function (date, settings) {
        //返回一个字符串，以便在分钟模式下在头中显示给定的日期
      },
      dayColumnHeader: function (day, settings) {
        //返回一个简短的日字符串，以日模式显示在每一列上
      },
      datetime: function (date, settings) {
        //返回表示日期和时间的格式化字符串
      },
      date: function (date, settings) {
        //返回一个格式化的字符串，表示date的日期
      },
      time: function (date, settings, forCalendar) {
        //返回表示“日期”时间的格式化字符串
      },
      today: function (settings) {
        return settings.type === 'date' ? settings.text.today : settings.text.now;
      },
      cell: function (cell, date, cellOptions) {
        //自定义日历单元格，cellOptions:
        //{mode: string，邻接:boolean, disabled: boolean, active: boolean, today:}
      }
    },
25. parser: {
      date: function (text, settings) {
        //返回从“text”解析的日期
      }
    },
    // 日期更改时回调，返回false取消更改
    onChange: function (date, text, mode) {
    },

    //在显示动画之前回调，返回false防止显示
    onShow: function () {
    },

    //显示动画后的回调
    onVisible: function () {
    },

    // 回调之前隐藏动画，返回假防止隐藏
    onHide: function () {
    },

    // 隐藏动画后的回调
    onHidden: function () {
    },

    // 给定的日期是禁用的吗?
    isDisabled: function (date, mode) {
      return false;
    },

26. selector: {
      popup: '.ui.popup',
      input: 'input',
      activator: 'input'
    },

27. regExp: {
      dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
      dateNumbers: /[^\d:]+/g
    },

28. error: {
      popup: 'UI Popup, a required component is not included in this page',
      method: 'The method you called is not defined.'
    },

29. className: {
      calendar: 'calendar',
      active: 'active',
      popup: 'ui popup',
      grid: 'ui equal width grid',
      column: 'column',
      table: 'ui celled center aligned unstackable table',
      prev: 'prev link',
      next: 'next link',
      prevIcon: 'chevron left icon',
      nextIcon: 'chevron right icon',
      link: 'link',
      cell: 'link',
      disabledCell: 'disabled',
      adjacentCell: 'adjacent',
      activeCell: 'active',
      rangeCell: 'range',
      focusCell: 'focus',
      todayCell: 'today',
      today: 'today link'
    },
30. metadata: {
      date: 'date',
      focusDate: 'focusDate',
      startDate: 'startDate',
      endDate: 'endDate',
      mode: 'mode',
      monthOffset: 'monthOffset'
    }