Tailwind CSS Advanced Datepicker dot separator #716

Summary

The Datepicker component doesn't respect custom separators specified in the dateFormat option. Regardless of the separator used in the format string (dash -, slash /, etc.), the output always uses a dot . as the separator.

Steps to Reproduce

🐛 Bug Description

The Datepicker component doesn't respect custom separators specified in the dateFormat option. Regardless of the separator used in the format string (dash -, slash /, etc.), the output always uses a dot . as the separator.

📋 Steps to Reproduce

1. Create an input with the datepicker:

<input 
  class="hs-datepicker" 
  type="text" 
  data-hs-datepicker='{
    "dateFormat": "DD-MM-YYYY",
    "selectedDates": ["2025-10-19"]
  }'
>

2. Click on the input to open the calendar
3. Select any date
4. Observe the formatted date in the input

✅ Expected Behavior

The input should display: 19-10-2025 (with dashes as specified in format)

❌ Actual Behavior

The input displays: 19.10.2025 (with dots, ignoring the format separator)

🌐 Environment

• Preline Version: 3.2.3
• Browser: All (Chrome, Firefox, Safari, Edge)
• OS: All
• Vanilla Calendar Pro Version: 3.0.5
• Lodash Version: 4.17.21

You can see this behavior on the official documentation page: https://preline.co/docs/advanced-datepicker.html

Try any example with a custom format like DD-MM-YYYY - the output will always use dots.

💡 Proposed Solution

Auto-extract the separator from the dateFormat string to ensure consistency between what developers specify and what users see.

Technical approach:

1. Add a method to extract the separator from the format string
2. Use the extracted separator as the priority when formatting dates
3. Maintain backward compatibility with existing dateSeparator override

🔍 Root Cause

In src/plugins/datepicker/index.ts:

Line 208-209: Hardcoded default

const dateSeparator = this.dataOptions?.inputModeOptions?.dateSeparator ?? ".";

Line 249: Hardcoded default parameter

private changeDateSeparator(
    date: string | number | Date,
    separator = ".",  // ← Hardcoded
    ...

The separator from dateFormat is never extracted or used.

🌍 Impact

This affects international users who need dates in their regional format:

• 🇪🇺 Europe: DD/MM/YYYY (19/10/2025)
• 🇺🇸 USA: MM/DD/YYYY (10/19/2025)
• 🌍 ISO 8601: YYYY-MM-DD (2025-10-19)

Currently, only the German format DD.MM.YYYY works by coincidence.

🔧 Current Workaround

Specify the separator twice (redundant and not intuitive):

{
  "dateFormat": "DD/MM/YYYY",
  "inputModeOptions": {
    "dateSeparator": "/"
  }
}

📝 Additional Context

• The formatDate() method already handles custom separators correctly
• The issue is that setInputValue() uses changeDateSeparator() which ignores the format
• This appears to be an oversight rather than intentional design

🤝 Contribution

I'm willing to submit a PR with the fix if the maintainers are interested. I have the solution ready and tested.

Related Documentation:

• Datepicker Docs: https://preline.co/docs/advanced-datepicker.html
• Vanilla Calendar: https://vanilla-calendar.pro/

Demo Link

https://preline.co/docs/advanced-datepicker.html#basic-usage

Expected Behavior

No response

Actual Behavior

No response

Screenshots

No response