feat: add DatePickerEx component

Author: javier-godoy

src/main/java/com/flowingcode/addons/ycalendar/DatePickerEx.java

@@ -0,0 +1,53 @@
+/*-
+ * #%L
+ * Year Month Calendar Add-on
+ * %%
+ * Copyright (C) 2021 - 2025 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.addons.ycalendar;
+
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.datepicker.DatePicker;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.function.ValueProvider;
+import java.time.LocalDate;
+
+@SuppressWarnings("serial")
+@Tag("fc-date-picker")
+@JsModule("./fc-date-picker/fc-date-picker.js")
+public class DatePickerEx extends DatePicker {
+
+  private ValueProvider<LocalDate, String> classNameGenerator;
+
+  /**
+   * Default constructor.
+   */
+  public DatePickerEx() {
+    super();
+  }
+
+  /**
+   * Convenience constructor to create a date picker with a pre-selected date in current UI locale
+   * format.
+   *
+   * @param initialDate the pre-selected date in the picker
+   */
+  public DatePickerEx(LocalDate initialDate) {
+    this();
+    setValue(initialDate);
+  }
+
+}

src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker-buttons.js

@@ -0,0 +1,49 @@
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+
+export class FcDatePickerButtons extends LitElement {
+  static get is() {
+    return 'fc-date-picker-buttons';
+  }
+  render() {
+    return html`
+          <button id="up" @click=${this._clickUp}></button>
+          <button id="down" @click=${this._clickDown}></button>
+    `;
+  }
+  static get styles() {
+    return css`
+    :host {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+        justify-content: space-evenly;
+    }
+    button {
+        padding: 0;
+        margin: 0;
+        max-height: 0.9rem;
+        box-sizing: content-box;
+    }
+    button::before {
+        display: block;
+    }
+    #up::before {
+        content: "\\25B2";
+    }
+    #down::before {
+        content: "\\25BC";
+    }`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  _clickUp() {
+    this.dispatchEvent(new CustomEvent("click-up"));
+  }
+  _clickDown() {
+    this.dispatchEvent(new CustomEvent("click-down"));
+  }
+}
+
+defineCustomElement(FcDatePickerButtons);

src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js

@@ -0,0 +1,97 @@
+import {DatePicker} from '@vaadin/date-picker/vaadin-date-picker.js';
+import { html } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import './fc-date-picker-buttons.js';
+
+export class FcDatePicker extends DatePicker {
+  static get is() {
+    return 'fc-date-picker';
+  }
+  
+  static get template() {
+    return html`
+        ${super.template}
+        <style>
+            vaadin-input-container {
+                padding-left: 0;
+            }
+            ::slotted(input) {
+                padding-left: calc(0.575em + var(--lumo-border-radius-m) / 4 - 1px);
+            }    
+        </style>
+    `;
+  }
+  
+  ready() {
+    const buttons=document.createElement('fc-date-picker-buttons');
+    buttons.setAttribute('slot','prefix');
+    this.appendChild(buttons);
+    buttons.addEventListener("click-up", ()=>this._onButtonClick(+1));
+    buttons.addEventListener("click-down", ()=>this._onButtonClick(-1));
+    super.ready();
+  }
+  
+  _onButtonClick(delta) {
+    // If input element contains a valid date
+    const date = this.__parseDate(this.inputElement.value);
+    if (date) {
+      
+      // Count how many non-digit characters appear before the current cursor position
+      let index=0;
+      for (let i=0;i<this.inputElement.selectionStart;i++) {
+        if (!this.inputElement.value[i].match(/[0-9]/)) index++;
+      }
+      
+      // Map the component index (e.g. 0 for first, 1 for second), 
+      // to its corresponding date part character ('M', 'D', or 'Y')
+      // based on the formatted structure.
+      const format = this.__formatDate(new Date(3333,10,22))
+                           .replaceAll('1','M')
+                           .replaceAll('2','D')
+                           .replaceAll('3','Y');
+      const part = format.replace(new RegExp(`^([DMY]+[^DMY]){${index}}`),'')[0];
+      
+      // Increments a numeric substring by a specified delta, preserving formatting and padding.
+      const incrementSubstring = (value, start, end, delta) => {
+          const prefix = value.substring(0,start);
+          const middle = parseInt(value.substring(start,end))+delta;
+          const suffix = value.substring(end);
+          return prefix+(""+middle).padStart(end-start, '0')+suffix;
+      };
+      
+      const incrementComponent = (value, part, delta) => {
+          // Increments the numeric component (year, month, or day) of a date string based on the current component index.
+          switch (part) {
+              case 'Y': 
+                  return incrementSubstring(value,0,4,delta);
+                case 'M':
+                return incrementSubstring(value,5,7,delta);
+              case 'D':
+                return incrementSubstring(value,8,10,delta);
+           }
+      };
+      
+      this.value = incrementComponent(this._formatISO(date), part, delta);
+      
+      // Find the start of the index-th component
+      let start=0;
+      for (let i=0;i<index;start++) {
+        if (!this.inputElement.value[start].match(/[0-9]/)) i++;
+      }
+      
+      // Find the end of the index-th component
+      let end=start;
+      while (end<this.inputElement.value.length && this.inputElement.value[end].match(/[0-9]/)) {
+        end++;
+      }
+      
+      this.inputElement.selectionStart=start;
+      this.inputElement.selectionEnd=end;
+      
+      this.inputElement.focus();
+    }
+  }
+  
+}
+
+defineCustomElement(FcDatePicker);

src/test/java/com/flowingcode/addons/ycalendar/DatePickerDemo.java

@@ -0,0 +1,50 @@
+/*-
+ * #%L
+ * Year Month Calendar Add-on
+ * %%
+ * Copyright (C) 2021 - 2025 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.addons.ycalendar;
+
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.notification.Notification;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+import java.time.LocalDate;
+import java.util.Objects;
+
+@DemoSource
+@PageTitle("DatePicker")
+@Route(value = "year-month-calendar/date-picker", layout = YearMonthCalendarDemoView.class)
+public class DatePickerDemo extends Div {
+
+  public DatePickerDemo() {
+
+    DatePickerEx field = new DatePickerEx(LocalDate.now());
+    // #if vaadin eq 0
+    add(new LocaleSelector(field::setI18n));
+    // #endif
+
+    field.addValueChangeListener(ev->{
+      Notification.show(Objects.toString(ev.getValue()));
+    });
+
+    add(field);
+  }
+
+}
+