justlukeyou Posted April 10, 2013 Share Posted April 10, 2013 Hi, I am looking to implement a date picker to allow users to select a start and date. I have been recommended to use the jquery date picker however I am struggling to see how I implement into PHP. Do I need to wrap the code into an input box or do I use the existing input box? http://jqueryui.com/datepicker/#multiple-calendars Quote Link to comment Share on other sites More sharing options...
codebyren Posted April 10, 2013 Share Posted April 10, 2013 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) Quote Link to comment Share on other sites More sharing options...
Jessica Posted April 10, 2013 Share Posted April 10, 2013 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. Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 10, 2013 Author Share Posted April 10, 2013 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> Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 10, 2013 Author Share Posted April 10, 2013 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> Quote Link to comment Share on other sites More sharing options...
codebyren Posted April 10, 2013 Share Posted April 10, 2013 Just think of the datepicker field as an ordinary input. It still needs to be thrown into a <form> and submitted to the server as normal if you want to do anything with its value. Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 10, 2013 Author Share Posted April 10, 2013 (edited) I tried this but the datepicker doesn't appear. <p>Date: <input type="text" name="startdate" id="datepicker" /></p> <p>Date: <input type="text" name="enddate" id="datepicker" /></p> Edited April 10, 2013 by justlukeyou Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 10, 2013 Author Share Posted April 10, 2013 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> Quote Link to comment Share on other sites More sharing options...
codebyren Posted April 10, 2013 Share Posted April 10, 2013 (edited) Yes, an id on an element must be unique. You would be better off adding a 'datepicker' class to the inputs and then using that as the selector in jQuery. $('.datepicker').datepicker(); Edited April 10, 2013 by behicthebuilder Quote Link to comment Share on other sites More sharing options...
justlukeyou Posted April 11, 2013 Author Share Posted April 11, 2013 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> Quote Link to comment Share on other sites More sharing options...
codebyren Posted April 13, 2013 Share Posted April 13, 2013 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" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.