Javascript datepicker：显示数据库中的值，但允许用户更改；第页上有多个日期选择器（）

我是一个noobwrtjquery和javascript。所以，虽然我看过很多关于我的问题的So帖子，但我无法将各种解决方案“组合”成适合我的东西

我的上下文：查询结果显示在表单中。在每行中，其中一个字段是具有现有值的日期。首次渲染时，所有字段的数据都是文本（不可编辑）。通过一个按钮，我“启用”了要编辑的字段，我想对日期字段使用jQuery datepicker。（我让这部分工作。）

一个要求：日期以ISO（'yyyy-mm-dd'）格式存储在数据库中。表单中显示的日期（通过php格式化）为'mdy'。日期选择器也应使用'mdy'格式显示（似乎也在工作），但以ISO格式“发布”修改后的日期

我已经把我的代码贴在下面了

我需要帮助的部分有： a） 在编辑/可编辑日期之前获取要在字段中显示的默认日期 b） 正在将datepicker打开为该字段显示的默认日期 c） 让datepicker将新值设置为$\u post数据中包含的字段（当前正在尝试使用隐藏的输入字段）

---

任何帮助都将不胜感激

经过几个小时的反复，我已经解决了自己的问题。以下是我的想法：

HTML（用PHP表示值）

下面是对这三个问题的解释。当我将datepicker函数插入“toggle edit”函数时，关键的突破出现了

（a） 默认日期（即数据库值）显示为 从数据库中指定日期值（使用 php Date（）函数，其格式与datepicker完全相同 将dateFormat值…在本例中为'mdy'）放入 日期选择器输入控件。 （b） 启用控件进行编辑时， 日期选择器类被添加到控件中。有价值的 控件设置为正确的值和格式，日期选择器 当字段收到时自动显示正确的日历 集中 （c） $u POST值（用于写回数据库）在 隐藏输入控件。首先，控件接收数据库 价值如果该值已编辑，则“onSelect:”选项函数 被激发，其中包含日期选择器的id（即recordID 对于行（来自数据库）将附加到隐藏对象的ID 具有正确格式的日期值的字段

注意：php日期格式与jQuery不同。要在PHP中获得yyyy-mm-dd，需要“Y-m-d”。对于jQuery，您需要'yy-mm-dd'

---

瞧！任务完成，但始终接受建议/改进

有没有理由不使用html5？datepicker小部件要求将输入类型设置为“text”。

<div class="container" id="myDiv">
    <form method="post" action="">
        <input type="hidden" id="projID" name="projID" value="fakeProjID">
        <div class="row">
            <!-- initially form is in "display-only mode" -->
            <a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
        </div>

        <!--rows dynamically generated via query
     the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
     these are fixed values for demo, but are dynamic values in reality -->
        <div class="row">

                <input type="text" name="date_pickr[]" id="date_pickr_511" class="input date_pickr disabled" data-id="511" data-dateval="2012-03-12" value="2012-03-12" disabled="true"/>
                <input type="hidden" name="fmt_date[]" id="fmt_date_511" value="2012-03-12"/>
                <input type="hidden" name="activityID[]" value="511"/>

                //more info goes here//


        </div>

        <div class="row">

                <input type="text" name="date_pickr[]" id="date_pickr_376" class="input date_pickr disabled" data-id="376" data-dateval="2013-05-19" value="2013-05-19" disabled="true"/>
                <input type="hidden" name="fmt_date[]" id="fmt_date_376" value="2013-05-19"/>
                <input type="hidden" name="activityID[]" value="376"/>

                //more fields goes here//

        </div>

        <div class="row">                       
            <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
    </form>
</div>

//datepickers
$(function() {

    $.datepicker.setDefaults({
        dateFormat: 'M d y',
        altFormat: 'yy-mm-dd'
    });

    $('.date_pickr').datepicker();

    $('.date_pickr').datepicker( 'option','altField','#fmt_date');

});

function toggle_edit(ID,projID) {
    var working_elemID = ID;
    var ItemID = projID;

    //name of modal div to enable/disable
    var group_id = 'myDiv';

    //if elem_ID = make_editable
    if (working_elemID.search('un') == -1) {

        //working code to make field editable

    } else {

        //working code to make field uneditable

    }
}

<div class="container">
    <form method="post" action="">
        <input type="hidden" id="projID" name="projID" value="<?php echo $projID; ?>">
        <div class="row">
            <!-- initially form is in "display-only mode" -->
            <a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
        </div>

        <!--rows dynamically generated via query
     the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
     these are fixed values for demo, but are dynamic values in reality -->
    <?php 
    foreach($vals as $ky=>$v) {

        $row = '
        <div class="row">

                <input type="text" name="date_pickr[]" class="input disabled" data-id="'.$vals[$ky].'" value="'.date('M d y',strtotime($dates[$ky])).'" disabled="true"/>
                <input type="hidden" name="fmtd_date[]" id="fmtd_date_'.$vals[$ky].'" value="'.date('Y-m-d',strtotime($dates[$ky])).'">
                <input type="hidden" name="activityID[]" value="'.$vals[$ky].'"/>

                //more info goes here//

        </div>';
        echo $row;
    }
    ?>


        <div class="row">                       
            <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
    </form>
</div>  

function toggle_edit(ID,projID) {
        var working_elemID = ID;
        var ItemID = projID;

        //if elem_ID = make_editable
        if (working_elemID.search('un') == -1) {

            var selector = '#'+ group_id +' .disabled';
            var fields = $(selector);
            fields.removeClass('disabled');
            fields.addClass('enabled');
            fields.removeAttr('disabled','');
            fields.addClass('date_pickr');
            $('.date_pickr').datepicker({
                dateFormat: 'M d y',
                altFormat: 'yy-mm-dd',
                firstDay: 1,
                showOtherMonths: true,
                selectOtherMonths: true,
                showOn: 'focus',
                onSelect: function() {
                    var id = $(this).data('id');

                    var currentDate = $(this).datepicker('getDate');
                    var altFormat=$(this).datepicker('option','altFormat');
                    var formatedDate = $.datepicker.formatDate(altFormat,currentDate);

                    $('#fmtd_date_'+id).val(formatedDate);
                }
            });

        } else {

            //if elem_ID == make_uneditable
            var selector = '#'+ group_id +' .enabled';
            var fields = $(selector);
            fields.removeClass('enabled');
            fields.addClass('disabled');
            fields.disabled = 'true';
        }
    }