bootstrap datepicker validation not working
Solution 1
try this code working fiddle 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'
});
});
Check working fiddle here http://jsfiddle.net/KWvNe/ do not forgot to include essential javascript and css check here http://tarruda.github.io/bootstrap-datetimepicker/
You can set following options for a 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
Solution 2
use this jquery function
<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%"/>
Solution 3
I got ur problem...This is a simple date validation
<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>
Mohammed Sufian
A Hack Programmer, capable writing codes using almost all programming languages. He is also involved in maintaining & securing Linux/Windows Servers (Vulnerability / Penetration Tester) Of course, I can't survive without the Internet & I guess you too ;-) Quick Learning & Implementing Ability... Googling and implementing, optimizing, testing, and using best practices... You can connect with Sufian using mohammedsufianshaikh at gmail
Updated on July 09, 2022Comments
-
Mohammed Sufian over 1 year
I am trying to use
bootstrap-datetimepicker.min.js
and I have successfully integrated it in my project. Yet, when I tryg to show today's date as a default value in thefrom
input field, it is not working.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%"/>
AND with this I would also like to validate the date in
from
filed so that it should not be less than today's date andto
date not less than tomorrow's date and not greater than 3 month date.I have searched for an answer on google and Stackoverflow already. Please help me.
-
Mohammed Sufian almost 10 yearsthanks for your answer but after trying your given code it is not even showing me calender to select date
-
Mohammed Sufian almost 10 yearsis there way to validate the date using jquery only..like after selecting date... it should check the date and validate it..using jquery only..and not datetimepicker
-
Mohammed Sufian almost 10 yearsthanks sir it is working but i want that end date should be 3 months in future according to todays date
-
Mohammed Sufian almost 10 yearsthank you sir according to @Subodh Ghulaxe sir answer i have solved this..using setdate attribute in jquery ...now i am looking for end date validation it soulhd be 3 months futer date according to todays date
-
Mohammed Sufian almost 10 yearsthank you sir it works fine now..but it is not alowing me to slect date from todays upto 3 months.. that is i can only selct todays date and date after 3 months..and i would like to have that user can selcet todays date and date betwwen todays date and 3 month date..