php - how to make the calender pop out when entering data -
i'm trying make web interface admin enters customer information , stores in database want calendar pop out when click on date field
this how insert code is
<?php function valid( $start_date, $end_date, $error) { ?> <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>insert records</title> </head> <body> <?php if ($error != '') { echo '<div style="padding:4px; border:1px solid red; color:red;">'.$error.'</div>'; } ?> <form action="" method="post"> <table border="1"> <tr> <td colspan="2"><b><font color='red'>insert records </font></b></td> </tr> <tr> <td width="179"><b><font color='#663300'>start date<em>*</em></font></b></td> <td><label> <input type="text" name="start_date" value="<?php echo $start_date; ?>" /> </label></td> </tr> <tr> <td width="179"><b><font color='#663300'>end date<em>*</em></font></b></td> <td><label> <input type="text" name="end_date" value="<?php echo $end_date; ?>" /> </label></td> </tr> <tr align="right"> <td colspan="2"><label> <input type="submit" name="submit" value="insert records"> </label></td> </tr> </table> </form> </body> </html> <?php } include'includes/connect.php'; if (isset($_post['submit'])) { $start = mysql_real_escape_string(htmlspecialchars($_post['start_date'])); $end = mysql_real_escape_string(htmlspecialchars($_post['end_date'])); if ($start== '' || $end == '' ) { $error = 'please enter details!'; valid($start_date, $end_date, $error); } else { mysql_query("insert aggrement set start_date='$start', end_date='$end'") or die(mysql_error()); header("location: viewaggrement.php"); } } else { valid('','',''); } ?>
you'll need add id each date input field, such id="start-date"
, id="end-date"
, use jquery ui bind datepicker input field. example below...
<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> <script type="text/javascript"> $(function() { $( "#start-date" ).datepicker(); $( "#end-date" ).datepicker(); }); </script>
there more options available within datepicker api, refer docs that
Comments
Post a Comment