javascript - datepicker:显示数据库中的值但允许用户更改；页面上有多个 datepicker()

Question

我是 jquery 和 javascript 的菜鸟。因此，虽然我看过很多解决我的问题的 SO 帖子，但我无法将各种解决方案“组装”成适合我的东西。

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

一个要求:日期以 ISO ('yyyy-mm-dd') 格式存储在数据库中。表单中显示的日期(通过 php 格式化)是“M d y”。日期选择器也应该使用“M d y”格式进行显示(似乎也有效)，但以 ISO 格式“发布”修订后的日期.

我已经在下面发布了我的代码 here (jsfiddle)

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

和 JavaScript:

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

    }
}

我需要帮助的部分是:a) 在编辑/可编辑之前获取在字段中显示的默认日期b) 让日期选择器打开到该字段显示的默认日期c) 让 datepicker 将新值设置为 $_post 数据中包含的字段(当前尝试使用隐藏输入字段)。

任何帮助都将不胜感激!

Answer 1

经过几个小时的迭代，我解决了自己的问题。这是我想到的:

HTML(使用 PHP 作为值)...

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

还有 JavaScript:

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';
        }
    }

以下是这三个问题的逐一解释。当我将日期选择器函数插入“切换编辑”函数中时，关键的突破出现了。

(a) 默认日期(即数据库值)显示为 从数据库分配日期值(使用 php Date() 函数与日期选择器的格式完全相同 dateFormat 值...在本例中为 'M d y') 到值字段 日期选择器输入控件。(b) 当控件启用编辑时， date_pickr 类已添加到控件中。随着值(value) 控件设置为正确的值和格式，日期选择器 当字段接收到时自动显示正确的日历 重点。(c) $_POST 值(用于写回数据库)设置在 隐藏输入控件。首先控件接收数据库 值(value)。如果该值被编辑，则“onSelect:”选项函数 被触发，其中包含日期选择器的 id(即 recordID 对于该行，来自数据库)被附加到隐藏的 ID 具有正确格式的日期值的字段。

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

瞧!任务已完成，但始终愿意接受建议/改进。