bulrush Posted May 24, 2010 Share Posted May 24, 2010 I noticed there is an <INPUT> type of 'date'. Is this a date picker? If not, how do I implement a date picker? Do I have to get into some Javascript? Are there any free date picker controls out there? References and examples seem to be few and far between. Thanks. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 24, 2010 Share Posted May 24, 2010 http://jqueryui.com/ has a great one. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 24, 2010 Author Share Posted May 24, 2010 Please be patient, I am new to Javascript. I'm having trouble getting the Jquery date picker to work. Here is a link to the page: http://www.ignitionworkshop.com/toolbox/training/mileage/zztest.php I got my information from here: http://docs.jquery.com/UI/Datepicker First, I wanted the date picker to drop down only when the field has focus. Next, when the user picks a date, I want the date copied to the input field called "txtEnddate". Here is my html code. I tried to simplify it. The date picker appears, but when I click it, the date is not copied to txtEnddate. Also, the date picker does not drop down, it is always on the screen. <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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" /> <title>Test Form</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker(); }); $( ".selector" ).datepicker( "option", "altField", 'txtEnddate' ); $( ".selector" ).datepicker( "option", "showOn", 'both' ); </script> </head> <body> <h2>Test Input Date/Time pickers, v.10a</h2> <!-- comment --> <form action="<?php echo $_SERVER['PHP_SELF'].'?'.SID; ?>" method="post"> <table> <tr><td valign="top">Date picker <td><input type="text" name="txtEnddate" id="txtEnddate" /> <div type="text" id="datepicker"></div> </table> <p> <p>Commands: <input type="submit" name="submit" value="Save" /> </form> <noscript> <h3>You must have Javascript enabled in order to use this application. Please enabled Javascript for your browser. </h3> </noscript> </body> </html> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 24, 2010 Share Posted May 24, 2010 In this line: $("#datepicker").datepicker(); "datepicker" needs to be the ID of the text field that you are trying to apply the datepicker to. So it should be "txtEnddate." Also, these two lines: $( ".selector" ).datepicker( "option", "altField", 'txtEnddate' ); $( ".selector" ).datepicker( "option", "showOn", 'both' ); need to be inside the document.ready function, and they need to reference the ID of the datepicker field. Try this instead: $(document).ready(function() { $("#txtEnddate").datepicker(); $( "#txtEnddate" ).datepicker( "option", "altField", 'txtEnddate' ); $( "#txtEnddate" ).datepicker( "option", "showOn", 'both' ); }); Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 24, 2010 Author Share Posted May 24, 2010 I forgot to mention I'm using Firefox 3.6 and Javascript is enabled. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 24, 2010 Author Share Posted May 24, 2010 Well, that worked! Thank you. Since txtEnddate is now tied to the date picker, I really don't need this option, do I? $( "#txtEnddate" ).datepicker( "option", "altField", 'txtEnddate' ); Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 24, 2010 Share Posted May 24, 2010 Nope. You don't actually need any options, as they are options. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 24, 2010 Author Share Posted May 24, 2010 Ok, so I made some changes and the basic date picker worked. Now I want to restrict dates the user can enter. They can only enter dates in the past, up to today's date. So I set my minDate and maxDate like below. <head> <script> $(document).ready(function() { $("#txtEnddate").datepicker(); $("#txtEnddate").datepicker( "option", "showOn", 'both' ); $("#txtEnddate").datepicker({minDate: '01/01/2009'}); $("#txtEnddate").datepicker({maxDate: '06/01/2010'}); }); </script> </head> However the date picker still lets me pick dates after 6/1/2010. What am I doing wrong? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 24, 2010 Share Posted May 24, 2010 Those min/max dates need to be JavaScript dates, not strings. Go to http://docs.jquery.com/UI/Datepicker#option-dateFormat and click on "formatDate." Also, you can add all those options together and put them into the first datepicker() call. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 24, 2010 Author Share Posted May 24, 2010 The docs here say the dates can be a string: http://keith-wood.name/datepickRef.html Unless different versions of the Jquery datepicker work differently. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 24, 2010 Share Posted May 24, 2010 Hmm. I would trust jQuery's own documentation first. Maybe you're right about the version, but everything says you can use a JS date, so just do that. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 25, 2010 Author Share Posted May 25, 2010 I took your advice and the date picker limited dates like it should. Thanks for your help. I admit I am quite new at this online programming. It's like learning 5 new languages just to get the job done: HTML, SQL, PHP, Javascript and CSS. Usually I only have to learn 1 new language at a time. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted May 25, 2010 Share Posted May 25, 2010 Have you looked at http://www.w3schools.com/? They're a great resource. That site will help you learn, but also is a great reference. I've been doing this for years, and I still hit their site daily. Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 25, 2010 Author Share Posted May 25, 2010 Yes, that's one of my main references, along with php.net. Both had no examples about dates. They just list the types of text boxes are availabled. I thought <input type="date"> would do something, but it didn't do anything. Their examples are pretty sparse. Even for common business cases (validating input, etc.) And their tutorials are extremely basic. 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.