here is the my code,in my home page there is a button to load this page, it is done by using jquery $("#content").load(site_url); like this. but this date picker doesn't work
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
});
</script>
<div id="content">
<form>
<input type="text" id="datepicker">
</form>
</div>
Related
I have been struggling with this error for a while now. Checked all my includes, compared to other pages and everything looks to be fine to me. I am honestly completely lost why this is happening.
I have a jQuery datepicker function on my homepage which doesn't work, it throws the error "Function not found". However, I have the exact same function on other sub-pages and no issues at all.
css
Those are my includes from the page that works:
<link rel="stylesheet" href="./index/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./index/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
Scripts
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
And to compare, includes from the homepage
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
I also thought that maybe I wrote something wrong so I copied the code exactly from the working page and still no luck. The only difference is that I am using Google Charts API on the homepage, could this be throwing off the datepicker?
My datepicker function:
JavaScript
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
And where it is used:
HTML
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" />
I dont know in which order you load the scripts, so here is the ay it worked for me:
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
$( function() {
$( "#datepicker" ).datepicker();
} );
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" >
I want to change date format in JQuery datepicker (http://demos.jquerymobile.com/1.4.5/datepicker/)
Using function dateFormat - http://api.jqueryui.com/datepicker/#option-dateFormat.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#date").datepicker({
dateFormat: "dd.mm.yy"
});
</script>
</head>
<body>
<input data-role="date" type="text">
</body>
</html>
Why it does not work?
See this fiddle
You are missing id attribute for your input. Since you are initialising your datepicker as $("#date").datepicker(), you have to specify an id as date to your `input. You are using the ID Selector here.
Please take a look at the jQuery selectors in the docs.
HTML
<input data-role="date" type="text" id="date">
JS
$("#date").datepicker({
dateFormat: "dd.mm.yy"
});
UPDATE
Since you are loading your <script> in the <head>, you will have to use $( document ).ready(). Here is an updated fiddle. Thus , the updated JS would be as below
$( document ).ready(function() {
$("#date").datepicker({
dateFormat: "dd.mm.yy"
});
});
You need to wrap your block with a document.ready check, otherwise, it will execute before the dom exists and do nothing.
$( document ).ready(function() {
$("#date").datepicker({
dateFormat: "dd.mm.yy"
});
});
You also need to add an id on your input:
<input data-role="date" type="text" id="date">
$("#datepicker").datepicker();
I am using this function
and its box of input is
<input type="text" id="datepicker" name="fulldate" class="form-control wid-100"> <span id="#dpicker_name"></span>
Please help me in it friends
You have to do like
$(document).ready(function(){
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
$("#dpicker_name").html(dateText);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<input type="text" id="datepicker" name="fulldate" class="form-control wid-100">
<span id="dpicker_name"></span>
Please check Documentation
Also you can get it without onSelect like
$("#datepicker").datepicker("getDate");
Try this
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
Seems to me you want to trigger the datepicker on click of icon. Check the docs here .
used to this code
Demo
<!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.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() {
$( "#datepicker" ).datepicker();
});
$(document).ready(function(){
$('#datepicker').on('change', function(){
var dateThis = $(this).val();
$('#dpicker_name').text(dateThis);
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"> <span id="dpicker_name"></span></p>
</body>
</html>
Try this.
$("#dpicker_name").text($( "#datepicker" ).datepicker( "getDate" ));
Get value in javascript as
var date = $(".datepicker").val();
and assigned it to the lable
i need guide on how to apply this restriction for back dates for the date picker as i am new to this javascript.
<script type="text/javascript" src="javascript/datepickr.min.js"></script>
<input class="" type="Text" size="30" name="Date" id="Date" placeholder="yyyy-mm-dd"/>
<script type="text/javascript">
new datepickr('Date',
{
'dateFormat': 'Y-m-d'
}
);
</script>
i do saw some people post about solution like this code, but i don't know how to apply in my code
$(function() {
$( "#datepicker" ).datepicker({ minDate: 0});});
i have tried this as well, still not working, and it is more worst as the date picker can't be show
<link rel="stylesheet" href="css/jquery-ui-1.9.2.css" type="text/css" />
<link rel="stylesheet" href="style/jquery-ui-1.9.2.min.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.js"></script>
<input type='text' id='datepicker'></input>
<script type="text/javascript">
$("#date").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate() });
function mdate(){
var str = "-0Y";
return str; }
</script>
Take look at this. In it I have used JQuery UI 1.9.2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
<script>
$( "#datepicker" ).datepicker({
minDate: 0
});
</script>
I am setting minDate on load. Use this code and this will work for you. Click Run Code Snippet code if you want to see the code in action.
$( "#datepicker" ).datepicker({
minDate: 0
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="datepicker" type="text" />
I am new in JQuery and I need to use datepicker to get date in form. I am using this code:
HTML
<html>
<head>
<meta charset="utf-8">
<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>
<script>
$(function() {
$( "#date" ).focus().datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
</head>
<body>
<p>Date: <input type="text" id="date"></p>
</body>
</html>
But when I click on field, nothing happen. When I tried to use this:
<html lang="en">
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker" ).datepicker();
</script>
</body>
</html>
It is working... Thanks for tips.
Additionally: I am using Nette framework, where I can inherit templates... Could this be the problem?
Just focus it after you've initialized the datepicker, otherwise the input is focused before there is a datepicker attached.
$( "#date" ).datepicker({ dateFormat: 'dd-mm-yy' }).focus();
FIDDLE
Try initializing with the option like this:
$('#date').datepicker( "option", "dateFormat", 'dd-mm-yy' ).datepicker();