BrickPlus

概述
配置项
限制日期
日期区间
事件监听

日历控件提供了两种模式：单选日期和区间日期。大多数日历选择框需将文本框设置为readonly属性，不提供用户自行修改日期，保证输入框日期格式正确完整。
单选日期类似之前的日历控件，用户点击某日期则选择该日期。
区间日期则需要选择开始日期和结束日期，返回的一个时间段xxxx-xx-xx 至 oooo-oo-oo。还提供了最近7天、14天和30天快捷按钮。

实例

默认双日期：

单个日期：

日期区间：

<div class="form-group fn-mb-20">
    <label class="form-control-label">
      <span>默认双日期</span>
      <em>：</em>
    </label>
    <div class="form-control-wrap">
      <div class="form-control-date">
        <span class="form-control-date-btn"><i></i></span>
        <input type="text" value="2016-07-12" readonly data-toggle="datetimepicker"  class="form-control">
      </div>
    </div>
    </div>
    <div class="form-group fn-mb-20">
    <label class="form-control-label">
      <span>单个日期</span>
      <em>：</em>
    </label>
    <div class="form-control-wrap">
      <div class="form-control-date">
        <span class="form-control-date-btn"><i></i></span>
        <input type="text" value="2016-07-12" readonly data-toggle="datetimepicker" data-option="{calendars: 1}" class="form-control">
      </div>
    </div>
    </div>
    <div class="form-group">
    <label class="form-control-label">
      <span>对比日期</span>
      <em>：</em>
    </label>
    <div class="form-control-wrap">
      <div class="form-control-date">
        <span class="form-control-date-btn"><i></i></span>
        <input type="text" value="2016-07-12 至 2016-07-30" readonly data-toggle="datetimepicker" data-option="{period: true, names: ['start_time', 'end_time']}"  class="form-control">
      </div>
    </div>
</div>

日历控件当然也提供相应的配置项，方便用户配置不同的交互效果。比如我们在实际的开发中需要去限定日历控件的最大和最小可选择日期等。
第一种是在使用jQuery插件初始化时使用$(selector).datetimepicker(options)
第二种是通过默认的data-option="{xxx:000}"方式，很方便我们队当前选择框进行定制日历控件，注意的是data-option的优先级比 jquery 插件绑定和设置方法的优先级低。
第三种是使用插件对象的$(selector).datetimepicker('setOption', {}, [true|false])进行重新配置，优先级也为最高。

实例

开始日期：

<div class="form-group">
  <label class="form-control-label">
    <span>开始日期</span>
    <em>：</em>
  </label>
  <div class="form-control-wrap">
    <div class="form-control-date">
      <span class="form-control-date-btn"><i></i></span>
      <input type="text" value="2016-07-12" readonly data-toggle="datetimepicker" data-option="{min: '2015-01-15', max: '2016-12-15'}" class="form-control">
    </div>
  </div>
</div>

option参数配置

参数配置可以定义在data-option上或者在 jquery 插件函数调用上使用。

实例

属性	说明	类型	默认参数
period	设置为区间日期	Boolean	false
names	设置为区间日期的开始时间和结束时间的name属性，当period为true时必须配置此属性。其中数组第一项为开始时间的 name，第二项为结束时间的 name 属性，其他忽略	Array	[]
dayRangeMax	设置日期区间最大的跨度天数，超出此数会提示并设置日期为今天。	Number	366
defaultText	`至`	String	区间日期拼接文字
calendars	显示几个月日历	Number	默认是显示2个月，最好最大2个月
isTodayValid	今天是否可選	Boolean	true
min	最小可用时间	String	`1970-01-01`
max	最大可用时间	String	`''`
stopToday	今天之后的日期是否不可选	Boolean	false
weekendDis	灰掉周末不可选	Boolean	false
disCertainDay	不可用的周日期设置数组，如：[1,3]是要周一，周三两天不可选，每个周的周一，周三都不可选择。	Boolean	[]
disCertainDate	不可用的日期设置数组，如:[1,3]是要1号，3号 // 两天不可选，特别的，[true,1,3]则反之，只有1，3可选，其余不可选。	Boolean	[]
success(date)	成功回调	Function	$.noop


$(selector).datetimepicker('setOption', { min: '2016-08-09', max: '2019-01-02'});

实例

今天不可选：

未来日期不可用：

周末不可用：

周3周5不可用：

5号10号15号不可用：

只有每月15号可用：

当我们需要动态去设置每个日历选择框的最大最小日期时，需要调用$(selector).datetimepicker()相应的接口。
$(selector).datetimepicker('setMaxDate', dateStr)方法是用于设置最大的可选择日期
$(selector).datetimepicker('setMinDate', dateStr)方法是用于设置最小的可选择日期

实例

开始日期：

            
// demo 3
// 设置最大日期
// 设置最小日期
var $demoInput3 = $('#j-datetimepicker-3');
$('[data-toggle="setMaxDate"]').on('click', function() {
  var date = $(this).data('date');
  $demoInput3.datetimepicker('setMaxDate', date);
})
$('[data-toggle="setMinDate"]').on('click', function() {
  var date = $(this).data('date');
  $demoInput3.datetimepicker('setMinDate', date);
})

除了以上两种方法外，我们需要更方便的同时设定最小最大日期，可以使用$(selector).datetimepiker('setOption', {min: 'xxxx-xx-xx', max: 'oooo-oo-oo'})进行配置

实例

开始日期：

            
// demo4
// 设置最大最小日期
$('[data-toggle="setOption"]').on('click', function() {
  $('#j-datetimepicker-4').datetimepicker('setOption', {max: '2017-02-01', min: '2016-05-18'});
})

日期区间是为了方便我们快速的选择一段时间，比如2天内，一星期内，两星期内抑或30天内。
启用日期区间模式必须设置{period: true, names: ['start_time', 'end_time']}两个属性。
日期区间提供快速选择范围的快捷按钮。
自主选择区间，如果不点击确定按钮在开始和结束日期不一样（一段时间范围区间）时则重新开始选择日期。
日期选择文本框可以赋值，支持'yyyy-mm-dd','yyyy-mm-dd 至 yyyy-mm-dd'之类样式，无法识别则使用当天日期

实例

日期区间：


    <div class="form-group">
    <label class="form-control-label">
      <span>对比日期</span>
      <em>：</em>
    </label>
    <div class="form-control-wrap">
      <div class="form-control-date">
        <span class="form-control-date-btn"><i></i></span>
        <input type="text" value="2016-07-12 至 2016-07-30" readonly data-toggle="datetimepicker" data-option="{period: true, names: ['start_time', 'end_time']}"  class="form-control">
      </div>
    </div>
</div>

日历选择器提供了相应的 jQuery 显示show.bp.datetimepicker，隐藏hide.bp.datetimepicker，选择choose.bp.datetimepicker事件。


// 带返回参数
// date 为开始日期，单选日期为选择日期
// end 日期区间模式时，返回结束日期
$('[data-toggle]').on('choose.bp.datetimepicker', function(e, date, end) {
  console.log(date, end)
  console.log($(this).val())
})

$('[data-toggle]').on('show.bp.datetimepicker', function(e, date) {
  console.log('show')
})

$('[data-toggle]').on('hide.bp.datetimepicker', function(e, date) {
  console.log('hide')
})