Empty value results in (year).(month)...

[domschmidt]

Hey there,

I really like this library

Starting with version 4.0.0, if the input field value is empty, the field value is something like

This behaviour is really strange. Could you please re-check this decision in 4.0.0 again?

Furthermore, in 4.1.0, even if required/ng-required is set to false, after selecting a date and removing it, the form becomes invalid as the current value (empty) cannot be parsed as a date.

[eight04]

Here is the original thread

Before version 4.0.0, the value become empty string when the model is null. And here is the behavior what we had:

• Apply current date (or a default value according default attr) when the input get focus.
  Problem: when tabbing through the input, the model changes to a date which is not expected.
• Apply current date (or the default value) when the user try to input anything.
  Problem: it is confusing to the users since they don't know what to do with the empty input field.

Current:

• Each parts of the date is filled with a placeholder when empty. And the model is only valid if all parts are set.
  Problem: actually it is still confusing. We know we have to input some numbers for 2016-10-06 but what about (year)-(month)-(date)?

Any better idea? I tend to use second solution and try to indicate the format in placeholder attr. Or just always add required attr and use a checkbox to decide whether to use that input field.

current value (empty) cannot be parsed as a date

Confirmed. It will be fixed soon.

[JanBrinker]

Hi there, I'm basically having the same issue. I'd also vote for displaying the placeholder until the user tries to enter something. Or alternatively offer an option of defining how the format should look like. That would help localization of websites with your module :)

[eight04]

Like this?

<input ... datetime-placeholder="localizedPlacehold">

$scope.localizedPlacehold = {
    "year": "...",
    "month": "...",
    ...
};

@domschmidt Another problem is the behavior when pressing delete/backspace:

1. Remove all text in the input. element.val("")
2. Use a placeholder to replace deleted part just like current behavior.
3. Others... ?

[domschmidt]

The proposed solution would be perfect! A localized placeholder variant would be great and would mean that we can migrate to 4.x :-)

Regarding the backspace button: I'd vote for a "natural" feeling:

initial case: (year)-(month)-(day)

the user enters a date 2016-10-04 presses backspace 2016-10-0_ (underscore marks the current cursor) and again 2016-10-_ and again 2016-1_-(day)

and finally, when all parts are removed, the full localized placeholder is shown again.

If the user clicks on the month, then the entered month value is highlighted (marked). If the user uses backspace, then the marked area is deleted and the cursor is on the month area.

initial case: 2016-10-04 the user clicks on the month, then the month is highlighted: 2016-*10*-04 (* surrounds the highlighted area) If the user presses backspace, the month is removed and the cursor is set to the month area: 2016-_-04 (underscore marks the current cursor) On pressing backspace again, the year is cut and the cursor is on the last part of the year: 201_-(month)-04

[JanBrinker]

Sounds good :) Alternatively the definition of the placeholders could also happen in an initialization step during config. But both ways seem good to me :)

[eight04]

https://github.com/eight04/angular-datetime/tree/dev-placeholder http://liveweave.com/lmzSFr ng-trim is required for those formats containing spaces.

[eight04]

Added at v5.0.0.

Configure it like this:

angular
    .module("myApp", ["datetime"])
    .config(function(datetimePlaceholder){
        angular.extend(datetimePlaceholder, {
            year: "<placeholder for year>",
            month: "<placeholder for month>",
            date: "<placeholder for date>"
        });
    });

For all valid keys see https://github.com/eight04/angular-datetime#datetimeplaceholder-object

[eight04]

Do you mean to reset the date on focus event? Try to reset the date with ng-focus directive.