jasonc Posted May 25, 2010 Share Posted May 25, 2010 I have an events form with date fields filled out manually, and wish to convert to pop up calendars. i have a pop calander script but it is updating all the fileld with the same date! as the call to the script is the same. i am open to new ideas on this so i can have say 5 calendar icons for dates to be set in the date-text field when a date is selected in the popup. and then have the option to click more dates to open up more fields. my fields are: event title description date start time end time when the form is submitted it then reads all info and adds to the MySQL database with the same field names and in the form. has anyone do something like that can help me out? Quote Link to comment Share on other sites More sharing options...
bulrush Posted May 25, 2010 Share Posted May 25, 2010 I just learned how to do this yesterday. Here's my code which uses the publicly available Jquery calendar control. In the <head> section of your html doc put this: <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> //Javascript Comment $(document).ready(function() { $("#txtStartdate").datepicker(); //$("#txtStartdate").datepicker( "option", "showOn", 'both' ); $("#txtStartdate").datepicker( "option", "minDate", new Date(2009, 1-1, 1) ); $("#txtStartdate").datepicker( "option", "maxDate", new Date(2010, 5-1, 31) ); $("#txtEnddate").datepicker(); //$("#txtEnddate").datepicker( "option", "showOn", 'both' ); $("#txtEnddate").datepicker( "option", "minDate", new Date(2009, 1-1, 1) ); $("#txtEnddate").datepicker( "option", "maxDate", new Date(2010, 5-1, 31) ); }); </script> In the body of the document call out the date pickers like this: <form action="<?php echo 'editmileage.php?'.SID; ?>" method="post"> <table> <tr><td><label for="txtStartdate">Enter Start Date</label> <td><input type="text" name="txtStartdate" id="txtStartdate" required /> <div type="text" id="datepicker"></div> <tr><td><label>Enter End Date</label> <td><input type="text" name="txtEnddate" id="txtEnddate" required /> <div type="text" id="datepicker"></div> </table> <p> <p>Commands: <input type="submit" name="submit" value="Edit" /> </form> Note the following: The date picker code in the <head> area links to the id attribute of the <input> box, not the name attribute. I set the minDate and maxDate for each control, just to test those properties. By default, the calendar drops down when the user enters the text box, it is not "show always". Your page links to the control online, so if the ajax.googleapis.com site is down, you are SOL (out of luck). Your calendar won't work. You do not need to validate dates picked via the control because the control only shows valid dates within the range minDate to maxDate. But you will need to validate if the user types in a date manually. Quote Link to comment Share on other sites More sharing options...
jasonc Posted May 25, 2010 Author Share Posted May 25, 2010 i have check this out and woried that i start this and the server goes off so tried to grab the CSS and JS files but for some reason i can not get the JS files to work once i copy to my server! whats with that. can anyone suggest a way to get these JS files as i have tried a few ways and still i can not get them. i get errors that a ) is missing on line 55 of one of the JS files 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.