1. 程式人生 > >bootstrap datetimepicker日期插件使用方法

bootstrap datetimepicker日期插件使用方法

dead lda 資源 nth 標準 start return blur 格式

1.github下載資源包 http://www.bootcss.com/p/bootstrap-datetimepicker/

2.引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

3.中文包 bootstrap-datetimepicker.zh-CN.js

  html

    <input name="entryDate" placeholder="請選擇入職日期" id="blrz-entry-date-start" type="text" >

  js  

    $("#blrz-entry-date-start").datetimepicker({
      format: ‘yyyy-mm-dd‘,
      language: ‘zh-CN‘,
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      minView: 2,
      forceParse: 0
    });

  補: 可將input設設置為不可用狀態 

    $(‘#blrz-entry-date-start‘).focus(function(){
      $(this).blur();//不可輸入狀態
    })

  /*************************************************************************************************************/

//通過入職日期改變勞動合同截止日期(後者在前者的基礎上加2年)

  <input name="entryDate" placeholder="入職日期" id="blrz-entry-date-start

" type="text" >

  <input name="entryDate" placeholder="合同截止日期" id="blrz-entry-date-end" type="text" >


$("#blrz-entry-date-start").on(‘change‘,function(){
  var thisEntryDate = $("#blrz-entry-date-start").val();
  if(thisEntryDate != ‘‘){
    thisEntryDate = thisEntryDate.replace(/-/g,"/");
    var normalDate = new Date(thisEntryDate);//轉為標準時間格式
    normalDate.setFullYear(normalDate.getFullYear()+2);//將年份加兩年
    var formatDateTime

= function (date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ‘0‘ + m : m;
      var d = date.getDate();
      d = d < 10 ? (‘0‘ + d) : d;
      return y + ‘-‘ + m + ‘-‘ + d;
    };
    var forContract_deadline = formatDateTime(normalDate)
    $("#blrz-entry-date-end").val(forContract_deadline)
  }
})
//通過入職日期改變勞動合同截止日期end

bootstrap datetimepicker日期插件使用方法