CODEWITHSUNDEEP
liferayonchangeliferay-7liferay-aui
Nicolas Raoul
Nicolas Raoul

Reputation: 60213

Liferay 7 date picker does not trigger onChange

I added this AUI date picker to my JSP:

<aui:input
    type="text"
    id="myDate"
    name="my-date"
    value="2017-12-14"
    placeholder="yyyy-mm-dd"
    onChange="javascript:alert('date changed');"/>

<aui:script>
    AUI().use(
        'aui-datepicker',
        function(A) {
            new A.DatePicker(
                {
                    trigger: '#<portlet:namespace/>myDate',
                    mask: '%Y-%m-%d',
                    popover: {
                        zIndex: 1000
                    }
                }
            );
        }
    );
</aui:script>

Problem: Changing the date using the calendar widget that pops up does not display the alert.

If I ignore the widget and change the date manually (using the keyboard), the alert correctly shows up as soon as the input loses focus.

What am I doing wrong?
How to have onChange be called whenever the date is changed, be via mouse or keyboard?

Liferay AUI date picker

Upvotes: 0

Views: 2092

Answers (1)

Miroslav Ligas
Miroslav Ligas

Reputation: 1307

As the guys in the comments mentioned use the js callback definitions. There are a couple of examples in the documentation.

https://alloyui.com/examples/datepicker

If you really want to have the onChange also there, you can trigger the change event from the js callback code.

<button class="btn btn-primary"><i class="icon-calendar icon-white"></i> Select the date</button>

<script>
YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker(
      {
        trigger: 'button',
        popover: {
          zIndex: 1
        },
        on: {
          selectionChange: function(event) {
            console.log(event.newSelection)
          }
        }
      }
    );
  }
);
</script>

Upvotes: 3

Related Questions