JQGrid / 添加/编辑窗口中选择的日期答案

【问题标题】：JQGrid / Date Picked within Add/Edit windowJQGrid / 添加/编辑窗口中选择的日期
【发布时间】：2009-08-07 18:31:51
【问题描述】：

在编辑内联时，我已经能够将日期选择器工作到 JQGrid 中，但我无法在添加/编辑窗口中使用它。有没有人有关于如何执行此操作的说明或我可以查看的示例？

我正在尝试做的那个网站的演示：http://www.the-di-lab.com/demo/apples

我读到我可以使用以下方法，但不确定如何集成它：

dataInit : function (elem) {
$(elem).datepicker();
}

【问题讨论】：

主要是为datepicker设置z-index。见[这个][1]。 [1]：stackoverflow.com/questions/715677/…

标签： javascript jquery jqgrid datepicker jqmodal

【解决方案1】：

添加日期选择器很容易：

colModel: [
  ... other column definitions ...
  {
    name:'my_date', index:'my_date', label: 'Date', width: 80,
    editable: true, edittype: 'text',
    editoptions: {
      size: 10, maxlengh: 10,
      dataInit: function(element) {
        $(element).datepicker({dateFormat: 'yy.mm.dd'})
      }
    }
  },
  ... other column definitions ...
]

当然，除了.datepicker，您还可以使用任何插件，例如颜色选择器或自动完成功能。

【讨论】：

-1，您那里有几个错误...修复错误后该代码似乎甚至无法正常工作
+1，感谢您指出editoptions.dataInit；这是让我的内联编辑工作所缺少的部分。
它对我说“未捕获的类型错误：未定义不是函数”...你猜我错过了什么吗？

【解决方案2】：

看起来他们正在使用“afterShowForm”将日期/颜色选择器附加到 div。
（查看源代码）

jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true}, {宽度：400，高度：400，closeAfterEdit：真， afterShowForm:function(){ $("#jsrs").load("/demo/apples/jsrs"); }, onclickSubmit:function() { $("#jsrs").empty(); } },

（查看源代码）

http://www.the-di-lab.com/demo/apples/jsrs //颜色选择器的Js $('#color').ColorPicker({ onSubmit：函数（hsb，十六进制，RGB）{ $('#color').val("#"+hex); }, onBeforeShow：函数（）{ $(this).ColorPickerSetColor(this.value); } }).bind('keyup', function(){ $(this).ColorPickerSetColor(this.value); }); //日期选择器的Js $('#date').DatePicker({ 格式：'Y-m-d', 日期：$('#date').val(), 当前：$('#date').val(), 开始：1，位置：'底部'， onBeforeShow：函数（）{ $('#date').DatePickerSetDate($('#date').val(), true); }, onChange：函数（格式化，日期）{ $('#date').val(格式化); } });

感谢您找到此示例，我也在寻找如何执行此操作。

【讨论】：

谢谢，它正在慢慢融合在一起，当窗口打开时会触发jsrs代码但我只是得到“$（”#appointment“）。DatePicker不是一个函数”（我将#date 的实例更改为#appointment，因为这是所需字段的ID）所有需要的脚本/ ui 都在那里让它在弹出窗口之外工作，我需要做些什么我可能会丢失吗？谢谢！！
哦，我只需要“datepicker”而不是“DatePicker”，谢谢！

【解决方案3】：

使用此代码添加日期选择器以创建/编辑对话框：

.navGrid('#yourID',
                { edit: true, add: true, del: true, search: true }, //options
                {
                    ...  
                    onInitializeForm: function() {
                       $('#yourDate').datepicker(); 
                     },
                    onClose: function() {
                       //if you close dialog when the datepicker is shown
                       $('.hasDatepicker').datepicker("hide")
                    }
                },
                ...

【讨论】：