Christopher Bergin Posted January 8, 2013 Share Posted January 8, 2013 Am I approaching this correctly? I'm trying to produce a datepicker widget but it's not working. Here is the code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <h1>This is a JQuery test of it's plug-ins</h1> <a href='' id= 'dateInput'><p id= 'pickOne'>Please select a date</p></a> <script src= 'utilities/jquery-1.8.3.js'></script> <script src= 'utilities/jquery-ui-1.9.2.custom.min.js'></script> <script src= 'utilities/jquery.ui.datepicker.js'></script> <script type= 'text/javascript'>$('#dateInput').onclick(function(){$('#pickOne').datepicker();})</script> </body> </html> Link to comment Share on other sites More sharing options...
HartleySan Posted January 8, 2013 Share Posted January 8, 2013 Is this enough? http://jqueryui.com/datepicker/ Link to comment Share on other sites More sharing options...
benjamin.morgan Posted January 8, 2013 Share Posted January 8, 2013 jQuery (don't forget the document.ready function. <script type= 'text/javascript'> $(document).ready(function() { $('#datepicker').datepicker(); }); </script> HTML Date: <input type="text" id="datepicker" value="Please select a date!"> Link to comment Share on other sites More sharing options...
HartleySan Posted January 8, 2013 Share Posted January 8, 2013 The ready method is not required, but yes, it doesn't hurt to use it in this case. Link to comment Share on other sites More sharing options...
benjamin.morgan Posted January 8, 2013 Share Posted January 8, 2013 I like to be safe than sorry, there has been plenty of times when I forgot that little function and couldn't get the script to work.. Even when I tested it it wouldn't work without the ready function. @Christoper, don't forget you can shorten the ready function to this if you like. $(function() { }); Basically the point of the post was to have an input element not a paragraph element. Link to comment Share on other sites More sharing options...
HartleySan Posted January 8, 2013 Share Posted January 8, 2013 I rarely use jQuery, so I'm not sure why your scripts sometimes don't work without the ready method, but no script should ever be dependent on the ready method. The only thing the ready method really gives you is the ability to set up event handlers slightly sooner than you'd be able to with the standard onload event handler. If anything, using the ready method could cause issues that otherwise wouldn't be present. Link to comment Share on other sites More sharing options...
Christopher Bergin Posted January 8, 2013 Author Share Posted January 8, 2013 well, I was able to go to the site and copy the code. The syntax was pretty much correct, the problem was the input type I was using. After some testing using different input methods and inline JS events, it seems the widget only responds to input type of text. Link to comment Share on other sites More sharing options...
benjamin.morgan Posted January 8, 2013 Share Posted January 8, 2013 Which you can set a preset text before they enter a date as the value of the input. <!-- Will change when they click a date --> Date: <input type="text" id="datepicker" value="Please select a date!"> Link to comment Share on other sites More sharing options...
HartleySan Posted January 8, 2013 Share Posted January 8, 2013 Christopher, I suppose it makes sense that the date picker can only be attached to a text input. With that said, I imagine that the date picker library could be easily edited to allow you to attach the onclick event handler to other kinds of elements. Link to comment Share on other sites More sharing options...
Recommended Posts