vaadin/vaadin-date-time-picker

The Web Component for datetime picker. Part of the Vaadin components.

vaadin-date-time-picker's Issues

Implement autoOpenDisabled

Needs vaadin/vaadin-combo-box#863
Needs vaadin/vaadin-date-picker#703

When dateTimePicker.autoOpenDisabled = true:

• Focusing and typing in the fields doesn’t open the overlay
• Clicking on the icons opens the overlay
• Up / Down keys opens the overlay

Also add a demo for the new feature

Implement validation

• Add properties for errorMessage, required and invalid and bind them to the custom field.
• Make sure validation works logically.
• Add some demos and tests for validation (e.g. "custom validator" demos like in date picker and time picker).

#4 should be implemented first to include validation for min and max.

Project setup

CI (Travis setup + Sauce account)

Add styling demos

Add some styling demos e.g. similar to "small text field" and "custom theme variant" demos at https://cdn.vaadin.com/vaadin-date-picker/4.0.3/demo/#date-picker-styling-demos

Implement the MVP

The Web Component <vaadin-date-time-picker> is constructed by wrapping a <vaadin-date-picker> and <vaadin-time-picker> inside of a <vaadin-custom-field>.

Add support value property only for now.

The <vaadin-date-picker> and <vaadin-time-picker> sub-components must be slottable, so slot change listener should be used instead of template binding.

Implement Lumo & Material themes

Broken links

README.md links to "Live Demo" and to the "API documentation" but both links are 404 broken

Disabled styles for the label

After implementing #3 the disabled label styles should be fixed by fixing vaadin/vaadin-custom-field#30 and then binding to disabled and readonly attributes of the custom field.

Implement focus() and autofocus

Implement focus() method (similar to custom field implementation) so that you can call dateTimePicker.focus() to focus the date picker (first input). This would probably be enough to fix vaadin/vaadin-date-time-picker-flow#5

In case of:

<vaadin-date-time-picker autofocus></vaadin-date-time-picker>

The date picker should be automatically focused when the component is ready.

The autofocus implementation should be similar to vaadin-control-state-mixin.

State attributes focused and focus-ring are probably not needed atm. (for the vaadin-date-time-picker element) so let's leave those out of scope of this issue. They can be added later if there is need for them.

Remove ugly workaround of overriding customField.validate method

#12 introduces this: 7a14c00#diff-94815bad6d0e63e023f8d4550ddabbceR269-R287
in __selectedDateTimeChanged():

// Setting the customField.value below triggers validation of the date picker and time picker.
// If the inputs are slotted (e.g. when using the Java API) and have an initial value this can
// happen before date picker ready() which triggers an error when date picker is trying to read
// `this.$.input` (as a result of value change triggered by setting custom field value).
// Workaround the problem by overriding customField.validate while setting the initial value.
if (!this.$.customField.inputs[0].$) {
  const validate = this.$.customField.validate;
  /* istanbul ignore next */
  this.$.customField.validate = () => true;
  this.$.customField.value = this.value;
  this.$.customField.validate = validate;
  setTimeout(() => {
    this.$.customField.validate();
  });
} else {
  this.$.customField.value = this.value;
}

This is kind of ugly, but I couldn't think of any nicer way to solve the problem right now.

Maybe this could be avoided if custom field would handle this situation automatically and not calling the validation of the inputs too early, or maybe date-picker should handle it by not trying to read the $.input if validate is called too early. I'm not sure should it be allowed to trigger validation before ready() or not.

Needs a bit of investigation to figure out if this could/should be fixed in vaadin-date-picker or vaadin-custom-field.

Add min/max and i18n properties

min (date + time, same format as value)
max (date + time, same format as value)
i18n {
...flattened values from both sub-components
}

Polymer 3 conversion and TS event type definitions

Description

• convert codebase to Polymer 3
• use registerStyles API instead of <dom-module theme-for>
• add events type definitions

Add support for getting initial value from slotted fields

This is needed for supporting initialization of DateTimePicker with an initial value from Java as it sets the value directly to the inner date picker and time picker.

Similar case client side only example that doesn't work atm.:

<vaadin-date-time-picker>
  <vaadin-date-picker slot="date-picker" value="2019-09-16"></vaadin-date-picker>
  <vaadin-time-picker slot="time-picker" value="15:00"></vaadin-time-picker>
</vaadin-date-time-picker>

In this case value of the vaadin-date-time-picker is empty but it should be 2019-09-16T15:00

DateTimePicker#getErrorMessage() not working

In the DateTimePicker the implementation of setErrorMessage(...) writes the message to property "errorMessage", while the implementation of getErrorMessage retrieves its value from property "error-message". This is a mismatch that causes getErrorMessage() not to work.

Make sure the component is accessible

Make sure keyboard navigation works as expected.
Make sure the component works with screen readers as expected.

Add helper text slot and API

Add slot for displaying text or component related to field.
Baseline implementation has been done for vaadin-text-field. See vaadin/vaadin-text-field#410
All implementations should follow the baseline implementation to achieve the same functionality.

Requirements

• Add helper-text part which contains slot helper
• Add observer to add has-helper attribute when helperText property is set
• Add slotchange event handler to add has-helper attribute when content placed in helper slot
• Add helper text to aria-describedby
• Add observer for error message to add has-error-message attribute (used to hide helper in material theme when error message is set)

Visual specifications

Tabbing does not work in Chrome

https://cdn.vaadin.com/vaadin-date-time-picker/1.0.0-alpha1/demo/#date-time-picker-basic-demos

1. Focus date input
2. Tab to time input
3. Shift + Tab back to date input → focus stays in the time input

Chrome, macOS

Works as expected in Safari, macOS.

Clearing the value is not reflected in date picker and time picker

This is a regression caused by #23.

This works in https://cdn.vaadin.com/vaadin-date-time-picker/1.0.0-alpha3/demo/#date-time-picker-basic-demos
but doesn't work in https://cdn.vaadin.com/vaadin-date-time-picker/1.0.0-alpha4/demo/#date-time-picker-basic-demos

picker.value = '1985-01-10T13:51';
picker.value = '';
// The component still visually shows the date '1985-01-10T13:51'
// as the custom field, date picker and time picker do not get cleared

A test needs to be added to verify that clearing the value is propagated to custom field, date picker and time picker.

Implement 'change' event

Generate TypeScript definitions for P3

Child of vaadin/vaadin-core#186

Add properties that can be forwarded to the sub-components directly

• datePlaceholder
• timePlaceholder
• step (time picker resolution)
• initialPosition (Only affects the date picker)
• showWeekNumbers

// Example observer
__stepChanged(step, __timePicker) {
  if (__timePicker) {
    __timePicker.step = step;
  }
}