Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
125
rated 0 times [  131] [ 6]  / answers: 1 / hits: 36732  / 9 Years ago, fri, march 6, 2015, 12:00:00

I want to disable the date before current date in date picker. How to do this?





$(function() {
var $dp1 = $(#datepicker1);
$(document).ready(function() {
$dp1.datepicker({
changeYear: true,
changeMonth: true,
dateFormat: yy-m-dd,
yearRange: -100:+20,
});
});
});

$(function() {
var $dp2 = $(#datepicker2);
$(document).ready(function() {
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: -100:+20,
dateFormat: yy-m-dd,
});
});
});

p.pfield-wrapper input {
float: right;
}
p.pfield-wrapper::after {
content: 0a00a0 ; /* keeps spacing consistent */
float: right;
}
p.required-field::after {
content: *;
float: right;
margin-left: -3%;
color: red;
}

<link href=https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css rel=stylesheet/>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js></script>
<script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js></script>
<p class=pfield-wrapper required-field>
<label>Start Date</label>
<input id=datepicker1 type=text name=s style=width:155px; required value=>
</p>
<p class=p>End Date
<input id=datepicker2 type=text name=e style=width:155px; value=>
</p>





Equivalent JsFiddle


More From » jquery

 Answers
-1

Use the minDate property in JQuery UI datepicker API.



$(function() {
var $dp1 = $(#datepicker1);
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate:0,
dateFormat: yy-m-dd,
yearRange: -100:+20,
});

var $dp2 = $(#datepicker2);
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: -100:+20,
dateFormat: yy-m-dd,
});
});




$(function() {
var $dp1 = $(#datepicker1);
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate: 0,
dateFormat: yy-m-dd,
yearRange: -100:+20,
});

var $dp2 = $(#datepicker2);
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: -100:+20,
dateFormat: yy-m-dd,
});
});

p.pfield-wrapper input {
float: right;
}
p.pfield-wrapper::after {
content: 0a00a0 ; /* keeps spacing consistent */
float: right;
}
p.required-field::after {
content: *;
float: right;
margin-left: -3%;
color: red;
}

<link href=https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css rel=stylesheet />
<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js></script>
<script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js></script>
<p class=pfield-wrapper required-field>
<label>Start Date</label>
<input id=datepicker1 type=text name=s style=width:155px; required value=>
</p>
<p class=p>End Date
<input id=datepicker2 type=text name=e style=width:155px; value=>
</p>





Equivalent JsFiddle



Also note that you need to use only one document ready event in your script.


[#67550] Wednesday, March 4, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yamileth

Total Points: 53
Total Questions: 96
Total Answers: 112

Location: England
Member since Tue, Sep 8, 2020
4 Years ago
;