Messages

1

ParamQuery Pro Evaluation Support / ParamQuery custom editor & bootstrap datepicker

« on: February 01, 2016, 11:24:54 pm »

Hi,
I'm trying to get custom editor work with bootstrap datepicker (https://bootstrap-datepicker.readthedocs.org/en/latest/index.html)
Som obstacles had to bypass:
1) First thing first: JSON data for date type are long representing milliseconds - resolved by using a date renderer such as:
function dateRenderer(ui) {
   return formatDate(ui.cellData);
}

function formatDate(val) {
   if (val)
      return $.datepicker.formatDate('dd/mm/yy', new Date(parseFloat(val)));
   else
      return "";
}

2) Human date format for me must be dd/MM/yyyy and not the default one.
3) Not resolved yet - the datepicker to be used must be bootstrap-datepicker.js. Here the problem is that when i select a date from datepicker the focus for edit field will be lost along with the embedded input type dom node, so that the datepicker is unable to find the node and unable to edit the field.

There is a way to achieve what I want to obtain?
Here is the code:

   var dateEditor2 = function (ui) {
      var $cell = ui.$cell,
           rowData = ui.rowData,
           dataIndx = ui.dataIndx,
           cls = ui.cls,
           dc = formatDate($.trim(rowData[dataIndx]));
      
       $cell.css('padding', '0');
   
       var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-date-editor' />")
          .appendTo($cell)
          .val(dc)
          .inputmask("dd/mm/yyyy", {"placeholder": "gg/mm/aaaa"})
          .datepicker({
             format: "dd/mm/yyyy",
             language: "it",
             autoclose: true,
              onClose: function () {
                  $inp.focus();
              }
          });
          //.focus();
   }

   var colM = [
        { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false },
        { title: "Cod.", width: 60, dataIndx: "codiceIniziativa", dataType: "integer", editable: false },
        { title: "Titolo", width: 250, dataIndx: "titolo", maxWidth: 600},
        { title: "Descrizione", width: 350, dataIndx: "descrizione", editor: {type: 'textarea', attr: 'rows=3'}, maxWidth: 500},
       { title: "Data inizio prevista", width: 100, dataIndx: "dataInizioPrevista", render: dateRenderer, editor: {type: dateEditor2}},
       { title: "Data fine prevista", width: 100, dataIndx: "dataFinePrevista", dataType: "float", render: dateRenderer, editor: {type: 'textbox', init: dateEditor} },
       { title: "Data inizio", width: 100, dataIndx: "dataInizio", dataType: "float", render: dateRenderer, editor: {type: 'textbox', init: dateEditor}},
       { title: "Data fine", width: 100, dataIndx: "dataFine", dataType: "float", render: dateRenderer, editor: {type: 'textbox', init: dateEditor} },
       { title: "Cond. finanza", width: 40, dataIndx: "condivisaAreaFinanza", type: "checkbox", cb: {all: true, header: false, check: 'S', uncheck: null}},
       { title: "Email to", width: 200, dataIndx: "emailTo"},
       { title: "Email cc", width: 200, dataIndx: "emailCc"},
        { title: "Note", width: 350, dataIndx: "note", editor: {type: 'textarea', attr: 'rows=5'}, minWidth: 350, maxWidth: 600},
    ];

Look at dataInizioPrevista dataIndx.
Thank you very much for your effort and congratulation for this great work!
Emilio.