Skip to content

Angular 19 Date Time Picker #9

@abdulshakir47

Description

@abdulshakir47

In my Angular 19 application, I'm using @ngxmc/datetime-picker version 19.3.1. I've integrated the datetime picker component, and I've observed that when a single-digit value is manually entered in the time picker (e.g., "1"), it is automatically formatted as a two-digit value (e.g., "01") almost immediately. I would like to either disable this auto-fill behavior entirely or delay the formatting by at least 5 seconds. How can this be achieved?

// My Date timepicker HTML component

Start Date

// My Date Picker component

import { SharedModule } from "../../shared/shared.module";
import { NgxMatDatepickerInput, NgxMatDatetimepicker, NgxMatDatepickerToggle } from "@ngxmc/datetime-picker";
public stepHours = [1, 2, 3, 4, 5];
public stepMinutes = [1, 5, 10, 15, 20, 25];
public stepSeconds = [1, 5, 10, 15, 20, 25];
public date = new Date();
public disabled = false;
public showSpinners = true;
public showSeconds = false;
public touchUi = false;
public enableMeridian = false;
public maxDate = new Date();
public stepHour = 1;
public stepMinute = 1;
public stepSecond = 1;

// Shared Module

export class AppDateAdapter extends NativeDateAdapter {
constructor(private readonly router: Router) {
super();
}

override format(date: Date, displayFormat: string): string {
const currentUrl = this.router.url || '';
const isWasteManagementRoute = currentUrl.includes('waste-management');

if (isWasteManagementRoute) {
  return date.toLocaleDateString('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  });
} else {
  if (displayFormat === 'input') {
  return date.toLocaleString('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: true,
  });
 }
 return date.toDateString();
}

}
}

const MY_DATE_FORMATS = {
parse: {
dateInput: { day: "numeric", month: "numeric", year: "numeric" },
},
display: {
dateInput: "input",
monthYearLabel: { year: "numeric", month: "short" },
dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
monthYearA11yLabel: { year: "numeric", month: "long" },
},
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions