CODEWITHSUNDEEP
vaadinpolymer-3.x
mounika
mounika

Reputation: 53

To freeze the past date from the current date using vaadin-date-picker

We are using vaadin-date-picker in polymer 3.x. I need to disable the past date from it and make it possible to only start with current or future dates and after selection of any date the current date should not be disabled.

Upvotes: 1

Views: 287

Answers (1)

anasmi
anasmi

Reputation: 2652

In HTML API page there is a complete overview of available properties. Based on your description, you would need a min:

The earliest date that can be selected. All earlier dates will be disabled. Supported date formats:

  • ISO 8601 "YYYY-MM-DD" (default)
  • 6-digit extended ISO 8601 "+YYYYYY-MM-DD", "-YYYYYY-MM-DD"

Have you experienced any issues with it?

This works for me:

import {PolymerElement,html} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';

class HelloWorld extends PolymerElement {

    static get template() {
        return html`
              <vaadin-date-picker show-week-numbers label="Date" min="{{giveDate()}}">
              </vaadin-date-picker>
`;
    }
    giveDate(){
        var d = new Date();
        var n = d.toISOString().slice(0,10);
        return n;
    }

    ready(){
        super.ready();
    }

    static get is() {
        return 'hello-world';
    }
}

customElements.define(HelloWorld.is, HelloWorld);

Upvotes: 1

Related Questions