ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mscodigno on October 11, 2021, 12:41:24 pm

Title: Bootstrap datepicker
Post by: mscodigno on October 11, 2021, 12:41:24 pm

Hello, I want to use bootstrap datepicker in the date field, but when I select the date, it does not write it to the cell.
I used this example;
https://paramquery.com/pro/demos77/editing_custom

Title: Re: Bootstrap datepicker
Post by: mscodigno on October 11, 2021, 12:53:10 pm

https://jsfiddle.net/qczwnf32/

Title: Re: Bootstrap datepicker
Post by: paramvir on October 11, 2021, 05:41:00 pm

There is inbuilt support for jQueryUI datepicker but not for bootstrap datepicker.

It requires a workaround by adding editModel.onBlur: "" to pgrid options to make bootstrap datepicker work with pqgrid.

https://jsfiddle.net/c92t165v/

Title: Re: Bootstrap datepicker
Post by: mscodigno on October 11, 2021, 09:14:49 pm

Thanks for your answer but after selecting the date the editor doesn't close. I did onBlur: "save" and still didn't work.

Title: Re: Bootstrap datepicker
Post by: paramvir on October 12, 2021, 04:04:18 pm

Please check this: https://jsfiddle.net/Lv2ybnz5/1/

Points to note:
1. Keep data in mm/dd/yy format i.e., deliveryDate:"12/26/2020"

2. use dateEditor function for bootstrap.

Code: [Select]

function dateEditor(ui) {

  var $inp = ui.$cell.find("input"),
      grid = this,
      format = ui.column.format,
      val = $.datepicker.formatDate(format, new Date($inp.val()));
  //initialize the editor
  $inp
    //.attr('readonly', 'readonly')
    .val(val)
    .datepicker({
      format: 'dd/mm/yyyy', //bootstrap format is different from jQueryUI date format.
      autoclose: true
    });
}

3. use editor.getData callback to convert date to "mm/dd/yy" format:

Code: [Select]

getData: function (ui) {
   //convert from column format to native js date format "mm/dd/yy"
   var dt = $.datepicker.parseDate(ui.column.format, ui.$cell.find("input").val());
   return $.datepicker.formatDate("mm/dd/yy", dt);
}

4. use editorBlur to support bootstrap datepicker and close editor upon selection of date.

Code: [Select]

editorBlur: function(evt, ui){   
  var grid = this;
  if( $(".datepicker").is(":visible")){
  setTimeout(function(){       
      if( !$(".datepicker").is(":visible")){     
            grid.saveEditCell();
            ui.$editor.blur();
     
         }
        },100)
  return false;
  }     
},