Author Topic: Date format like dd.mm.yyyy  (Read 208 times)

arbyter

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 40
    • View Profile
Date format like dd.mm.yyyy
« on: March 08, 2022, 03:08:01 pm »
hi Paramvir
i am stuck with this issue. I want to display and edit the date in Swiss Format like dd.mm.yyyy
I tried to alter your demo project i found under  "Inline-Editing"-"Editor and Validations" in the Pro-Demo section; here my altered code, but data-validation still claims: "not in date format"
have a look at lines 51,161,266

code:
$(function () {
   
        var books = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        function autoCompleteEditor( source ) {
            return function (ui) {
                ui.$cell.addClass('ui-front');//so that dropdown remains with input.           

                //initialize the editor
                ui.$editor.autocomplete({
                    //appendTo: ui.$cell, //for grid in maximized state.
                    source: source,
                    position: {
                        collision: 'flipfit',
                        within: ui.$editor.closest(".pq-grid")
                    },
                    selectItem: { on: true }, //custom option
                    highlightText: { on: true }, //custom option
                    minLength: 0
                }).focus(function () {
                    //open the autocomplete upon focus               
                    $(this).autocomplete("search", "");
                });
            }
        }
        function dateEditor(ui) {
            var $inp = ui.$cell.find("input"),
                grid = this,
            format = ui.column.format || "dd.mm.yy",
            val = $.datepicker.formatDate(format, new Date($inp.val()));

            //initialize the editor
            $inp
            .attr('readonly', 'readonly')
         .val(val)
            .datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: format,
                showAnim: '',
                onSelect: function () {
                    this.firstOpen = true;
                },
                beforeShow: function (input, inst) {
                    setTimeout(function () {
                        //to fix the issue of datepicker z-index when grid is in maximized state.
                        $('.ui-datepicker').css('z-index', 999999999999);
                    });
                    return !this.firstOpen;
                },
                onClose: function () {
                    this.focus();
                }
            });
        }
        var colM = [
            {
                title: "Ship Country", dataIndx: "ShipCountry", width: 120,
                cls: 'pq-dropdown pq-side-icon',
                editor: {
                    type: "textbox",
                    init: autoCompleteEditor( "/pro/demos/getCountries" )
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {
                            var value = ui.value,
                                _found = false;
                            //remote validation
                            //debugger;
                            $.ajax({
                                url: "/pro/demos/checkCountry",
                                data: { 'country': value },
                                async: false,
                                success: function (response) {
                                    if (response == "true") {
                                        _found = true;
                                    }
                                }
                            });
                            if (!_found) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }
                    }
                ]
            },
            {
                title: "Books", dataIndx: "books", width: 90,
                cls: 'pq-dropdown pq-side-icon',
                editor: {
                    type: "textbox",
                    init: autoCompleteEditor( books )
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {
                            var value = ui.value;
                            if ( books.indexOf( value ) == -1) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }, icon: 'ui-icon-info'
                    }
                ]
            },
            {
                title: "Fruits", dataIndx: "fruits", width: 140,
                //custom editor.
                editor: {
                    options: ['Apple', 'Orange', 'Kiwi', 'Guava', 'Grapes'],
                    type: function (ui) {
                        //debugger;
                        var options = ui.column.editor.options,
                            str = options.map(function (option) {
                                var checked = (option == ui.cellData)? 'checked = checked': '';
                                return "<input type='radio' " + checked + " name='" + ui.dataIndx + "' style='margin-left:5px;' value='" + option + "'>  " + option;
                            }).join("");

                        ui.$cell.append("<div class='pq-editor-focus' tabindex='0' style='padding:5px;margin-top:1px;'>" + str + "</div>");
                    },
                    getData: function (ui) {
                        return ui.$cell.find('input:checked').val();
                    }
                }
            },
            {
                title: "Order ID", width: 100, dataIndx: "OrderID",
                editor: {
                    type: "textbox",
                    //make it html5 number editor.
                    attr: "type='number'"
                }
            },
          {
              title: "Order Date", width: "120", dataIndx: "OrderDate", dataType: 'string', format: 'dd.mm.yy',
              cls: 'pq-calendar pq-side-icon',
              editor: {
                  type: 'textbox',
                  init: dateEditor,
                  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("dd.mn.yy", dt);
                  }
              },
              validations: [
                    { type: 'regexp', value: '^[0-9]{2}.[0-9]{2}.[0-9]{4}$', msg: 'Not in date format' }
              ]
          },
            { dataIndx: 'ShipViaId', hidden: true }, //hidden column to store ShipVia Id.
          {
              title: "Shipping Via", dataIndx: "ShipVia", width: 110,
              cls: 'pq-dropdown pq-side-icon',
              editor: {
                  type: 'select',
                  init: function (ui) {
                      ui.$cell.find("select").pqSelect();
                      setTimeout(function () {
                          ui.$cell.find("select").pqSelect('open');
                      })
                  },
                  valueIndx: "value",
                  labelIndx: "text",
                  mapIndices: { "text": "ShipVia", "value": "ShipViaId" },
                  options: [
                        { "value": "", "text": "" },
                        { "value": "SE", "text": "Speedy Express" },
                        { "value": "UP", "text": "United Package" },
                        { "value": "FS", "text": "Federal Shipping" }
                  ]
              },
              validations: [{ type: 'minLen', value: 1, msg: "Required" }]
          },
         //another column with select editor having options in key: value pairs format.
          {
              title: "Shipping Via2", dataIndx: "ShipVia2", width: 110,
              cls: 'pq-dropdown pq-side-icon',
              editor: {
                  type: 'select',
                  init: function (ui) {
                      ui.$cell.find("select").pqSelect();
                      setTimeout(function () {
                          ui.$cell.find("select").pqSelect('open');
                      })
                  },
                  options: [                       
                        { "SE": "Speedy Express" },
                        { "UP": "United Package" },
                        { "FS": "Federal Shipping" }
                  ]
              },
              //render required to display options text corresponding to value stored in the cell.
              render: function (ui) {                 
                  var option = ui.column.editor.options.find(function (obj) {
                      return (obj[ui.cellData] != null);
                  });
                  return option ? option[ui.cellData] : "";
                },
                validations: [
                    { type: 'minLen', value: 1, msg: "Required" },
                    {
                        type: function (ui) {                           
                            var value = ui.value, option = ui.column.editor.options.find(function (obj) {
                                return (obj[value] != null);
                            });
                            if (!option) {
                                ui.msg = value + " not found in list";
                                return false;
                            }
                        }, icon: 'ui-icon-info'
                    }
                ]
          },
            {
                title: "Freight", dataIndx: "Freight", dataType: "float", width: 100, format: '$#,###.00',
                editor: { select: true },
                validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }],
                editModel: { keyUpDown: true }
            },
            {
                title: "Shipping Address", width: 200, dataIndx: "ShipAddress",
                editor: {
                    type: "textarea"
                },
                editModel: {
                    saveKey: '' //disable or set it to some other key code to free up use of Enter key for line breaks.
                },
                validations: [{ type: 'minLen', value: 1, msg: "Required" }]
            }
        ];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/content/invoice.json",
            getData: function (response) {
                response.data.forEach(function (rd) {
               
                    //make ShipAddress multiline text.
               rd.OrderDate=rd.OrderDate.split('/')[1]+'.'+rd.OrderDate.split('/')[0]+'.'+rd.OrderDate.split('/')[2]
                    rd.ShipAddress = rd.ShipAddress + "\n" + rd.ShipCity + "\n" + (rd.ShipRegion || "") + "\n" + rd.ShipPostalCode;
                })
                return response;
            }
        }
        $("div#grid_custom_editing").pqGrid({
            title: "Shipping Orders <b>(Custom editing)</b>",
            dataModel: dataModel,
            colModel: colM,
            autoRow: true,
            scrollModel: { autoFit: true },
            columnTemplate: {
                valign: 'center'
            },
            create: function (evt, ui) {
                this.widget().pqTooltip();
            },
            editModel: {
                clicksToEdit: 1,
                keyUpDown: false
            },
            numberCell: { show: false },
            resizable: true
        });
    });

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5645
    • View Profile
Re: Date format like dd.mm.yyyy
« Reply #1 on: March 08, 2022, 04:23:12 pm »
[ Only Pro members may read this post. ]

arbyter

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 40
    • View Profile
Re: Date format like dd.mm.yyyy
« Reply #2 on: March 09, 2022, 07:26:20 pm »
so easy, but it took me a lot of time.
Thank you for your reply.