I have two date which is Date from and Date to, My problem is, I want Date from can only click/select past dates until the current date, then the Date to can automatically select the current date
Here's the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
</body>
</html>
Using maxDate property we can achieve your requirement.
Please set the maxDate as today date for date from Datepicker.
$(function() {
$( "#from" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
maxDate: new Date(),
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
minDate : new Date(),
maxDate: new Date(),
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
}).datepicker("setDate",new Date());
});
Hope this will help you.
Fiddle
$(function() {
$( "#from" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1 w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear() ,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
},
maxDate: 0
});
$( "#to" ).datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '2006:'+(new Date).getFullYear(),
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
}).datepicker("setDate", new Date()).datepicker( "option", "disabled", true );
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Related
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
$(function() {
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+28D',
});
});
I want to give admin power so that they can dynamically set the maximum date from the drop down. For e.g - if admin selects 3 from drop down it should automatically reflect in maxDate.
Here is your solution
I added new dropdown where admin select value it will automatically add in MaxDate
var newdate=$("#selected").val();
function getdate() {
console.log(newdate)
$("#datepicker").datepicker("destroy");
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+'+newdate+'D',
});
}
$( "#datepicker" ).datepicker("refresh");
getdate()
function change(){
newdate=$("#selected").val();
getdate()
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<select id="selected" onchange="change()">
<option>3</option>
<option>4</option>
</select>
</div><!-- End demo -->
jQuery DatePicker for format dd mm y breaking
I type in 01 01 27 it breaks it doesn't shows the date selected in calendar
Is it a jQuery bug ?
It accepts all values above year 1927
HTML
<p>Date: <input type="text" id="datepicker"></p>
JS
$( "#datepicker" ).datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
minDate: "-100Y",
maxDate: "-18Y"
});
$(function () {
$( "#datepicker" ).datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
minDate: "-100Y",
maxDate: "-18Y"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
looks like yearRange is something you can use:
$(function() {
$("#datepicker").datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
yearRange: "c-100:c-18"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
I have figured out the answer
adding
shortYearCutoff: "1", solves my problem
For more details check here
I would like to have more than 11 dates to choose from, instead I'd like to have all possible years in one single dropdown
This is my code:
$( function() {
$( "#data" ).datepicker({
changeMonth: true,
changeYear: true,
minDate: "-100Y",
maxDate: "-18Y"
});
} );
I would like to have full selection from 1917 to 1999
Try this :
$(function() {
$("#data").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:-18"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="data" />
I am trying to displaying multiple date picker range format like(Mar 2, 2015 - Mar 12, 2016) used one plugin http://multidatespickr.sourceforge.net/ and I tried following code
$(function() {
$(".datepicker").multiDatesPicker({
minDate: 0,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {
inst.settings.defaultDate = dateText;
}
});
});
but it is not working, someone help me?
You may not need onSelect handler. It is easily possible to do with following setting:
dateFormat: "M d, yy",
separator:' - '
$(function() {
$("#dp").multiDatesPicker({
dateFormat: 'M d, yy',separator:' - '
});
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" href="http://multidatespickr.sourceforge.net/css/pepper-ginder-custom.css" />
<input id="dp" type="text" />
I want to display jquery yearly calendar as shown in image.
now I displayed only monthly calendar JSFiddle
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<p>Date:
<div id="datepicker"></div>
</p>
You can add
numberOfMonths: [3, 4] in you jquery
FIDDLE EXAMPLE
you can edit the [Row,Column] as per your need
Use this script:
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: [3,4]
});
});
Thanks
Amit