出生日期字段从下拉菜单更改为日历

时间:2016-09-12 07:41:05

标签: php codeigniter date jquery-ui datepicker

我们在 codeigniter 中有一个表单构建,其中有一个出生日期字段(此字段是截至目前的下拉字段,我们可以选择更改范围(开始)我们的管理面板中此字段的日期和结束日期)。这样我们就不需要更改.php文件了。

.php文件中的出生日期代码:

<div class="row-form">
    <div class="span3">Date Of Birth<font color="#FF0000">*</font></div>
       <div class="span9">
          <?php
            // Start date
             $date = $dob_start_date;
            // End date
            $end_date = $dob_end_date;
          ?>
         <select name="dob" id="dob" required>
          <?php
             while (strtotime($date) <= strtotime($end_date)) {
          ?>
          <option value="<?=$date?>" <?php if($dob==$date){ echo "selected";}?>><?=date("d-m-Y", strtotime($date));?></option>
          <?php
            $date = date ("Y-m-d", strtotime("+1 day", strtotime($date)));
            }
           ?>
          </select>
        </div>
    <div class="clear"></div>

</div>

我们希望将此出生日期字段从下拉列表更改为日历。请帮助我们如何将此字段从下拉菜单更改为日历。

我们经常更改DOB范围。它很容易从管理面板更改DOB范围。但编辑.php文件很困难。在我们的表单中还有7个这样的字段,所有日期字段范围都可以从管理面板调整。我们不想经常编辑.php文件。

1 个答案:

答案 0 :(得分:0)

这可以使用DatePicker完成:

工作示例:https://jsfiddle.net/Twisty/527zbs4s/

<强> HTML

<div class="row-form">
  <div class="span3">Date Of Birth<font color="#FF0000">*</font></div>
  <div class="span9">
    <input name="dob" id="dob" required type="text" value="">
  </div>
  <div class="clear"></div>
</div>

<强>的jQuery

$(function() {
  $("#dob").datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: '-18y'
  });
});

一种简单的方法是使用value="<?php echo $dob_start_date; ?>"设置值。您还可以从JS传递defaultDate日期对象(可以从PHP提供日期字符串),从今天开始的天数(2或-1),或者像'-18y'这样的字符串或'+ 1m'......还有很多方法可以改善这一点:http://api.jqueryui.com/datepicker/