datepicker:显示数据库中的值，但允许用户更改;页面上有多个日期选择器()

Question

我是一个noob-wrt-jquery和javascript。因此，虽然我看了很多So帖子来处理我的一部分问题，但我无法将各种解决方案"组合"成适合我的东西。

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

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

我已经在下面发布了我的代码这里(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) 使datepicker打开到该字段显示的默认日期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) 当控件被启用用于编辑时，datepicker类被添加到控件中。的值控件设置为正确的值和格式，即日期选择器当字段收到时自动显示正确的日历集中(c) $_POST值(用于写回数据库)设置在隐藏输入控件。控件首先接收数据库价值如果对值进行了编辑，则"onSelect:"选项函数被激发，其中包含日期选择器的id(即记录id对于行，来自数据库)附加到隐藏的ID具有正确格式的日期值的字段。

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

哇！任务已完成，但随时接受建议/改进。