I cant get jquery's date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here's a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here's my code that is associated with this page. When I click the text fields the datepicker doesn't show up. Why? Can anyone see the problem?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
<div id="dateField">
<p>
Start Date: <input type="TEXT"
name="start_date" id="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
name="end_date" id="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Switch your Id and name tags around. An ID attribute has to be inside of the $('ID').datepicker() , not name.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>
<div id="dateField">
<p>
Start Date: <input type="TEXT"
id="start_date" name="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
id="end_date" name="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
$("#endDate").datepicker();
});
</script>
Related
I have 2 datepickers in my web page and somehow one continue the other. I want them to work differently. Maybe its because of the object dateText but don't know how to clean it.
There are two scripts calling the same class
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
<script src="js/jquery.datepicker.extension.range.min.js"></script>
<script>
$(function() {
$('#date_range').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataF').val(extensionRange.datesText.join(','));
$('#date_range').val('DATA');
$('#datepicker').datepicker('selected','');
}
});
});
$("#date_range2").click(function(){
$('#date_range2').val(" ").datepicker({startDate: "+7d"});
});
</script>
<script>
$(function() {
$('#date_range2').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataS').val(extensionRange.datesText.join(','));
$('#date_range2').val('TILL');
}
});
});
</script>
Then I have
<input id="date_range" value="DATA:" />
<input name="dataF" id="dataF" type="text" size="50" />
<input id="date_range2" value="TILL:" />
<input name="dataS" id="dataS" type="text" size="50" />
Just try this sollution
example link http://jsfiddle.net/fMD62/
<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />
$(function() {
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
});
this is the link http://carboncreditcapital.com/calculator/
I don't understand why the page returns the json when the page loads.
It suppose to autocomplete when user types in the input field to return related airport names
I don't know which files i should edit to make jquery work properly in wordpress
<?php
?>
<meta charset="utf-8">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<div>
From
<div class="textinput">
<input type="text" id="dept" name="departure" placeholder="City name or aiport code" style="width: 120px">
</div>
</div>
<div>
To
<div>
<input type="text" id="dest" placeholder="City name or airport code" style="width: 120px">
</div>
</div>
<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>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="myScript.js"></script>
JQUERY:
jQuery(document).ready(function(){
jQuery('#dept').autocomplete({
source:'source.php',
minLength:1,
});
jQuery('#dest').autocomplete({
source:'source.php',
minLength:1,
});
});
In wordpress you need to use a different version of jquery function
to kickstart the DOC load option
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#dept').autocomplete({
source:'source.php',
minLength:1
});
});
</script>
Assume the following simple HTML:
<html>
<head><title>Test</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<href="#" id="doExport">Export Now</a>
<div id="exportPopup">
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
</body>
</html>
Now also assume that there is CSS that styles #exportPopup appropriiately and sets it to display:none initially. This brings me to two questions:
How do I make that hidden DIV (#exportPopup) show up right where the #doExport link is clicked?
How do I use the JQuery datepicker on those two input boxes?
For Question 2 I have already tried this:
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
and it just doesn't work when I click those boxes. I hope someone can enlighten me.
I have created a rough model at http://jsfiddle.net/santoshjoshi/32enE/1/
so basically used the jQuery dialog plugin you need to add following code open the dialog box
HTML Code
Export Now
<div id="exportPopup" style='display:none'>
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
JavaScript Code
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
$( "#doExport" ).click(function() {
$( "#exportPopup" ).dialog( );
});
also please have a look at jQuery dialog documentation to customize your popup/dialog
http://api.jqueryui.com/dialog/
'UPDATE'
used following resources
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css ' Theme is smoothness'
I'm working in a ASP.NET MVC 3 application, and I'm trying to use jQuery's Sortable. I already have a jQuery DatePicker working. In my View I have the following code:
<link href=#Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src=#Url.Content("~/Scripts/jquery.ui.core.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.datepicker.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>
Here is the initializer code:
<script type="text/javascript">
$(document).ready(function () {
$("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#MenuPages").sortable("enable");
});
</script>
The DatePicker work seamlessly. Here is the code:
<fieldset>
<legend>Search history</legend>
<p>
Begin: <br />
<input type="text" id="DateBegin" name="DateBegin" value="" />
<br />
End: <br />
<input type="text" id="DataEnd" name="DataEnd" value=""/>
<br />
</p>
<button>Search</button>
</fieldset>
But the Sortable does not work. The code:
<ul name="MenuPages" id="MenuPages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.
I don't know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there's also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).
Don't know where the source of the error could be.
Instead of
$("#MenuPages").sortable("enable");
try
$("#MenuPages").sortable();
to initialize the sortable.
i am trying to use a date picker, but i am not sure how to pass the selected value to my textbox. I am using
http://docs.jquery.com/UI/Datepicker
Also i am using the datetime picker used here
http://plugins.jquery.com/node/2795/release?api_version%5B%5D=59
it says the CSS is attached but i dont see it and my datetime picker is not styled, here is my code
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/ui.datetimepicker.js"> </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script>
$(document).ready(function() {
$("#datetimepicker").datepicker();
});
<body>
<div id="content" class="divContent">
<div id="mainContent" class="divMainContent" style="text-align: left;">
<p>Reservations and RSVP for logged users<p>
<div id="datetimepicker"></div>
<input type="text" name="date" />
</div>
</div>
</body>
Apply the datepicker to the input element, not the div
<input type="text" id="myDateTime" name="date"/>
Apply datepicker
$('#myDateTime').datepicker();
You don't have to pass the value to your textbox.
You're using datepicker in the wrong element, you should do this:
$("#InputTextIDHere").datepicker();
.datepicker(); should be applied on the input box, not on the div,
<input id="datepick" name="datepick" type="text />
jQuery( "#datepick" ).datepicker();