0

i'm trying to make a web interface where the admin enters the customer information and stores it in the database but i want the calendar to pop out when i click on the date field

this is how my 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 the 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('','','');
 }
?>
4

1 回答 1

0

您需要为每个日期输入字段添加一个 id，例如id="start-date"，id="end-date"然后使用 jQuery UI 将日期选择器绑定到输入字段。下面的例子...

<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>

datepicker api 中有更多可用选项，但请参阅文档

于 2013-04-08T22:24:31.323 回答