Develop Reference

Dynamically set maximum date in jquery (javascript)

<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, select year

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" />

jquery datepicker not accepting dateformat

I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());

Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>

Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">

display jquery yearly calendar

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

Type Error: 'undefined' is not a function

I am attempting to create a date picker with an HTML form. In my HTML header I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
My script is:
<script type="text/javascript">
jQuery('#from').datepicker({
dateFormat: 'yyyy-mm-dd'
});
jQuery('#to').datepicker({
dateFormat: 'yyyy-mm-dd'
});
</script>
My form is:
<form action="rural_report.php" method="post">
Date From: <input type='text' id='from' name='from'/><br/>
Date To: <input type='text' id='to' name='to'/><br/>
<input type='submit' value='Get Rural Call Report'/>
</form>
I have tried wrapping the script in a document.ready function like this:
jQuery(document).ready(function(){
jQuery('#from').datepicker({
dateFormat: 'yyyy-mm-dd'
});
jQuery('#to').datepicker({
dateFormat: 'yyyy-mm-dd'
});
});
I have also tried using a "$" instead of "jQuery". I have tried putting the script block in the HTML head with and without the document.ready bit, in the body before the form with the document.ready bit and at the very end of the body with and without the document.ready bit.
I am using Safari. The error I am getting is
TypeError: 'undefined' is not a function (evaluating 'jQuery('#from').datepicker({
dateFormat: 'yyyy-mm-dd'
})')
When I type in a $ or the word jQuery at the bottom of the debug tool, I get the statement
function (a, b) {return new n.fn.init(a,b);}
When I click on the text box, it gets a blue glow around it, but the calendar does not show up.
Thanks for your help.

You'll have to add jQuery UI as well, the datepicker is not available in the core jQuery files
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#from').datepicker({
dateFormat: 'yyyy-mm-dd'
});
$('#to').datepicker({
dateFormat: 'yyyy-mm-dd'
});
});
</script>