Format date in non-required field

Forms Public Forms
1

Hi, I have a data table that has a date column. In my document, I was formatting it with {{tablename.date}:format(MM/dd/yyyy)} and that was giving me the end result I wanted.

However, it recently came up that this field could potentially be empty. If I leave the formatting in the token, the end result is 'MM/dd/yyyy', instead of a blank cell. If I remove it, the date comes in with the time, which I do not want.

I tried adding kendo.culture().calendar.patterns.d = "M/d/yyyy"; to the rendered function, but that didn't work.

What is the best option here?

2

Hi @EHaya,

The simplest solution I can suggest is to create a hidden field on the form, format the date with JavaScript, and assign it to that hidden field. Then you can reference it in your template without any formatting on the Documents side.

You need to add the formatting code to the beforeSave function for it to apply correctly.

3

Thanks for the response Ilia!

Since it's inside of a data table, can I create a hidden column? I have not figured out how to do that yet.

Or, in the beforeSave function, I could iterate through the array and append a new column into the data table, with the formatted value?

4

Another request that I think may be easier. I'm thinking I just turn it into a masked text field (my team has purchased the add on to have masked input in data tables). Can you help me with the code for [one or two digits (possibly 1-12)] / [one or two digits possibly (1-31)] / [four digits starting with 202]

Is that even possible? I haven't had any luck working with masked text before :upside_down_face:

5 
fd.rendered(function() {
    var dateMask = 'M/d/yyyy';
    var options = {
        mask: '99/99/9999',
        rules: {
            '1': /[0-1]/,
            '2': /[0-2]/,
            '3': /[0-3]/,
            'M': /[1-9]/,
            'd': /[0-3]/,
            'y': /[2]0[2-9]\d/
        },
        placeholder: '_',
        clearIncomplete: true
    };

    var dataTable = fd.control('DataTableName');
    dataTable.columns.forEach(function(column) {
        if (column.type === 'MaskedText') {
            column.editor = function(container, options) {
                $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoMaskedTextBox(options);
            };
            column.attributes = {
                'data-mask': options.mask,
                'data-rules': JSON.stringify(options.rules),
                'data-placeholder': options.placeholder,
                'data-clearIncomplete': options.clearIncomplete
            };
        }
    });
});
6

Formatting Date in a Data Table

Since you are dealing with a date column in a data table and need it formatted while handling potential empty values, you have two main approaches:

  1. Hidden Column Approach: If you can add a hidden column to the data table, you can format the date using JavaScript and assign it to this hidden field. This way, you can reference this field in your template without additional formatting.Steps:
  • Add a hidden column to your data table.
  • Use the beforeSave function to format the date and assign it to this hidden field.
fd.beforeSave(function() {
    var data = fd.control('DataTableName').value;
    data.forEach(function(row) {
        if (row.DateColumn) {
            row.FormattedDate = kendo.toString(new Date(row.DateColumn), "MM/dd/yyyy");
        } else {
            row.FormattedDate = ''; // Or null, depending on your preference
        }
    });
    fd.control('DataTableName').value = data;
});

In your document template, you can now reference {{tablename.FormattedDate}}.

  1. Iterate and Append Column in beforeSave: If adding a hidden column directly isn’t feasible, you can iterate through the array and append a new column with the formatted value in the beforeSave function.
fd.beforeSave(function() {
    var data = fd.control('DataTableName').value;
    data.forEach(function(row) {
        row.FormattedDate = row.DateColumn ? kendo.toString(new Date(row.DateColumn), "MM/dd/yyyy") : '';
    });
    fd.control('DataTableName').value = data;
});