Set the date programmatically?

[nocquidant]

Thank you for your component.

I can't manage to set the date of the app-datepicker programmatically (I must say I'm not sure of the differences between date and inputDate).

Here is my code.

_onShowDatePickerDialog: function(evt, detail) {
        var dialog = this.$$('#date-picker-dialog');
        dialog.locale = detail.locale;
        dialog.date = detail.date;
        dialog.callback = detail.callback;
        dialog.open();
      },

<dom-module id="date-picker-dialog">
  <template>
    <style include="shared-styles iron-flex iron-flex-alignment">
    </style>

    <paper-dialog id="dialog" class="paper-date-picker-dialog" on-iron-overlay-closed="_dismissDialog">
      <app-datepicker id="datepicker"
                      auto-update-date="true"
                      date="[[_dateAsString]]"
                      input-date="{{_dateAsString}}"
                      locale="[[locale]]"></app-datepicker>
      <div class="buttons">
        <paper-button dialog-dismiss>{{localize('app.annuler')}}</paper-button>
        <paper-button dialog-confirm autofocus>{{localize('app.valider')}}</paper-button>
      </div>
    </paper-dialog>

  </template>

  <script>
    Polymer({
      is: 'date-picker-dialog',

      behaviors: [
        Sigma.AppBehavior
      ],

      properties: {
        locale: {
          type: String
        },
        date: {
          type: Date,
          observer: '_onDateChanged'
        },
        callback: {
          type: String
        },
        _dateAsString: {
          notify: true,
          type: Date
        },
      },

      _onDateChanged: function(newVal, oldVal) {
        this._dateAsString = moment(newVal).format('YYYY/MM/DD');
      },

      _dismissDialog: function (e) {
        if (e.detail.confirmed) {
          var dateAsString = this.$.datepicker.date;
          this.callback(moment(dateAsString, 'YYYY/MM/DD').toDate());
        }
      },

      open: function () {
        this.$.dialog.open();
      }
    });
  </script>

</dom-module>

Thanks
--nick

[nocquidant]

[motss]

@nocquidant Thank you for using this element. Hope you find it useful.

The difference of input-date and date is that when creating the element there is any issue of input-ing date with long date eg. Fri, May 12 2017. Therefore, input-date is created just to receive input from the outside world whereas the date is a read-only property which means that you can only read output but cannot pass any input in to the property (after date selection on the datepicker).

To read date, you need to:

• use two-way data binding (double curly braces).
• only bind date property which is a read-only property and does not receive any inputs.

  <app-datepicker date="{{readDateOnly}}"></app-datepicker>

To input date, you need to:

• use one-way data binding (square brackets).
• to ensure the input date is valid on all modern browsers, you are advised to use / for the date separator.
• only bind to input-date which is a property ready to receive any input date eg. 2016/07/05 or Fri, May 12 2017.

  <app-datepicker input-date="[[inputYourDateHere]]"></app-datepicker>

To input date and read the output, just combine both:

  <app-datepicker input-date="[[inputDate]]" date="{{outputDate}}"></app-datepicker>

[motss]

@nocquidant Hope it helped. Feel free to ask or open issue you find anything blurry from the given docs.

[nocquidant]

I still cannot get it work. According to me, the issue is in _updateToReflectExternalChange method.

I had to do the following change in order to use it in french (see comment):

_updateToReflectExternalChange: function(_inputDate) {
   // Only locale with 'en' is accepted. --> Why?! It works nice with french locale as long as the format is yyyy/mm/dd
   if (/*this.locale.indexOf('en') < 0 ||*/ this.locale === '') {
      this._setInvalidDate(!0);
      return;
   }
   ...

For me, the format should be checked here, but not the locale (I want the message in french, but I still use the format yyyy/mm/dd).

[motss]

@nocquidant Did you pass in a short date (2016/07/04) or a long date (Mon, Jul 4, 2016) to the inputDate property?

[nocquidant]

I pass a short date.

Le lun. 4 juil. 2016 à 14:48, Rong Sen Ng notifications@github.com a
écrit :

@nocquidant https://github.com/nocquidant Did you pass in a short date (
2016/07/04) or a long date (Mon, Jul 4, 2016) to the inputDate property?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#26 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AANP3t1ycS-_YPlEdVmDq6-tMUNiCbdmks5qSQEigaJpZM4I_JT_
.

[motss]

@nocquidant If the value received by the inputDate is a short date in the format of yyyy/mm/dd, it should work. To simplify input date with all kinds of languages, feeding long formatted date into the inputDate has been limited to only the language en as it might not be interpreted correctly by the platform and not other languages which in your case french. This is one limitatation to the inputDate, so you're advised to input short date for now.

[nocquidant]

OK, I made a "simple app" here: https://github.com/nocquidant/polymerex, based on the Polymer drawer template.

In order not to have the datepicker dialog behind the left navigation menu on small devices (see PolymerElements/iron-overlay-behavior#155), I use the following trick: my-app.html references my date-picker-dialog and each page can fire an event in order to open the single dialog. The problem is that, each page want the dialog to open at a specific date.

If you click on the button on "View One", the date-picker must show "2016/07/01" whatever the previous selected value was. How can I achieve this?

Thanks
--nick

[nocquidant]

PS. Most of the code is in: src/dialogs/date-picker-dialog.html

[motss]

@nocquidant It's great! I'll look into it and get back to you soon.

[motss]

@nocquidant The issue is confirmed and working on a fix. There are also some problem in your code provided. I will post a proper solution to your case or maybe file a PR to your Github repo so that you know where should be changed. Stay tuned. 😄

[nocquidant]

Many thanks. It is fine now.