a quick question, I have this Code implementing jquery ui datepicker with version of jquery2.0.3, and i can't make it work. I don't know if there's an issue or am I missing something. I'm following this docs. as i code jqueryUI datepicker tutorial
here's my 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.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-2.0.3.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
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>
could anyone help me. Thanks in advance.
You need to include jQuery core library before jQuery UI in your fiddle since jQuery UI require core jQuery to work.
Updated Fiddle
Related
I have tried so many means I've seen on how to use the minDate() and maxDate() property of jquery datepicker plugin to restrict a user from picking a range of date values but none ever worked. Even the sample code that was working on the jQuery UI plugin official page on how to do it, I tried it but it didn't work. Please need assistance on how to achieve this if there is another plugin to link before it works or...
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd'
});
})
I will appreciate any help. Thanks a lot. Wisdom
Check example below:
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2017, 5-1 , 5), // months count starts from 0
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<input id="enrolldateprim">
You can find library sources in a code snippet.
You can download the dependencies from: http://jqueryui.com/download/
And JQuery itself from: https://jquery.com/download/
Just go to the first link and scroll down until you see download button. Select your preferred theme and press download. Unzip the zip file and look (within my code) at the links (href) and the scripts (src) to see what to include to make it work.
Of course you don't need to include the styling (CSS) but it comes with the zip file if you wish to use it.
The Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.css">
<script src="jquery-3.1.1.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$( function() {
$("#datepicker").datepicker(
{
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
} );
</script>
</head>
<body>
<h3>My DateTimePicker</h3>
<p>Pick date:
<input type="text" id="datepicker">
</p>
</body>
</html>
PS:
$(function() {
// Handler for .ready() called. (This is shorter)
});
Does the same as:
$( document ).ready(function() {
// Handler for .ready() called. (This is longer)
});
If you are using the jquery-ui datepicker widget, then take a look at the code below.
By the way, buttonText should be used in conjunction with the showOn option set to "button" or "both", so I add the showOn option.
$(function(){
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat : 'yy-mm-dd',
showOn: "both"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
This is the working format in fiddle
and below is the code i have used in my demo-site i have created a new folder name js and placed datepicker.js inside it. so i linked the following in my html.
<script type="text/javascript" src="js/datepicker.js"></script>
and my datapicker.js code is
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
and my html code is
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
but when i press the above button .js is not being called. please help
You need to include a version of jQuery. Download the latest release and put it in your js folder and link it like you did for datepicker.js or directly include it like this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
If this does not work try
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am not sure if your single datepicker.js has and error, but if it does try the jquery-ui js which includes it.
I tested it with including the above 2 js sources and it worked fine.
If the direct link to the jquery site js does not work then it is another problem on your page that is not shown to us.
Your code is running absolutly fine on my local machine.
Where i simply used the jQuery and jQueryUI CDN path from
Google Developer Site
Link
Your piece of code:
<!DOCTYPE html>
<html>
<head>
<title>JS Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
</script>
</body>
</html>
if you miss place the position of jquery it wont work. hope the below code helps you.
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
I use the datepicker function from jquery. Now I have integrated a inline calendar. It should be possible to click on one day in the shown month and then submit a form or change the url. I need the new date added to the url so i can jump to this date.
But my code won't change the value of the input - and i don't know why.
Here my code:
In the head area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.de.js"></script>
The HTML:
<form method="get" action="index.php">
<div class="form-group">
<div class="minicalendar"></div>
<input class="form-control" type="text" name="submitDate" id="submitDate" />
</div>
</form>
The JS:
$('.minicalendar').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Do you know why? I was searching for a time now but I wasn't able to find a solution that works ...
Thanks.
You are binding the datepicker to adiv instead of aninput.
<input id="datepicker" />
$('#datepicker').datepicker({
//...
});
You also don't need to change the input text with the onSelect event. The widget will do thix automatically.
$('#submitDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Use this. Datepicker won't bind to a <div> it has to be an <input> element. Check this link for more examples.
Here is the code from JQuery UI DatePicker :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
The input id has to be the same that the element selected in JQuery.
I'm relatively new to jQuery and am having a difficult time getting the jQuery datepicker to work from an external js file.
Originally I created the script as a function, but believed that by doing so I was limiting the scope and it would not be accessible outside the function. I've also tried defining it as a function (and naming the function), then calling it using $(document).ready. I cannot get it to work either way.
My external js script is called scripts.js and its contents are below:
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
dateFormat: "mm/dd/yy",
altField: "#forminp1",
altFormat: "yyddmm",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "images/calendar.gif",
dateFormat: "mm/dd/yy",
altField: "#forminp2",
altFormat: "yyddmm",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
},
});
The HTML is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.css" type="text/css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script src="js/scripts.js"></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">
<p></p>
<input type="text" id="forminp1" size="30"> <input type="text" id="forminp2" size="30">
</body>
</html>
How can I keep the jQuery code external but have it run properly when the page loads?
Wrap the whole file in a jQuery document.ready function like this.
jQuery document ready
The basics are that everything you need to run on page load needs to be inside
$( document ).ready(function(){ ... });
or the shortcut
$( function(){ ... });
See the docs for more info on this.
Script on bottom of page
You could also just put the <script src="..."></script> on the bottom of the page, right above the </body> tag.
This is generally considered to be the best practice way of doing things.
How can I include both language translation and changeMonth and changeYear options together in jquery date picker. For that I used the below code
For Language translation
$(this).datepicker($.datepicker.regional['fr']);
For ChangeYear
$( this ).datepicker({
changeMonth: true,
changeYear: true
});
I want to run these two in a single datepicker box.Please help
Looking at the source the regional is an object with options so this should work:
$(this).datepicker($.extend({}, $.datepicker.regional['fr'], {
changeMonth: true,
changeYear: true
}));
Here's a simple way (see this JFiddle: http://jsfiddle.net/Kp8Nq/).
You can change the localization option instead of creating a new datepicker:
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("#datepicker").datepicker("option",
$.datepicker.regional["fr"]);
$("#locale").change(function () {
$("#datepicker").datepicker("option",
$.datepicker.regional[$(this).val()]);
});
});
I personally would let the user decide, if you have a multi-national website:
See: http://jqueryui.com/datepicker/#localization
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.ui.datepicker-ar.js"></script>
<script src="jquery.ui.datepicker-fr.js"></script>
<script src="jquery.ui.datepicker-he.js"></script>
<script src="jquery.ui.datepicker-zh-TW.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" />
<select id="locale">
<option value="ar">Arabic ((العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="he">Hebrew ((עברית</option>
</select></p>
</body>
</html>