4

我正在嘗試使用bootstrap-datetimepicker.min.js,並且已成功將它集成到我的項目中。但是,當我試圖在from輸入字段中將今天的日期顯示爲默認值時,它不起作用。引導日期選擇器驗證不起作用

的Javascript:

var d = new Date(); 

var currDate = d.getDate(); 
var currMonth = d.getMonth(); 
var currYear = d.getFullYear(); 

var dateStr = currDate + "-" + currMonth + "-" + currYear; 

$('#from').datetimepicker({ 
    pickTime: false, 
    defaultDate: dateStr 
}); 

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/> 

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/> 

,並用此我也想驗證日期from申請,以便它不應該是小於今天的日期和to日期不小於明天的日期和不超過3個月的日期。

我已經在Google和Stackoverflow上搜索了答案。請幫幫我。

回答

3

試試這個代碼工作的小提琴http://jsfiddle.net/KWvNe/

HTML

<div class="well"> 
    <div id="from-datepicker" class="input-append date"> 
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
     </i> 
    </span> 
    </div> 
</div> 

<div class="well"> 
    <div id="to-datepicker" class="input-append date"> 
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
     </i> 
    </span> 
    </div> 
</div> 

JS

$(function() { 

    var d = new Date(); 
    var today = d; 
    var dateThreeMonthLater = d.setMonth(d.getMonth() + 3); 

    $('#from-datepicker').datetimepicker({ 
     language: 'pt-BR', 
     startDate: today, 
     endDate: dateThreeMonthLater 
    }); 

    $('#to-datepicker').datetimepicker({ 
     language: 'pt-BR' 
    }); 

}); 

檢查工作撥弄這裏http://jsfiddle.net/KWvNe/ 不要忘了這裏有必要的JavaScript和CSS檢查http://tarruda.github.io/bootstrap-datetimepicker/

您可以設置下列選項的日期選擇

maskInput: true,   // disables the text input mask 
    pickDate: true,   // disables the date picker 
    pickTime: true,   // disables de time picker 
    pick12HourFormat: false, // enables the 12-hour format time picker 
    pickSeconds: true,   // disables seconds in the time picker 
    startDate: -Infinity,  // set a minimum date 
    endDate: Infinity   // set a maximum date 
+0

謝謝先生它工作,但我希望結束的日期應該是今後3個月根據今天的日期 –

+1

檢查更新的答案 –

+0

如果這個答案可以幫助你可以標記爲正確的答案:) –

0

使用這個jQuery功能

<script> 
    $(function() { 
    $("#from").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      $("#from").datepicker("option", "dateFormat", "yy-mm-dd"); 
      $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      $("#to").datepicker("option", "dateFormat", "yy-mm-dd"); 
      $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
    }); 
</script> 

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/> 

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/> 
+0

謝謝您的回答,但你嘗試給定的代碼後,它是甚至沒有顯示我日曆日期 –

0

包括這個腳本

// jQuery Date Picker 
jQuery(".datepicker").datepicker({ 
    showOtherMonths: true, 
    selectOtherMonths: false, 
    isRTL:false, 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 

}); 
jQuery('.datepicker').css('cursor', 'pointer'); 
jQuery('.datepicker').attr("readonly", "readonly"); 
jQuery('.datepicker').addClass('tooltip-info'); 
jQuery('.datepicker').attr('data-rel', 'tooltip'); 
jQuery('.datepicker').attr('data-placement', 'right'); 
jQuery('.datepicker').attr('data-original-title', 'Select a Date'); 
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd"); 
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown"); 
jQuery(".datepicker").each(function(){ 
    jQuery(this).datepicker("setDate", jQuery(this).attr('date-value')); 
}); 
Use id="datepicker" 

+0

再次感謝你先生...但不能再次工作..同樣的問題.. –

+0

是有辦法驗證日期使用jquery only..like選擇日期後...它應該檢查日期和驗證它..使用jQuery只..而不是datetimepicker –

1

我得到烏爾問題...這是一個簡單的日期確認

<input type="text" id="txtdate" /> 
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/> 
<script> 
      function checkDate() { 
      var EnteredDate = document.getElementById("txtdate").value; //for javascript 
      var EnteredDate = $("#txtdate").val(); // For JQuery 
      var date = EnteredDate.substring(0, 2); 
      var month = EnteredDate.substring(3, 5); 
      var year = EnteredDate.substring(6, 10); 
      var myDate = new Date(year, month - 1, date); 
      var today = new Date(); 
      if (myDate > today) { 
       alert("Entered date is greater than today's date "); 
      } 
      else { 
       alert("Entered date is less than today's date "); 
      } 
     } 
    </script> 
+0

謝謝你先生根據@Subodh Ghulaxe先生的答案我已經解決了這個問題。在jQuery中使用setdate屬性...現在我正在尋找結束日期驗證它靈魂3個月根據今天日期日期 –