JQGrid/Ngày được chọn trong cửa sổ Thêm/Chỉnh sửa

Question

Tôi đã có thể làm việc Bộ chọn ngày thành JQGrid khi chỉnh sửa nội tuyến, nhưng tôi không thể sử dụng nó trong cửa sổ thêm/chỉnh sửa. Có ai có hướng dẫn về làm thế nào để làm điều này hoặc một ví dụ tôi có thể nhìn vào?

demo từ trang web về những gì tôi đang cố gắng để làm: http://www.the-di-lab.com/demo/apples

tôi đọc mà tôi có thể sử dụng các phương pháp sau đây nhưng không chắc chắn làm thế nào để tích hợp nó:

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

Answer 1

Dường như họ sử dụng 'afterShowForm' để đính kèm bộ chọn ngày/màu vào div.
(xem mã nguồn)

 
jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true}, 
        {width:400,height:400,closeAfterEdit:true, 
      afterShowForm:function(){ $("#jsrs").load("/demo/apples/jsrs"); }, 
      onclickSubmit:function() { $("#jsrs").empty(); } 
}, 

(xem mã nguồn)

 
http://www.the-di-lab.com/demo/apples/jsrs 

//Js for colorPicker 
$('#color').ColorPicker({ 
    onSubmit: function(hsb, hex, rgb) { 
     $('#color').val("#"+hex); 
    }, 
    onBeforeShow: function() { 
     $(this).ColorPickerSetColor(this.value); 
    } 
}).bind('keyup', function(){ 
    $(this).ColorPickerSetColor(this.value); 
}); 


//Js for datePicker 
$('#date').DatePicker({ 
    format:'Y-m-d', 
    date: $('#date').val(), 
    current: $('#date').val(), 
    starts: 1, 
    position: 'bottom', 
    onBeforeShow: function(){ 
     $('#date').DatePickerSetDate($('#date').val(), true); 
    }, 
    onChange: function(formated, dates){ 
     $('#date').val(formated); 
    } 
    }); 

Cảm ơn cho việc tìm kiếm ví dụ này, tôi đang tìm kiếm cách để làm điều này là tốt.

Answer 2

Thêm datepicker là một nhiệm vụ dễ dàng:

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

Trong couse, thay vì .datepicker bạn có thể sử dụng bất kỳ plugin như ColorPicker hoặc autocomplete.

Answer 3

Sử dụng mã này để thêm datepicker để tạo/chỉnh sửa thoại:

.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") 
        } 
       }, 
       ...