semantic-ui时间控件使用

迈不过友情╰ 2022-12-15 06:10 193阅读 0赞

## semantic-ui时间控件使用 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTAxODE0_size_16_color_FFFFFF_t_70_pic_center]

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

<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);

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

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

控件属性设置

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'
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTAxODE0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1c7ef5349eaa4860a561f8ff82721aab.png