jquery datepicker - 根据数据库中的开始日期记录禁用结束日期值

时间:2015-12-07 01:59:19

标签: php jquery html

我的代码:

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script>
<script type="text/javascript">
$(function(){
     $("#datepicker2").datepicker({
         dateFormat: 'dd-mm-yy',
         onSelect: function(selected){
             $("#datepicker3").datepicker("option","minDate",selected);
         }
     });

     $("#datepicker3").datepicker({
         dateFormat: 'dd-mm-yy',
         onSelect: function(selected){
             $("#datepikcer2").datepicker("option","maxDate",selected);
         }
     });
});
</script>
<style>
.ui-datepicker{
    font-size: 9.5pt;
}

.ui-widget-header{
    font-size: 12px;
    color: #102132;
    background: #D7E5F2;
}

#ui-datepicker-div .ui-state-highlight{
    background: yellow;
    color: red;
    font-weight: bold;
}

.ui-datepicker-current-day .ui-state-active{
    background: white;
    color: blue;
    font-weight: bold;
}
</style>
</head>

<body>
<?php
//db configuration

$q = "select * from company";
$r = mysqli_query($dbc, $q);
$row = mysqli_fetch_array($r, MYSQLI_ASSOC);
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr>
    <td>Start Date : </td>
    <td><input type="text" name="startdate" id="datepicker2" value="<?php if($row['start_date'] == NULL) echo ''; else echo date('d-m-Y', strtotime($row['start_date'])); ?>" /></td>
</tr>

<tr>
    <td>End Date : </td>
    <td><input type="text" name="enddate" id="datepicker3" value="<?php if($row['end_date'] == NULL) echo ''; else echo date('d-m-Y', strtotime($row['end_date'])); ?>"/></td>
</tr>
</table>
</form>
</body>
</html>

我们说我有以下来自数据库的记录:
- 开始日期:03-12-2015
- 结束日期:NULL

现在我想确保结束日期大于开始日期 我的问题是如何在03-12-2015之前禁用结束日期值?
有人可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

试试这个。

<script>
$(function(){
     var searchMinDate = "m";

     $("#sdate").datepicker({
            dateFormat: "dd-mm-yy",
            minDate: searchMinDate,

            onClose: function (selectedDate) {
                $("#sdate").datepicker('setDate', selectedDate);
                $("#edate").datepicker( "option", "minDate", selectedDate );
            }
        });

        $("#edate").datepicker({
            dateFormat: "dd-mm-yy",

            onClose: function (selectedDate) {
                $("#edate").datepicker('setDate', selectedDate);
            }
        });
});
</script>

Jsfiddle Example