不羁的空间
Appearance

日历控件

bujichongpc框架pc框架 表单

说明

时间日历框分 普通分单日历框和范围日历框

  • 单日历框 so-date是由 my97 实现的，my97历史悠久，open in new window功能完善，bug较少，而且实现了自动纠错，效果还是不错的。另外，我们可以在行编辑也使用 so-date,对应 editor类型是 my97 。
  • 范围日历框 有 so-rangeDate 和 so-rangeWeek ,都是由 Date Range Picker open in new window的。
  • 除了特殊定制的部分接口，原插件接口配置都可以使用，可以配置在 html 的 data-opt 或 data-options 中，或 js初始化的 参数对象里。

so-date

so-date是基于my97包装的日历控件，详细参数可以参考 my97文档说明open in new window。

默认参数：

{
    type : 'date',//date | time | month  默认提供 月、日、日时间 三种快捷选择器类型 ，复杂的选择格式，可以通过format实现
    format : 'yyyy-MM-dd',//日期格式，比type定义权级高
    minDate:'1920-01-01',//最小日期
    maxDate:'2060-01-01',//最大日期
    autoFormatVal： false, //是否自动格式化value值为 format格式
    ...
    //my97配置可以直接放置在配置对象中
}

代码示例：

<input type="text" class="txt so-date" name="opTime" data-opt="minDate:new Date(),onpicked:function(){ }" />

<!-- 日期设置了 autoFormatVal: true 后，初始化时，value值会自动格式化为设置的格式 -->
<input type="text" class="txt so-date" name="odTime" data-opt="type:'date',autoFormatVal: true" value="2023-04-25 12:24:14" />

<input type="text" class="txt so-date" name="odTime" data-opt="type:'time',minDate:new Date()" />

<input type="text" class="txt txt-date osStartTime" name="osStartTime" />

也可以用JS来初始化组件,如上面的输入框 osStartTime， 注意，soDate 输入框 右侧会自动带一个日历小图标，如果不使用 classso-date来初始化日历框，请加class txt-date，为输入框添加日历小图标。

$form.soDate('.osStartTime',{
    format:'yyyy-MM-dd HH:mm:00',//不选择秒
    minDate : '#F{$dp.$D(\'operationBegin\')}', // 最小时间大于 #operationBegin 输入框中的时间
    maxDate : '#F{$dp.$D(\'operationEnd\')|| \''+plvhTime+'\' ||\'${sysdate}\'}',// #F{ } 的用法参考 my97 ,这里是对应某结束输入框的id ， || 表示其中任何一个，先后顺序表示满足优先级
    onpicked : function (data) {//选中事件，参考my97手册
      var val = $(this).val();
      window.console && console.log(val);
    }
});

$form.soDate('.txt-date',{
    format : 'HH:mm'//只显示时间和分钟
});

so-rangeDate

rangeDateso-rangeDate是基于 Date Range Picker 包装的日历范围控件，详细参数可以参考 Date Range Picker 文档说明open in new window。

默认参数：

{
    format : 'YYYY-MM-DD',//默认格式
    readonly:true,
    timePicker : false,//带不带时间选择
    single : false,//是否单日历
    auto : true,//是否自动填写，不带清空输入框功能
    minDate : '1920-01-01',
    maxDate : '2060-01-01',
    beginStr : 'Begin',//起始 后缀
    endStr : 'End',//结束后缀
    maxSpan:{days: 90},//日期跨度范围
    val : null,//初始值，在 dateV 中选择
    autoApply : true,//日期范围不用确认，自动选择
    linkedCalendars: false,//两个日历不一起联动，保证可以选择两个月以上的日期
    ranges : {//快捷范围面板范围值
        '今天': dateV.today,
        '昨天': dateV.yesterday,
        '最近一周': dateV.week,
        '最近30天': dateV.month,
        '当月': dateV.thisMonth,
        '上个月': dateV.prevMonth
    },
    autoUpdateInput : true,
    alwaysShowCalendars : true,
    opens : 'center',//默认日历居中显示  center | left | right
    init : function () {},//初始化执行事件
    callback : function () {}//选择后返回事件
}

附 dateV：

var dateV = {
  today : [
    moment().hour(0).minute(0).second(0) ,
    moment()
  ],
  day : [
    moment().hour(0).minute(0).second(0) ,
    moment().hour(23).minute(59).second(59)
  ],
  yesterday : [
    moment().subtract(1, 'days').hour(0).minute(0).second(0) ,
    moment().subtract(1, 'days').hour(23).minute(59).second(59)
  ],
  week : [
    moment().subtract(6, 'days').hour(0).minute(0).second(0) ,
    moment().hour(23).minute(59).second(59)
  ],
  month : [
    moment().subtract(30, 'days').hour(0).minute(0).second(0) ,
    moment().hour(23).minute(59).second(59)
  ],
  thisMonth : [
    moment().startOf('month'),
    moment().endOf('month')
  ],
  prevMonth : [
    moment().subtract(1, 'month').startOf('month'),
    moment().subtract(1, 'month').endOf('month')
  ]
}

var ranges = {
    '今天': dateV.today,
    '整今天': dateV.day,
    '昨天': dateV.yesterday,
    '最近一周': dateV.week,
    '最近30天': dateV.month,
    '当月': dateV.thisMonth,
    '上个月': dateV.prevMonth
};

代码示例：

<!-- 带class so-rangeDate 自动初始化 ，默认不带任何参数，会自动取当天做时间范围值 -->
<input type="text" class="txt so-rangeDate rangeDateA w-190" name="date" data-opt="">


<!-- txt-rangeDate 会为输入框末尾带日历小图标 -->
<input type="text" class="txt txt-rangeDate rangeDateA w-190" name="date" data-opt="val:'month',opens:'center'">


<!-- 想将默认范围设置为空 , 请将 auto 设置为false -->
<input type="text" class="txt so-rangeDate w-190" name="inDate" data-opt="{
          val : '', //想将默认范围设置为空 , 请将 auto 设置为false
          auto : false,
          maxSpan : {
            'days' : 180// 范围改为3个月
          },
          opens:'right',//显示在输入框左侧
          init:function(s,e,l){ }
 }">

$form.rangeDate('#consultDate',{
    val:'month', // 可以为 dateV 中任意键值 ，也可以为 数组 ([startDate,endDate])，如下2个代码示例
    auto : false,//auto 为false 会显示确定按钮
    opens:'center',
    timePicker: true, // 显示时间选择器
    init:function(s,e,l){
        // 默认查询grid数据
        $('.btn-search').click();
    }
})

//默认值的特殊设置
$form.rangeDate('#dRangeDate',{
    val: [0,30] //默认显示当天到30天后
    //val : [-7,0],//默认显示7天前到当天
})

//使用 moment方式 设置默认值
$form.rangeDate('.txt-rangeDate',{
    val:[moment('2018-10-01'),moment('3000-01-01')]// 使用 moment，请require moment插件进来
    //val : [moment(regDate),0]  //混用
});

so-rangeWeek

rangeWeekso-rangeWeek也是基于 Date Range Picker 包装的日历范围控件，不同的是每次都选择一周，或通过按钮切换上下一周。

代码示例：

$form.rangeWeek('.txt-weekDate',{
    value:'2018-03-05',
    minDate:'2018-02-14',
    maxDate:'2018-04-14',
    init : function (start,end,data) {

    },
    callback : function (start,end,data) {

    },
    prevNextBtn : true
});
文档目录