Replies

• allan Posts: 63,530Questions: 1Answers: 10,473 Site admin

  June 2020

  DatePicker Cannot Load Data (Because It's in the Wrong Format)
  When the main form editor opens, it too, shows the date format with the "T"

  You have two options here:

  1. Use server-side date / time formatters to format into the style you want. There is an example of that here. The .NET download package includes the C# version of that example.
  2. Use client-side date / time formatting.

  Obviously something is wrong with the referenced CSS and/or JS because the datepicker styles do not look right. There is no margin between the days and hour/minute divs.

  As you suggestion there is a conflicting style somewhere, but it is impossible to say for sure where without being able to access the page. If you can give me a link that would be great. If that isn't possible then I'd suggest using the "Inspect" option in your browser (right click) to inspect the elements in question and see where the styles are coming from.

  Regards,
  Allan
• brewdev Posts: 15Questions: 2Answers: 0

  June 2020 edited June 2020

  Thanks for the tips, Allan. I got it, but I feel like some significant pieces of the puzzle were missing in the documentation. And I had to follow the breadcrumbs, as it were.

  Question 1 Response:
  It seems to me that since the datepicker widget expects data to be in a specific format ("YYYY-MM-DD h:m A") for it to even function (on load), then the JS should automatically convert to what is needed before the editor even opens in "main" mode.

  Also, the moment extension function did not quite work out of the box from the example you offered, so I had to adapt it to get it working. I can't explain what the root of the problem is, but variables d, type, and row were undefined on this line (if I were to use the code exactly from your example):

   return function ( d, type, row ) {
          if (! d) {
              return type === 'sort' || type === 'type' ? 0 : d;
          }
  

  No matter, I know how to call a custom function from the render event, which I did using the following code. And keep in mind that the server is returning the date in this format: "YYYY-MM-DDThh:mm:ss".

  var dateTimeCol = function (label, name) {
      this.label = label;
      this.name = name || label;
      this.type = "datetime";
      this.def = function () { return new Date(); };
      this.displayFormat = "YYYY-MM-DD h:m A";
      this.wireFormat = "YYYY-MM-DDThh:mm:ss";
      this.keyInput = false;
  }
  
  var dateTimeData = function (name, sClass) {
      this.data = name;
      this.render = function (data) {
          return getMoment(data, "YYYY-MM-DD h:m A");
      };
      if (sClass !== undefined) this.className = sClass;
  }
  
  function getMoment(data, from, to, locale) {
      // Argument shifting
      if (arguments.length === 2) {
          locale = "en";
          to = from;
          from = "YYYY-MM-DDThh:mm:ss";
      }
      else if (arguments.length === 3) {
          locale = "en";
      }
      return window.moment(data, from, locale, true).format(to);
  }
  

  So, instead of using this:

          $("#tblDTE_" + name).DataTable({
              ,,,
              columns: [
                  {  data: "EventDateTime", 
                      sClass: "col-competition",
                      type: "datetime",
                      def: function () { return new Date(); },
                      displayFormat: "YYYY-MM-DD h:m A",
                      wireFormat: "YYYY-MM-DDThh:mm:ss",
                      keyInput: false
                  },
                  ....
              ]
      });
  

  I use this:

      $("#tblDTE_" + name).DataTable({
          ,,,
          columns: [
              new dateTimeCol("EventDateTime",  "col-competition"),
              ...
          ]
      });
  

  I also use the analogous counterpart for the fields (not columns) in the Post (not Get) iteration of the DTE.

  fields: [
      new dateTimeData("EventDateTime", "col-competition"),
      ....
  ]
  

  Question 2 Response
  Yes, there was a conflict in my CSS. I had a td/th that was universally setting margin, which I have since limited to only those under .dataTables_wrapper:

  .dataTables_wrapper td,
  .dataTables_wrapper th {
      padding: 4px 10px 4px 10px !important;
      text-align: center;
  }
  

  Cheers!
• brewdev Posts: 15Questions: 2Answers: 0

  June 2020

  Sorry i've got poorly named functions (haven't finished editing my code yet). My dateTimeCol should be called dateTimeField, since it is used in the Post DTE.

  And my dateTimeData should be called dateTimeCol, since it is a column used in the Get DTE.

  But you get the idea.

  I would edit the original post, but it timed out already.