Jquery datepicker, select year - javascript

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

Related

jQuery datepicker not working in paragraph

I have this small issue where I can't figure out why this datepicker doesn't work:
The HTML part is:
Test <input type="text" id="date1" name="date1"/>
<p>Startdatum:<input type="text" id="startTime"></p>
<p>Enddatum:<input type="text" id="endTime"/></p>
The JavaScript part is:
$('#startTime').datepicker({
dateFormat: "dd/mm/yy"
});
$('#endTime').datepicker({
dateFormat: "dd/mm/yy"
});
$('#date1').datepicker({
dateFormat: "m/d/yy"
});
Here's a JSFiddle: https://jsfiddle.net/h10t7ed6/
Can someone tell me why the datepicker doesn't appear?

You need JQuery UI support as well:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Also,
<script>
$(function() {
$('#startTime').datepicker({
dateFormat: "dd/mm/yy"
});
$('#endTime').datepicker({
dateFormat: "dd/mm/yy"
});
$('#date1').datepicker({
dateFormat: "m/d/yy"
});
});
</script>

jQuery date picker year 1927 format dd mm y issue

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

How to display month name in multi-datepicker plugin?

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

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

Date Validation based on current date

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

Categories

Resources