1、用datetimepicker插件實現限定時間范圍的選擇 2、時間插件實現默認當天的時間和只能選擇小於今天的日期


一、用datetimepicker插件實現限定時間范圍的選擇

1、下面是要實現的效果圖,讓開始時間只能從  2018-7-1  到 2018-7-7 選擇。

  

2、html的結構

<div class="input-append input-group" id="beginTimeDiv">
        <input type="text" class="form-control" data-format="yyyy-MM-dd" placeholder="開始日期" disabled id="beginTime" name="beginTime" />
        <span class="input-group-addon add-on">
            <i data-time-icon="glyphicon glyphicon-time" data-date-icon="fa fa-calendar"></i>
        </span>
</div>

3、js代碼

$('#beginTimeDiv').datetimepicker('setStartDate',new Date("2018,7,2"));// 2018,7,1 號能點擊,要傳入比開始的日期多一天 
$('#beginTimeDiv').datetimepicker('setEndDate',new Date("2018,7,7"));

二、時間插件實現默認當天的時間

1、要實現的效果,假設當前時間是 2019-04-13,想要默認成 前天 的時間。且只能選擇小於今天的日期

2、html結構

 <div class="input-group input-append date datapick BeginTimeDiv">
      <input type="text" class="form-control input-sm" id="BeginTime" name="BeginTime" placeholder="請輸入日期" data-format="yyyy-MM-dd">
      <span class="input-group-addon">
            <i class="fa fa-calendar"></i>
      </span>
 </div>

3、js代碼如下

// ①默認成當天的日期
$('.BeginTimeDiv').datepicker("setDate", "-1d");//增加時間控件,-1d減少一天,-1m減少一個月,-1y減少一年
$(".BeginTimeDiv").datepicker("setDate", "null"); // null 代表着當天
$('.BeginTimeDiv').datepicker("setDate", "-1y,-1m,-1d");// 代表這個 年,月,日,各減少一個數字
// ②選擇小於當天的日期
 $('#BeginTime').datepicker({
      autoclose:true,//選中日期后日期框自動消失
      clearBtn:true,//提供清除按鈕,可以清除input框中日期
      language:"zh",//日期框顯示語言
      orientation:"top",//日期框顯示位置
      todayBtn:false,//是否顯示今天按鈕
      endDate:"-1d" //小於當天的日期的設置  endDate: new Date() 今天的日期和以前的能選擇
 });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM