Có thể chỉnh sửa với jQuery UI Datepicker

Question

Tôi cần có phần tử nhấp để chỉnh sửa trên trang, do đó sẽ lần lượt gọi một phiên bản của jQuery UI Datepicker.

Hiện tại, tôi đang sử dụng JEditable để cung cấp chỉnh sửa tại chỗ, đang hoạt động tốt. Tuy nhiên, tôi có một đầu vào điều khiển ngày mà tôi muốn xuất hiện dưới dạng lịch, đó là nơi bắt đầu vui vẻ.

Tôi đã tìm thấy một bình luận trong này blog bởi Calle Kabo (trang là một chút nghiền không may) mà chi tiết một cách để làm điều này:

$.editable.addInputType("datepicker", { 
     element: function(settings, original) { 
      var input = $("<input type=\"text\" name=\"value\" />"); 
      $(this).append(input); 
      return(input); 
     }, 
     plugin: function(settings, original) { 
      var form = this; 
      $("input", this).filter(":text").datepicker({ 
       onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); } 
      }); 
     } 
    }); 

Tuy nhiên, tôi không thể có được ở trên để làm việc - không có lỗi, nhưng không có hiệu lực. Tôi đã thử đặt nó vào trong tài liệu sẵn sàng của jQuery và bên ngoài nó - không có niềm vui.

Lớp người dùng Datepicker của tôi là bộ chọn ngày và lớp Jeditable của tôi là ajaxedit, tôi chắc rằng sự không hoạt động trên là do cần tham chiếu chúng bằng cách nào đó trong mã, nhưng tôi không biết làm cách nào. Ngoài ra, điều khiển Jeditable là một trong nhiều id phần tử, nếu có.

Bất kỳ ý tưởng nào từ những người khác trong thông tin đều biết?

Answer 1

Tôi đã gặp vấn đề tương tự. Tìm kiếm bên trong mã nguồn của http://www.appelsiini.net/projects/jeditable/custom.html đưa tôi đến giải pháp.

Có một "jquery.jeditable.datepicker.js". Putted này trong mã của tôi thêm một chức năng mới "datepicker" (cũng trong nguồn).

Tôi không biết làm thế nào kịch bản của bạn hoạt động nhưng trong trường hợp của tôi các chức năng cần bổ sung:

id : 'elementid',

name : 'edit'

để lưu trữ dữ liệu trong cơ sở dữ liệu.

h :)

dabbeljuh

Answer 2

Tôi đã xem xét các sourcecode đề cập ở trên, nhưng nó dường như là một lỗi bit. Tôi nghĩ rằng nó có thể đã được thiết kế cho một phiên bản cũ của datepicker, và không phải là jQuery datepicker UI. Tôi đã thực hiện một số sửa đổi cho mã, và với những thay đổi, nó ít nhất dường như đang làm việc trong Firefox 3, Safari 4, Opera 9.5 và IE6 +. Vẫn có thể cần một số thử nghiệm khác trong các trình duyệt khác.

Đây là mã tôi đã sử dụng (tổ chức tại một file có tên jquery.jeditable.datepicker.js)

$.editable.addInputType('datepicker', { 
    element : function(settings, original) { 
     var input = $('<input>'); 
     if (settings.width != 'none') { input.width(settings.width); } 
     if (settings.height != 'none') { input.height(settings.height); } 
     input.attr('autocomplete','off'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     /* Workaround for missing parentNode in IE */ 
     var form = this; 
     settings.onblur = 'ignore'; 
     $(this).find('input').datepicker().bind('click', function() { 
      $(this).datepicker('show'); 
      return false; 
     }).bind('dateSelected', function(e, selectedDate, $td) { 
      $(form).submit(); 
     }); 
    } 
}); 

Ví dụ Triển khai Mã:

$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', { 
    type: 'datepicker', 
    tooltip: 'Double-click to edit...', 
    event: 'dblclick', 
    submit: 'OK', 
    cancel: 'Cancel', 
    width: '100px' 
}); 

Answer 3

Đây là giải pháp của tôi. Tôi sử dụng định dạng ngày tùy chỉnh và ngày đóng ngày, tôi đặt lại biểu mẫu nhập và áp dụng cssdecoration (cải tiến có thể chỉnh sửa của tôi). Làm việc với jQuery UI 1.5.2

$.editable.addInputType('datepicker', { 
element : function(settings, original) { 
    var input = $('<input>'); 
    if (settings.width != 'none') { input.width(settings.width); } 
    if (settings.height != 'none') { input.height(settings.height); } 
    input.attr('autocomplete','off'); 
    $(this).append(input); 
    return(input); 
}, 
plugin : function(settings, original) { 
    /* Workaround for missing parentNode in IE */ 
    var form = this; 
    settings.onblur = 'ignore'; 
    $(this).find('input').datepicker({ 
     firstDay: 1, 
     dateFormat: 'dd/mm/yy', 
     closeText: 'X', 
     onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }, 
     onClose: function(dateText) { 
      original.reset.apply(form, [settings, original]); 
      $(original).addClass(settings.cssdecoration); 
      }, 
    }); 
}}); 

Answer 4

Đây là giải pháp của tôi, nhưng không phải là loại đầu vào có thể chỉnh sửa hoàn chỉnh.

$.editable.addInputType('date', { 
    element : function(settings, original) { 
     var input = $('<input type="text" readonly="readonly" name="value" size="10 />'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     var form = this; 
     settings.onblur = 'cancel'; 
     $(this).find('input').datepicker({ 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }, 
      onClose: function(dateText) { $(this).hide(); $(form).trigger("submit");} 
     });    
    }, 
    submit : function(settings, original) { }, 
    reset : function(settings, original) { } 
}); 

Answer 5

Plugin jeditable-datepicker dường như thực hiện chính xác những gì bạn cần.

Nó cho phép jQuery UI Datepicker trong Jeditable. Đây là số demo.