Datepicker always invalid

[juanmav]

The datepicker is not working. When the date is selected from the datepicker the form always stays as invalid. I tried it using angular-material 1.0.7.

I also clone the repo and tried the "simple" example that fails too.

Any idea what can be happening?

Thanks JM

[brianpkelley]

md-datepicker returns a Date object, and angular-schema-form wants a string. Without calling one of the toString methods on it, it won't matter what we pass to it.

How I fixed it was: Add this conditional to the /angular-schema-form/src/services/validator.js around line 39

    // Date values
    if ( schema.type === 'string' && schema.format === 'date' ) {
        if ( value === null ) {
            value = undefined;
        } else {
            if ( typeof value.toISOString === 'function' ) {
                value = value.toISOString();
            }
        }
    }

[juanmav]

@brianpkelley Great! Thanks! I will try it!

[Anthropic]

@brianpkelley I'm on holiday this week but I will try to add this change next week, thanks for taking the time to provide the info! :)

[brianpkelley]

In testing found a bug in the date check, I've updated my comment above to reflect the change.

[brianpkelley]

The fix above only works dates outside of arrays (i'd say average operation) if they're inside of an array type tv4 is handling the validation and we can't convert the angular <input type="date" directive which is passing back a Date object.

To fix this, I hackishly created another date format/builder with "type": "object" and "format": "date" and applied the tv4 custom format to validate the date. This way tv4 is looking for an object (check) and the custom format validates it.

    // ISO Format - 2016-08-02T17:03:18.608Z - new Date().toISOString()
    var dateFormat = /^[0-9]{4,}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}(?:\.[0-9]+|)(?:[+-][0-9]{2}:?(?:[0-9]{2}|)|Z)$/;
    // Standard Format - Tue Aug 02 2016 12:03:59 GMT-0500 (CDT) - new Date().toString()
    var mdDateFormat = /^(:?[A-Z][a-z]{2}\s){2}\d{1,2}\s\d{4}\s(:?\d{2}\:?){3}\s[A-Z]{3}\-\d{4}\s\([A-Z]{3}\)$/;

    var formats = {
        date: function (value) {
            if ( value && typeof value !== 'string' && value.toISOString ) {
                value = value.toISOString() || '';
            }

            if (dateFormat.test(value) || mdDateFormat.test(value) ) {
                return null;
            }

            return 'A valid date expected';
        }
    };
    tv4.addFormat( 'date', formats.date );

    function dateObjectDefault(name, schema, options) {
      if (schema.type === 'object' && (schema.format === 'date' || schema.format === 'date-time')) {
        var f = schemaFormProvider.stdFormObj(name, schema, options);
        f.key  = options.path;
        f.type = 'date';
        options.lookup[sfPathProvider.stringify(options.path)] = f;
        return f;
      }
    };

    schemaFormProvider.defaults.object.unshift(dateObjectDefault);

[hugoalexmartins]

@brianpkelley hey I am facing a same problem with datepicker.

After place the code above in material-decorator.js, build, and also changed the type object. I did well ?

Because if a use the datepicker and chose a date seems to be fine, but if a have the field required and don't chose any date I just received "Invalid type, expected object", so do I need to change the validator.js also ?

I appreciate any help.