[FEATURE] Add custom format to date picker

[Nameera23]

I want to give a format to date picker which accept this format and display accordingly "MM/DD/YYYY hh:mm a"

[Nameera23]

Is it possible it take moment date?

[toozuuu]

I want to give a format to date picker which accept this format and display accordingly "MM/DD/YYYY hh:mm a"

@Nameera23 Thank you for your feature request!

Good news - this feature is already available in the datepicker! You can use the displayFormat input property to customize the date and time display format.

Usage

To display dates in the format "MM/DD/YYYY hh:mm a", simply use the displayFormat property along with showTime:

<ngxsmk-datepicker
  mode="single"
  [showTime]="true"
  displayFormat="MM/DD/YYYY hh:mm a"
  placeholder="Select date and time">
</ngxsmk-datepicker>

Supported Format Tokens

The displayFormat property supports the following tokens:

• Date tokens:

  • YYYY - 4-digit year (e.g., 2025)
  • YY - 2-digit year (e.g., 25)
  • MM - 2-digit month (e.g., 01-12)
  • M - Month without leading zero (e.g., 1-12)
  • DD - 2-digit day (e.g., 01-31)
  • D - Day without leading zero (e.g., 1-31)

• Time tokens:

  • hh - 12-hour format with leading zero (e.g., 01-12)
  • h - 12-hour format without leading zero (e.g., 1-12)
  • HH - 24-hour format with leading zero (e.g., 00-23)
  • H - 24-hour format without leading zero (e.g., 0-23)
  • mm - Minutes with leading zero (e.g., 00-59)
  • m - Minutes without leading zero (e.g., 0-59)
  • ss - Seconds with leading zero (e.g., 00-59)
  • s - Seconds without leading zero (e.g., 0-59)
  • a - Lowercase am/pm
  • A - Uppercase AM/PM

Example Output

With displayFormat="MM/DD/YYYY hh:mm a", a selected date would display as:

• 12/25/2025 03:45 PM

Additional Notes

• Make sure to set [showTime]="true" to enable time selection in the picker
• The format works with all selection modes (single, range, multiple)
• For range mode, the format will be applied to both start and end dates
• If you're using date adapters (date-fns, dayjs, or Luxon), they will use their own format parsing, otherwise the built-in simple formatter will be used

If you encounter any issues or need additional format tokens, please let us know!

[Nameera23]

Is it accept moment object ?

[Nameera23]

Like its not populating properly I pass this date moment(this.date).utcOffset(timezone).format('MM/DD/YYYY hh:mm a') wiith format and place format in date picker so its not populating
<ngxsmk-datepicker [(ngModel)]="date" [yearRange]="50" [autoApplyClose]="false" [mode]="'single'" [showTime]="false" [disabled]="disableDate()" [inline]="false"
placeholder="Select Date" displayFormat="MM/DD/YYYY hh:mm a" #date="ngModel" name="date">

[aylmercarson]

fwiw: i see no indication that moment objects will be handled as such, nor would i personally want that. moment is an old, and very big, library which has been overtaken by smaller, lighter libraries which are much better. i would not choose to use moment these days. can't you simply convert your moment object into one of the many formats that this library will accept?

but..it's not my library :)

[toozuuu]

fwiw: i see no indication that moment objects will be handled as such, nor would i personally want that. moment is an old, and very big, library which has been overtaken by smaller, lighter libraries which are much better. i would not choose to use moment these days. can't you simply convert your moment object into one of the many formats that this library will accept?

but..it's not my library :)

Hi @aylmercarson,

Thank you for your thoughtful feedback! You raise excellent points about Moment.js, and I completely agree with your perspective.

You're absolutely right - Moment.js is indeed a legacy library that has been superseded by lighter, more modern alternatives like date-fns, dayjs, and luxon. In fact, this library already has first-class support for these modern adapters, which we actively recommend over Moment.js.

Why we added Moment.js support in v1.9.11:
This feature was added specifically to address a critical issue for users who are stuck with legacy codebases that still use Moment.js. Many enterprise applications have deep integrations with Moment.js that cannot be easily migrated. These users were experiencing crashes when Moment.js objects were passed to the datepicker.

Our recommendation remains unchanged:

✅ Use date-fns, dayjs, or luxon for new projects (as we document)
✅ Convert Moment.js objects to native Date or string format when possible
✅ The Moment.js support is purely a compatibility layer for legacy systems
Technical implementation:
The Moment.js support automatically converts Moment.js objects to native Date objects internally, so there's no additional bundle size impact for users who don't use Moment.js.

Your suggestion is spot-on - the best approach is indeed to momentObj.toDate() or momentObj.format() before passing to the datepicker. We've updated our documentation to make this clearer and added the automatic conversion as a safety net for legacy systems.

Thanks again for keeping us honest about best practices! 🙏

[toozuuu]

Like its not populating properly I pass this date moment(this.date).utcOffset(timezone).format('MM/DD/YYYY hh:mm a') wiith format and place format in date picker so its not populating <ngxsmk-datepicker [(ngModel)]="date" [yearRange]="50" [autoApplyClose]="false" [mode]="'single'" [showTime]="false" [disabled]="disableDate()" [inline]="false" placeholder="Select Date" displayFormat="MM/DD/YYYY hh:mm a" #date="ngModel" name="date">

