Jump to content

Implementing J-Query DatePicker


justlukeyou
 Share

Recommended Posts

The jQuery datepicker just enhances an existing input field and enables the user to easily enter a valid date. So, In terms of PHP, you just process the input as if there were no datepicker at all.  The end requirement is the same: the posted input must contain a valid date regardless of datepicker presence.

 

Or are you having problems getting the datepicker itself to work? (which is Javacript and not PHP related)

Link to comment
Share on other sites

Do I need to wrap the code into an input box or do I use the existing input box?

What??

You just asked "Do I need an input box or an input box?"

 

If you can't read the PHP documentation, you won't understand jQuery's. It's not as easy as PHP's manual.

Link to comment
Share on other sites

Hi,

 

I can use the jQuery code on a page but I cant insert the selected date into a table.

 

I am struggling to see how I can add a submit button to this code. Is this designed to be used with PHP?

 

 

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/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>
Link to comment
Share on other sites

Hi,

 

Do I put this inside a form with a submit button.

 

Would I mark them startdate and endate?

 

<p>Date: <input type="text" id="datepicker" /></p>


<p>Date: <input type="text" name="startdate" id="datepicker" /></p>

<p>Date: <input type="text" name="enddate" id="datepicker" /></p>
Link to comment
Share on other sites

Actually the first "datepicker" works, do i need set a unique datepicker for each time I want to use it?

 

<p>Date: <input type="text" id="datepicker" /></p>
<p>Start: <input type="text" name="startdate" id="datepicker" /></p>
<p>End: <input type="text" name="enddate" id="datepicker" /></p>
Link to comment
Share on other sites

Brillant thanks,

 

It was actually much easier than I thought it was, however I am having problems creating two datepickers on the same page. I am trying to use datepicker and datepicker1 for the start and end date. However what configuration I try doesn't seem to work.

 

Can you advise how to use two functions on the same page?

 

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#datepicker1" ).datepicker1();
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker1();
});
</script>
Link to comment
Share on other sites

The datepicker method is invoked as datepicker() regardless of the ID or selector that you pass to it. For example:

$('#datepicker1234657').datepicker(); // good - run datepicker on html element with ID "datepicker1234567"

$('#datepicker1').datepicker1(); // BAD - there is no method called datepicker1

That should be enough to get you going. As you learn more about jQuery (and the selectors it can use), you'll find ways to specify multiple elements to act upon:

$('#datepicker, #datepicker1').datepicker(); // run datepicker on HTML elements with ID "datepicker" or "datepicker1"

$('.datepicker').datepicker(); // run datepicker on all HTML elements with a class of "datepicker"
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.