[英]bootstrap datepicker validation not working
我正在嘗試使用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上搜索了一個答案。 請幫我。
嘗試這個代碼工作小提琴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/
您可以為datepicker設置以下選項
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
我有你的問題...這是一個簡單的日期驗證
<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>
使用這個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%"/>
包括這個腳本
// 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"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.