Here's a helpful response to Nameera23's comment about the Moment.js date not populating properly:

---

Hi @Nameera23,

Thank you for reporting this issue! I can see the problem - you're passing a formatted string to the datepicker, but the displayFormat is only for displaying dates, not for parsing input values.

The Issue:

// This creates a formatted STRING, not a Moment.js object
moment(this.date).utcOffset(timezone).format('MM/DD/YYYY hh:mm a')

Solution 1 - Pass Moment.js Object Directly (v1.9.11+):

// Pass the Moment.js object itself, not the formatted string
this.date = moment(this.date).utcOffset(timezone);

// Your template stays the same
<ngxsmk-datepicker 
  [(ngModel)]="date" 
  [yearRange]="50" 
  [autoApplyClose]="false" 
  [mode]="'single'" 
  [showTime]="false" 
  [disabled]="disableDate()" 
  [inline]="false"
  placeholder="Select Date" 
  displayFormat="MM/DD/YYYY hh:mm a" 
  #date="ngModel" 
  name="date">
</ngxsmk-datepicker>

Solution 2 - Convert to Native Date (Recommended):

// Convert to native Date object
this.date = moment(this.date).utcOffset(timezone).toDate();

Solution 3 - Use String with Parser (v1.9.11+):

// If you must use string, ensure it matches displayFormat exactly
this.date = moment(this.date).utcOffset(timezone).format('MM/DD/YYYY hh:mm a');

// Add custom parser if needed
<ngxsmk-datepicker 
  [(ngModel)]="date" 
  [parseDate]="customParser"
  displayFormat="MM/DD/YYYY hh:mm a"
  ...>
</ngxsmk-datepicker>

// In your component
customParser = (value: string) => {
  return moment(value, 'MM/DD/YYYY hh:mm a').toDate();
};

Key Points:

• displayFormat controls how dates are shown to users
• Input values should be Date objects, Moment.js objects, or ISO strings
• Formatted strings need custom parsing or should be converted to Date objects

The v1.9.11 update should now handle Moment.js objects correctly when passed directly (not as formatted strings).

Let me know if this helps resolve your issue! 🚀

[toozuuu]

Is it accept moment object ?

Yes, starting from v1.9.11, ngxsmk-datepicker now accepts Moment.js objects directly! 🎉

Here's what works in v1.9.11+:

// ✅ Direct Moment.js object - NOW SUPPORTED
this.date = moment(); // or moment(this.date).utcOffset(timezone)

// ✅ Moment.js with timezone
this.date = moment(this.date).utcOffset(timezone);

// ✅ Your template works as-is
<ngxsmk-datepicker 
  [(ngModel)]="date" 
  displayFormat="MM/DD/YYYY hh:mm a"
  ...>
</ngxsmk-datepicker>

What was fixed in v1.9.11:

• Added isMomentObject() helper to detect Moment.js instances
• Enhanced _normalizeValue() to extract native Date using .toDate()
• Improved format token parsing for custom display formats
• Full backward compatibility maintained

Important Notes:

• The datepicker internally converts Moment.js to native Date objects
• No additional bundle size if you don't use Moment.js
• Works with all existing Moment.js format tokens
• Maintains compatibility with date-fns, dayjs, and luxon adapters

Your original issue should now be resolved:

// This now works perfectly in v1.9.11+
this.date = moment(this.date).utcOffset(timezone);
// NOT: moment(this.date).utcOffset(timezone).format('MM/DD/YYYY hh:mm a')

The key is passing the Moment.js object itself, not the formatted string. The displayFormat handles the presentation while the datepicker handles the Moment.js object internally.

Upgrade to v1.9.11 and your Moment.js integration should work seamlessly! 🚀

[Nameera23]

After version update getting other errors like valueChange giving null event and date picker not selecting date properly like I want range from previous months till todays so it not select previous month date I have to close and again open then it will click.
For your info I am working with ionic version 8 and angular version 20+

[toozuuu]

After version update getting other errors like valueChange giving null event and date picker not selecting date properly like I want range from previous months till todays so it not select previous month date I have to close and again open then it will click. For your info I am working with ionic version 8 and angular version 20+

@Nameera23 Thank you for reporting this. We're investigating both issues.

First, please check:

• Ensure you're using the latest version (v1.9.12). You can check with:ash
  npm list ngxsmk-datepicker

  • If not, please update:

  npm install ngxsmk-datepicker@latest

  • Let us know if the issue persists after updating.

Issue 1: valueChange event returning null

• Can you share a minimal code example that reproduces this?
• Are you using Reactive Forms, Signal Forms, or direct binding?

Issue 2: Range selection from previous months

• Do you mean selecting a start date from a previous month (before the visible month)?
• When you try to select a previous month date, does the calendar:
  • Navigate to that month, or
  • Stay on the current month?
• Does it work if you navigate to the previous month first, then select?

To help debug:

1. Your minDate/maxDate configuration (if any)
2. A code snippet showing how you're using the datepicker
3. Browser/version and Angular version
4. Any console errors

We'll review the code and follow up with fixes or workarounds. If you can open a new issue with the details above, we can track this more effectively.