diff --git a/internals/ui/pages/datepicker.templ b/internals/ui/pages/datepicker.templ
index 3d94d59..f167d51 100644
--- a/internals/ui/pages/datepicker.templ
+++ b/internals/ui/pages/datepicker.templ
@@ -13,8 +13,33 @@ templ Datepicker() {
 			Description: templ.Raw("A date picker component."),
 		}) {
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				ShowcaseFile:      showcase.Datepicker(),
-				PreviewCodeFile:   "datepicker.templ",
+				SectionName:       "Default",
+				ShowcaseFile:      showcase.DatepickerDefault(),
+				PreviewCodeFile:   "datepicker_default.templ",
+				ComponentCodeFile: "datepicker.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Custom Placeholder",
+				ShowcaseFile:      showcase.DatepickerCustomPlaceholder(),
+				PreviewCodeFile:   "datepicker_custom_placeholder.templ",
+				ComponentCodeFile: "datepicker.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Selected Date",
+				ShowcaseFile:      showcase.DatepickerSelectedDate(),
+				PreviewCodeFile:   "datepicker_selected_date.templ",
+				ComponentCodeFile: "datepicker.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Disabled",
+				ShowcaseFile:      showcase.DatepickerDisabled(),
+				PreviewCodeFile:   "datepicker_disabled.templ",
+				ComponentCodeFile: "datepicker.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Formats",
+				ShowcaseFile:      showcase.DatepickerFormats(),
+				PreviewCodeFile:   "datepicker_formats.templ",
 				ComponentCodeFile: "datepicker.templ",
 			})
 		}
diff --git a/internals/ui/pages/themes.templ b/internals/ui/pages/themes.templ
index 2e8b9d1..210e4b4 100644
--- a/internals/ui/pages/themes.templ
+++ b/internals/ui/pages/themes.templ
@@ -96,7 +96,6 @@ templ ThemePreview() {
 							ID:          "birthdate",
 							Name:        "birthdate",
 							Placeholder: "Select your birth date",
-							Format:      "YYYY-MM-DD",
 						})
 					</div>
 					<div class="space-y-2">
diff --git a/internals/ui/showcase/datepicker_custom_placeholder.templ b/internals/ui/showcase/datepicker_custom_placeholder.templ
new file mode 100644
index 0000000..65d6e03
--- /dev/null
+++ b/internals/ui/showcase/datepicker_custom_placeholder.templ
@@ -0,0 +1,12 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/components"
+
+templ DatepickerCustomPlaceholder() {
+	@components.Datepicker(components.DatepickerProps{
+		ID:          "date",
+		Name:        "date",
+		Placeholder: "When is your birthday?",
+		Class:       "w-full max-w-xs",
+	})
+}
diff --git a/internals/ui/showcase/datepicker_default.templ b/internals/ui/showcase/datepicker_default.templ
new file mode 100644
index 0000000..dc52ea3
--- /dev/null
+++ b/internals/ui/showcase/datepicker_default.templ
@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/components"
+
+templ DatepickerDefault() {
+	@components.Datepicker(components.DatepickerProps{
+		ID:    "my-datepicker",
+		Name:  "selected-date",
+		Class: "w-full max-w-xs",
+	})
+}
diff --git a/internals/ui/showcase/datepicker_disabled.templ b/internals/ui/showcase/datepicker_disabled.templ
new file mode 100644
index 0000000..e95593c
--- /dev/null
+++ b/internals/ui/showcase/datepicker_disabled.templ
@@ -0,0 +1,29 @@
+package showcase
+
+import (
+	"github.com/axzilla/goilerplate/pkg/components"
+	"time"
+)
+
+templ DatepickerDisabled() {
+	<div class="w-full max-w-xs flex flex-col gap-4">
+		// Disabled using attributes
+		@components.Datepicker(components.DatepickerProps{
+			ID:          "my-datepicker",
+			Name:        "selected-date",
+			Placeholder: "Select a date",
+			Value:       time.Now(),
+			Class:       "w-full max-w-xs",
+			Attributes:  templ.Attributes{"disabled": true},
+		})
+		// Disabled using props
+		@components.Datepicker(components.DatepickerProps{
+			ID:          "my-datepicker-2",
+			Name:        "selected-date-2",
+			Placeholder: "Select a date",
+			Value:       time.Now(),
+			Class:       "w-full max-w-xs",
+			Disabled:    true,
+		})
+	</div>
+}
diff --git a/internals/ui/showcase/datepicker_formats.templ b/internals/ui/showcase/datepicker_formats.templ
new file mode 100644
index 0000000..fbf6831
--- /dev/null
+++ b/internals/ui/showcase/datepicker_formats.templ
@@ -0,0 +1,76 @@
+package showcase
+
+import (
+	"github.com/axzilla/goilerplate/pkg/components"
+	"time"
+)
+
+templ DatepickerFormats() {
+	<div class="w-full max-w-xs flex flex-col gap-4">
+		// Default ISO
+		@components.Datepicker(components.DatepickerProps{
+			ID:     "date-iso",
+			Name:   "date_iso",
+			Config: components.DatePickerISO,
+			Value:  time.Now(),
+		})
+		// Default EU
+		@components.Datepicker(components.DatepickerProps{
+			ID:     "date-eu",
+			Name:   "date_eu",
+			Config: components.DatePickerEU,
+			Value:  time.Now(),
+		})
+		// Default UK
+		@components.Datepicker(components.DatepickerProps{
+			ID:     "date-uk",
+			Name:   "date_uk",
+			Config: components.DatePickerUK,
+			Value:  time.Now(),
+		})
+		// Default US
+		@components.Datepicker(components.DatepickerProps{
+			ID:     "date-us",
+			Name:   "date_us",
+			Config: components.DatePickerUS,
+			Value:  time.Now(),
+		})
+		// Default LONG
+		@components.Datepicker(components.DatepickerProps{
+			ID:     "date-long",
+			Name:   "date_long",
+			Config: components.DatePickerLONG,
+			Value:  time.Now(),
+		})
+		// Custom Config
+		@components.Datepicker(components.DatepickerProps{
+			ID:   "date-es",
+			Name: "date_es",
+			Config: components.NewDatepickerConfig(
+				components.DateFormatLONG,
+				components.DateLocaleSpanish,
+			),
+			Value:       time.Now().AddDate(0, 0, -30), // 30 days ago
+			Placeholder: "Seleccionar fecha",
+		})
+		// Custom Format (Japanese LONG)
+		@components.Datepicker(components.DatepickerProps{
+			ID:   "date-custom",
+			Name: "date_custom",
+			Config: components.NewDatepickerConfig(
+				components.DateFormatLONG,
+				components.DateLocale{
+					MonthNames: []string{
+						"1月", "2月", "3月", "4月", "5月", "6月",
+						"7月", "8月", "9月", "10月", "11月", "12月",
+					},
+					DayNames: []string{
+						"日", "月", "火", "水", "木", "金", "土",
+					},
+				},
+			),
+			Value:       time.Now().AddDate(0, 0, -30), // 30 days ago
+			Placeholder: "Seleccionar fecha",
+		})
+	</div>
+}
diff --git a/internals/ui/showcase/datepicker.templ b/internals/ui/showcase/datepicker_selected_date.templ
similarity index 61%
rename from internals/ui/showcase/datepicker.templ
rename to internals/ui/showcase/datepicker_selected_date.templ
index f9edbbd..e7878b8 100644
--- a/internals/ui/showcase/datepicker.templ
+++ b/internals/ui/showcase/datepicker_selected_date.templ
@@ -1,13 +1,16 @@
 package showcase
 
-import "github.com/axzilla/goilerplate/pkg/components"
+import (
+	"github.com/axzilla/goilerplate/pkg/components"
+	"time"
+)
 
-templ Datepicker() {
+templ DatepickerSelectedDate() {
 	@components.Datepicker(components.DatepickerProps{
 		ID:          "my-datepicker",
 		Name:        "selected-date",
 		Placeholder: "Select a date",
-		Format:      "YYYY-MM-DD",
+		Value:       time.Now(),
 		Class:       "w-full max-w-xs",
 	})
 }
diff --git a/pkg/components/datepicker.templ b/pkg/components/datepicker.templ
index fb50823..6ed33d6 100644
--- a/pkg/components/datepicker.templ
+++ b/pkg/components/datepicker.templ
@@ -3,247 +3,369 @@ package components
 import (
 	"github.com/axzilla/goilerplate/pkg/icons"
 	"github.com/axzilla/goilerplate/pkg/utils"
+	"time"
 )
 
+// DateFormat defines the available date formatting styles
+type DateFormat string
+
+const (
+	// DateFormatISO represents ISO format (YYYY-MM-DD)
+	DateFormatISO DateFormat = "iso"
+	// DateFormatEU represents European format (DD.MM.YYYY)
+	DateFormatEU DateFormat = "eu"
+	// DateFormatUK represents UK format (DD/MM/YYYY)
+	DateFormatUK DateFormat = "uk"
+	// DateFormatUS represents US format (MM/DD/YYYY)
+	DateFormatUS DateFormat = "us"
+	// DateFormatLONG represents long format (Month DD, YYYY)
+	DateFormatLONG DateFormat = "long"
+)
+
+// dateFormatMapping maps DateFormat to Go time format strings
+var dateFormatMapping = map[DateFormat]string{
+	DateFormatISO:  "2006-01-02",
+	DateFormatEU:   "02.01.2006",
+	DateFormatUK:   "02/01/2006",
+	DateFormatUS:   "01/02/2006",
+	DateFormatLONG: "January 2, 2006",
+}
+
+// DateLocale defines localization settings for the datepicker
+type DateLocale struct {
+	// MonthNames contains the localized names of months
+	MonthNames []string
+	// DayNames contains the localized abbreviated day names
+	DayNames []string
+}
+
+// DateLocaleDefault provides English localization
+var DateLocaleDefault = DateLocale{
+	MonthNames: []string{"January", "February", "March", "April", "May", "June",
+		"July", "August", "September", "October", "November", "December"},
+	DayNames: []string{"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"},
+}
+
+// Pre-defined locales for different languages
+var (
+	// DateLocaleSpanish provides Spanish localization
+	DateLocaleSpanish = DateLocale{
+		MonthNames: []string{"Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
+			"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"},
+		DayNames: []string{"Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"},
+	}
+
+	// DateLocaleGerman provides German localization
+	DateLocaleGerman = DateLocale{
+		MonthNames: []string{"Januar", "Februar", "März", "April", "Mai", "Juni",
+			"Juli", "August", "September", "Oktober", "November", "Dezember"},
+		DayNames: []string{"Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"},
+	}
+
+	// DateLocaleFrench provides French localization
+	DateLocaleFrench = DateLocale{
+		MonthNames: []string{"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+			"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"},
+		DayNames: []string{"Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"},
+	}
+
+	// DateLocaleItalian provides Italian localization
+	DateLocaleItalian = DateLocale{
+		MonthNames: []string{"Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
+			"Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"},
+		DayNames: []string{"Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"},
+	}
+)
+
+// DatepickerConfig combines format and locale settings
+type DatepickerConfig struct {
+	Format DateFormat
+	Locale DateLocale
+}
+
+// Pre-defined datepicker configurations
+var (
+	// DatePickerISO provides ISO format with default locale
+	DatePickerISO = DatepickerConfig{
+		Format: DateFormatISO,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerEU provides European format with default locale
+	DatePickerEU = DatepickerConfig{
+		Format: DateFormatEU,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUK provides UK format with default locale
+	DatePickerUK = DatepickerConfig{
+		Format: DateFormatUK,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUS provides US format with default locale
+	DatePickerUS = DatepickerConfig{
+		Format: DateFormatUS,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUS provides US format with default locale
+	DatePickerLONG = DatepickerConfig{
+		Format: DateFormatLONG,
+		Locale: DateLocaleDefault,
+	}
+)
+
+// NewDatepickerConfig creates a new configuration with specified format and locale
+func NewDatepickerConfig(format DateFormat, locale DateLocale) DatepickerConfig {
+	return DatepickerConfig{
+		Format: format,
+		Locale: locale,
+	}
+}
+
+// GetGoFormat returns the Go time format string for the current configuration
+func (c DatepickerConfig) GetGoFormat() string {
+	if format, ok := dateFormatMapping[c.Format]; ok {
+		return format
+	}
+	return dateFormatMapping[DateFormatISO] // Default to ISO
+}
+
+// DatepickerProps defines all available props for the Datepicker component
 type DatepickerProps struct {
-	// ID uniquely identifies the datepicker input
+	// ID sets the input element's ID
 	ID string
-
-	// Name sets the form field name
+	// Name sets the input element's name
 	Name string
-
-	// Placeholder shows helper text when empty
+	// Value sets the initial date
+	Value time.Time
+	// Config provides format and locale settings
+	Config DatepickerConfig
+	// Placeholder sets the input placeholder text
 	Placeholder string
-
-	// Format controls date string presentation
-	// Supported formats:
-	// - "M d, Y" (Jan 1, 2024)
-	// - "MM-DD-YYYY" (01-01-2024)
-	// - "DD-MM-YYYY" (01-01-2024)
-	// - "YYYY-MM-DD" (2024-01-01)
-	// - "D d M, Y" (Mon 1 Jan, 2024)
-	Format string
-
+	// Disabled controls whether the datepicker can be interacted with
+	Disabled bool
 	// Class adds custom CSS classes
 	Class string
-
-	Value string
-
-	// Attributes for additional HTML attributes and Alpine.js bindings
+	// Attributes allows additional HTML attributes
 	Attributes templ.Attributes
 }
 
-// Datepicker renders a calendar input component with popup date selection.
-// Uses Alpine.js for interactions and supports dark mode via Tailwind.
-// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/datepicker
+// Datepicker renders a localized date picker component with configurable formatting.
+// Features:
+// - Multiple date formats (ISO, EU, US, UK, Long)
+// - Localization support for months and weekdays
+// - Popup calendar for date selection
+// - Keyboard navigation support
+// - Responsive positioning
+// - Custom styling support
 //
 // Props:
-// - ID: Unique identifier for the input
+// - ID: Input element identifier
 // - Name: Form field name
-// - Placeholder: Helper text when empty
-// - Format: Date display format
+// - Value: Initial date value
+// - Config: Format and locale settings
+// - Placeholder: Input placeholder text
+// - Disabled: Interactivity state
 // - Class: Additional CSS classes
 // - Attributes: Additional HTML attributes
 templ Datepicker(props DatepickerProps) {
 	<div
-		data-date-format={ props.Format }
-		data-date-value={ props.Value }
-		x-data="{
-      datePickerOpen: false,
-      datePickerValue: $el.getAttribute('data-date-value'),
-      datePickerFormat: $el.getAttribute('data-date-format'),
-      datePickerMonth: '',
-      datePickerYear: '',
-      datePickerDay: '',
-      datePickerDaysInMonth: [],
-      datePickerBlankDaysInMonth: [],
-      datePickerMonthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      datePickerDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      position: 'bottom',
-      toggleDatePicker() {
-          this.datePickerOpen = !this.datePickerOpen;
-          if (this.datePickerOpen) {
-              this.$nextTick(() => this.updatePosition());
-          }
-      },
-      updatePosition() {
-          const trigger = this.$refs.datePickerInput;
-          const popup = this.$refs.datePickerPopup;
-          const rect = trigger.getBoundingClientRect();
-          const popupRect = popup.getBoundingClientRect();
-          const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-          
-          if (rect.bottom + popupRect.height > viewportHeight && rect.top > popupRect.height) {
-              this.position = 'top';
-          } else {
-              this.position = 'bottom';
-          }
-      },
-      datePickerDayClicked(day) {
-        let selectedDate = new Date(this.datePickerYear, this.datePickerMonth, day);
-        this.datePickerDay = day;
-        this.datePickerValue = this.datePickerFormatDate(selectedDate);
-        this.datePickerIsSelectedDate(day);
-        this.datePickerOpen = false;
-      },
-      datePickerPreviousMonth(){
-        if (this.datePickerMonth == 0) { 
-            this.datePickerYear--; 
-            this.datePickerMonth = 11; 
-        } else {
-            this.datePickerMonth--;
-        }
-        this.datePickerCalculateDays();
-      },
-      datePickerNextMonth(){
-        if (this.datePickerMonth == 11) { 
-            this.datePickerMonth = 0; 
-            this.datePickerYear++; 
-        } else { 
-            this.datePickerMonth++; 
-        }
-        this.datePickerCalculateDays();
-      },
-      datePickerIsSelectedDate(day) {
-        const d = new Date(this.datePickerYear, this.datePickerMonth, day);
-        return this.datePickerValue === this.datePickerFormatDate(d) ? true : false;
-      },
-      datePickerIsToday(day) {
-        const today = new Date();
-        const d = new Date(this.datePickerYear, this.datePickerMonth, day);
-        return today.toDateString() === d.toDateString() ? true : false;
-      },
-      datePickerCalculateDays() {
-        let daysInMonth = new Date(this.datePickerYear, this.datePickerMonth + 1, 0).getDate();
-        let dayOfWeek = new Date(this.datePickerYear, this.datePickerMonth).getDay();
-        let blankdaysArray = [];
-        for (var i = 1; i <= dayOfWeek; i++) {
-            blankdaysArray.push(i);
-        }
-        let daysArray = [];
-        for (var i = 1; i <= daysInMonth; i++) {
-            daysArray.push(i);
-        }
-        this.datePickerBlankDaysInMonth = blankdaysArray;
-        this.datePickerDaysInMonth = daysArray;
-      },
-      datePickerFormatDate(date) {
-        let formattedDay = this.datePickerDays[date.getDay()];
-        let formattedDate = ('0' + date.getDate()).slice(-2);
-        let formattedMonth = this.datePickerMonthNames[date.getMonth()];
-        let formattedMonthShortName = this.datePickerMonthNames[date.getMonth()].substring(0, 3);
-        let formattedMonthInNumber = ('0' + (parseInt(date.getMonth()) + 1)).slice(-2);
-        let formattedYear = date.getFullYear();
-
-        if (this.datePickerFormat === 'M d, Y') {
-          return `${formattedMonthShortName} ${formattedDate}, ${formattedYear}`;
-        }
-        if (this.datePickerFormat === 'MM-DD-YYYY') {
-          return `${formattedMonthInNumber}-${formattedDate}-${formattedYear}`;
-        }
-        if (this.datePickerFormat === 'DD-MM-YYYY') {
-          return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`;
-        }
-        if (this.datePickerFormat === 'YYYY-MM-DD') {
-          return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`;
-        }
-        if (this.datePickerFormat === 'D d M, Y') {
-          return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`;
-        }
-        
-        return `${formattedMonth} ${formattedDate}, ${formattedYear}`;
-      },
-    }"
-		x-init="
-        currentDate = new Date();
-        if (datePickerValue) {
-            currentDate = new Date(Date.parse(datePickerValue));
-        }
-        datePickerMonth = currentDate.getMonth();
-        datePickerYear = currentDate.getFullYear();
-        datePickerDay = currentDate.getDate();
-        datePickerValue = datePickerFormatDate(currentDate);
-        datePickerCalculateDays();
-    "
 		class={ utils.TwMerge("relative", props.Class) }
-		@resize.window="if (datePickerOpen) updatePosition()"
+		if props.Value != (time.Time{}) {
+			data-value={ props.Value.Format(props.Config.GetGoFormat()) }
+		}
+		data-format={ string(props.Config.Format) }
+		data-monthnames={ templ.JSONString(props.Config.Locale.MonthNames) }
+		data-daynames={ templ.JSONString(props.Config.Locale.DayNames) }
+		x-data="{
+            open: false,
+            value: null,
+            format: $el.dataset.format,
+            currentMonth: 5,
+            currentYear: new Date().getFullYear(),
+            monthDays: [],
+            blankDays: [],
+            months: JSON.parse($el.dataset.monthnames) || ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+            days: JSON.parse($el.dataset.daynames) || ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+
+            position: 'bottom',
+
+            init() {
+                const initialDate = $el.dataset.value ? new Date(this.parseDate($el.dataset.value)) : new Date();
+                this.currentMonth = initialDate.getMonth();
+                this.currentYear = initialDate.getFullYear();
+                this.calculateDays();
+                // Format the initial value using the correct locale
+                if ($el.dataset.value) {
+                    this.value = this.formatDate(initialDate);
+                }
+            },
+
+            toggleDatePicker() {
+                this.open = !this.open;
+                if (this.open) {
+                    this.$nextTick(() => this.updatePosition());
+                }
+            },
+
+            updatePosition() {
+                const trigger = this.$refs.datePickerInput;
+                const popup = this.$refs.datePickerPopup;
+                const rect = trigger.getBoundingClientRect();
+                const popupRect = popup.getBoundingClientRect();
+                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+                
+                if (rect.bottom + popupRect.height > viewportHeight && rect.top > popupRect.height) {
+                    this.position = 'top';
+                } else {
+                    this.position = 'bottom';
+                }
+            },
+
+            calculateDays() {
+                const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
+                const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+                
+                this.blankDays = Array.from({ length: firstDay }, (_, i) => i);
+                this.monthDays = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+            },
+
+			parseDate(dateStr) {
+				const parts = dateStr.split(/[-/.]/);
+				switch(this.format) {
+					case 'eu':
+						return `${parts[2]}-${parts[1]}-${parts[0]}`;
+					case 'us':
+						return `${parts[2]}-${parts[0]}-${parts[1]}`;
+					case 'uk':
+						return `${parts[2]}-${parts[1]}-${parts[0]}`;
+					case 'long':
+					case 'iso':
+					default:
+						return dateStr;  // Für ISO und long Format das Datum unverändert lassen
+				}
+			}, 
+
+			formatDate(date) {
+                const d = date.getDate().toString().padStart(2, '0');
+                const m = (date.getMonth() + 1).toString().padStart(2, '0');
+                const y = date.getFullYear();
+
+                switch(this.format) {
+                    case 'eu':
+                        return `${d}.${m}.${y}`;
+					case 'uk':
+						return `${d}/${m}/${y}`;
+                    case 'us':
+                        return `${m}/${d}/${y}`;
+                    case 'long':
+                        // Use the months array from the provided locale
+                        return `${this.months[date.getMonth()]} ${d}, ${y}`;
+					// case 'iso'
+                    default:
+                        return `${y}-${m}-${d}`;
+                }
+            },
+
+            isToday(day) {
+                const today = new Date();
+                const date = new Date(this.currentYear, this.currentMonth, day);
+                return date.toDateString() === today.toDateString();
+            },
+
+            isSelected(day) {
+                if (!this.value) return false;
+                const date = new Date(this.currentYear, this.currentMonth, day);
+                const selected = new Date(this.parseDate(this.value));
+                return date.toDateString() === selected.toDateString();
+            },
+
+            selectDate(day) {
+                const date = new Date(this.currentYear, this.currentMonth, day);
+                this.value = this.formatDate(date);
+                this.open = false;
+            }
+        }"
+		@resize.window="if (open) updatePosition()"
 	>
 		<div class="relative">
 			<input
+				x-ref="datePickerInput"
 				type="text"
 				id={ props.ID }
 				name={ props.Name }
-				placeholder={ props.Placeholder }
-				:value="datePickerValue"
-				x-modelable="datePickerValue"
+				if props.Placeholder != "" {
+					placeholder={ props.Placeholder }
+				} else {
+					placeholder="Select date"
+				}
+				disabled?={ props.Disabled }
+				:value="value"
+				x-modelable="value"
 				@click="toggleDatePicker()"
-				x-on:keydown.escape="datePickerOpen = false"
-				x-ref="datePickerInput"
-				class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
 				readonly
+				class="peer flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
 				{ props.Attributes... }
 			/>
-			<div
+			<button
+				type="button"
 				@click="toggleDatePicker()"
-				class="absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground"
+				disabled?={ props.Disabled }
+				class="peer-disabled:pointer-events-none peer-disabled:opacity-50 absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground"
 			>
 				@icons.Calendar(icons.IconProps{})
-			</div>
+			</button>
 		</div>
 		<div
-			x-show="datePickerOpen"
-			x-transition:enter="transition ease-out duration-100"
-			x-transition:enter-start="transform opacity-0 scale-95"
-			x-transition:enter-end="transform opacity-100 scale-100"
-			x-transition:leave="transition ease-in duration-75"
-			x-transition:leave-start="transform opacity-100 scale-100"
-			x-transition:leave-end="transform opacity-0 scale-95"
-			@click.away="datePickerOpen = false"
+			x-show="open"
 			x-ref="datePickerPopup"
-			:class="{
-                'top-full mt-1': position === 'bottom',
-                'bottom-full mb-1': position === 'top'
-            }"
-			class="absolute left-0 z-50 w-64 p-4 mt-1 antialiased bg-popover text-popover-foreground border rounded-lg shadow border-border"
+			@click.away="open = false"
+			x-transition.opacity
+			class="absolute left-0 z-50 mt-1 w-64 rounded-lg border bg-popover p-4 shadow-md"
+			:class="{'top-full mt-1': position === 'bottom','bottom-full mb-1': position === 'top'}"
 		>
-			<div class="flex items-center justify-between mb-2">
-				<div>
-					<span x-text="datePickerMonthNames[datePickerMonth]" class="text-lg font-bold"></span>
-					<span x-text="datePickerYear" class="ml-1 text-lg font-normal text-muted-foreground"></span>
-				</div>
-				<div>
-					<button @click="datePickerPreviousMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
-						@icons.ChevronLeft(icons.IconProps{Size: "16", Class: "text-muted-foreground"})
+			<div class="flex items-center justify-between mb-4">
+				<span x-text="months[currentMonth] + ' ' + currentYear" class="text-sm font-medium"></span>
+				<div class="flex gap-1">
+					<button
+						type="button"
+						@click="currentMonth--; if(currentMonth < 0) { currentMonth = 11; currentYear--; } calculateDays()"
+						class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
+					>
+						@icons.ChevronLeft(icons.IconProps{})
 					</button>
-					<button @click="datePickerNextMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
-						@icons.ChevronRight(icons.IconProps{Size: "16", Class: "text-muted-foreground"})
+					<button
+						type="button"
+						@click="currentMonth++; if(currentMonth > 11) { currentMonth = 0; currentYear++; } calculateDays()"
+						class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
+					>
+						@icons.ChevronRight(icons.IconProps{})
 					</button>
 				</div>
 			</div>
-			<div class="grid grid-cols-7 mb-3">
-				<template x-for="(day, index) in datePickerDays" :key="index">
-					<div class="px-0.5">
-						<div x-text="day" class="text-xs font-medium text-center text-muted-foreground"></div>
-					</div>
+			<div class="grid grid-cols-7 gap-1 mb-2">
+				<template x-for="day in days" :key="day">
+					<div class="text-center text-xs text-muted-foreground" x-text="day"></div>
 				</template>
 			</div>
-			<div class="grid grid-cols-7">
-				<template x-for="blankDay in datePickerBlankDaysInMonth">
-					<div class="p-1 text-sm text-center border border-transparent"></div>
+			<div class="grid grid-cols-7 gap-1">
+				<template x-for="blank in blankDays" :key="'blank' + blank">
+					<div class="h-8 w-8"></div>
 				</template>
-				<template x-for="(day, dayIndex) in datePickerDaysInMonth" :key="dayIndex">
-					<div class="px-0.5 mb-1 aspect-square">
-						<div
-							x-text="day"
-							@click="datePickerDayClicked(day)"
-							:class="{
-                'bg-muted text-muted-foreground': datePickerIsToday(day) == true, 
-                'text-foreground hover:bg-accent hover:text-accent-foreground': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false,
-                'bg-primary text-primary-foreground hover:bg-primary/90': datePickerIsSelectedDate(day) == true
-              }"
-							class="flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7"
-						></div>
-					</div>
+				<template x-for="day in monthDays" :key="day">
+					<button
+						type="button"
+						@click="selectDate(day)"
+						x-text="day"
+						:class="{
+                            'bg-primary text-primary-foreground': isSelected(day),
+                            'text-red-500': isToday(day) && !isSelected(day),
+                            'hover:bg-accent hover:text-accent-foreground': !isSelected(day)
+                        }"
+						class="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+					></button>
 				</template>
 			</div>
 		</div>
diff --git a/pkg/components/datepicker_templ.go b/pkg/components/datepicker_templ.go
index e8582cf..8f01723 100644
--- a/pkg/components/datepicker_templ.go
+++ b/pkg/components/datepicker_templ.go
@@ -11,45 +11,171 @@ import templruntime "github.com/a-h/templ/runtime"
 import (
 	"github.com/axzilla/goilerplate/pkg/icons"
 	"github.com/axzilla/goilerplate/pkg/utils"
+	"time"
 )
 
+// DateFormat defines the available date formatting styles
+type DateFormat string
+
+const (
+	// DateFormatISO represents ISO format (YYYY-MM-DD)
+	DateFormatISO DateFormat = "iso"
+	// DateFormatEU represents European format (DD.MM.YYYY)
+	DateFormatEU DateFormat = "eu"
+	// DateFormatUK represents UK format (DD/MM/YYYY)
+	DateFormatUK DateFormat = "uk"
+	// DateFormatUS represents US format (MM/DD/YYYY)
+	DateFormatUS DateFormat = "us"
+	// DateFormatLONG represents long format (Month DD, YYYY)
+	DateFormatLONG DateFormat = "long"
+)
+
+// dateFormatMapping maps DateFormat to Go time format strings
+var dateFormatMapping = map[DateFormat]string{
+	DateFormatISO:  "2006-01-02",
+	DateFormatEU:   "02.01.2006",
+	DateFormatUK:   "02/01/2006",
+	DateFormatUS:   "01/02/2006",
+	DateFormatLONG: "January 2, 2006",
+}
+
+// DateLocale defines localization settings for the datepicker
+type DateLocale struct {
+	// MonthNames contains the localized names of months
+	MonthNames []string
+	// DayNames contains the localized abbreviated day names
+	DayNames []string
+}
+
+// DateLocaleDefault provides English localization
+var DateLocaleDefault = DateLocale{
+	MonthNames: []string{"January", "February", "March", "April", "May", "June",
+		"July", "August", "September", "October", "November", "December"},
+	DayNames: []string{"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"},
+}
+
+// Pre-defined locales for different languages
+var (
+	// DateLocaleSpanish provides Spanish localization
+	DateLocaleSpanish = DateLocale{
+		MonthNames: []string{"Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
+			"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"},
+		DayNames: []string{"Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"},
+	}
+
+	// DateLocaleGerman provides German localization
+	DateLocaleGerman = DateLocale{
+		MonthNames: []string{"Januar", "Februar", "März", "April", "Mai", "Juni",
+			"Juli", "August", "September", "Oktober", "November", "Dezember"},
+		DayNames: []string{"Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"},
+	}
+
+	// DateLocaleFrench provides French localization
+	DateLocaleFrench = DateLocale{
+		MonthNames: []string{"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+			"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"},
+		DayNames: []string{"Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"},
+	}
+
+	// DateLocaleItalian provides Italian localization
+	DateLocaleItalian = DateLocale{
+		MonthNames: []string{"Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
+			"Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"},
+		DayNames: []string{"Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"},
+	}
+)
+
+// DatepickerConfig combines format and locale settings
+type DatepickerConfig struct {
+	Format DateFormat
+	Locale DateLocale
+}
+
+// Pre-defined datepicker configurations
+var (
+	// DatePickerISO provides ISO format with default locale
+	DatePickerISO = DatepickerConfig{
+		Format: DateFormatISO,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerEU provides European format with default locale
+	DatePickerEU = DatepickerConfig{
+		Format: DateFormatEU,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUK provides UK format with default locale
+	DatePickerUK = DatepickerConfig{
+		Format: DateFormatUK,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUS provides US format with default locale
+	DatePickerUS = DatepickerConfig{
+		Format: DateFormatUS,
+		Locale: DateLocaleDefault,
+	}
+
+	// DatePickerUS provides US format with default locale
+	DatePickerLONG = DatepickerConfig{
+		Format: DateFormatLONG,
+		Locale: DateLocaleDefault,
+	}
+)
+
+// NewDatepickerConfig creates a new configuration with specified format and locale
+func NewDatepickerConfig(format DateFormat, locale DateLocale) DatepickerConfig {
+	return DatepickerConfig{
+		Format: format,
+		Locale: locale,
+	}
+}
+
+// GetGoFormat returns the Go time format string for the current configuration
+func (c DatepickerConfig) GetGoFormat() string {
+	if format, ok := dateFormatMapping[c.Format]; ok {
+		return format
+	}
+	return dateFormatMapping[DateFormatISO] // Default to ISO
+}
+
+// DatepickerProps defines all available props for the Datepicker component
 type DatepickerProps struct {
-	// ID uniquely identifies the datepicker input
+	// ID sets the input element's ID
 	ID string
-
-	// Name sets the form field name
+	// Name sets the input element's name
 	Name string
-
-	// Placeholder shows helper text when empty
+	// Value sets the initial date
+	Value time.Time
+	// Config provides format and locale settings
+	Config DatepickerConfig
+	// Placeholder sets the input placeholder text
 	Placeholder string
-
-	// Format controls date string presentation
-	// Supported formats:
-	// - "M d, Y" (Jan 1, 2024)
-	// - "MM-DD-YYYY" (01-01-2024)
-	// - "DD-MM-YYYY" (01-01-2024)
-	// - "YYYY-MM-DD" (2024-01-01)
-	// - "D d M, Y" (Mon 1 Jan, 2024)
-	Format string
-
+	// Disabled controls whether the datepicker can be interacted with
+	Disabled bool
 	// Class adds custom CSS classes
 	Class string
-
-	Value string
-
-	// Attributes for additional HTML attributes and Alpine.js bindings
+	// Attributes allows additional HTML attributes
 	Attributes templ.Attributes
 }
 
-// Datepicker renders a calendar input component with popup date selection.
-// Uses Alpine.js for interactions and supports dark mode via Tailwind.
-// For detailed examples and usage guides, visit https://goilerplate.com/docs/components/datepicker
+// Datepicker renders a localized date picker component with configurable formatting.
+// Features:
+// - Multiple date formats (ISO, EU, US, UK, Long)
+// - Localization support for months and weekdays
+// - Popup calendar for date selection
+// - Keyboard navigation support
+// - Responsive positioning
+// - Custom styling support
 //
 // Props:
-// - ID: Unique identifier for the input
+// - ID: Input element identifier
 // - Name: Form field name
-// - Placeholder: Helper text when empty
-// - Format: Date display format
+// - Value: Initial date value
+// - Config: Format and locale settings
+// - Placeholder: Input placeholder text
+// - Disabled: Interactivity state
 // - Class: Additional CSS classes
 // - Attributes: Additional HTML attributes
 func Datepicker(props DatepickerProps) templ.Component {
@@ -78,85 +204,142 @@ func Datepicker(props DatepickerProps) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div data-date-format=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Format)
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 49, Col: 33}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 1, Col: 0}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" data-date-value=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 50, Col: 31}
+		if props.Value != (time.Time{}) {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" data-value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 string
+			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(props.Value.Format(props.Config.GetGoFormat()))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 177, Col: 62}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-data=\"{\n      datePickerOpen: false,\n      datePickerValue: $el.getAttribute(&#39;data-date-value&#39;),\n      datePickerFormat: $el.getAttribute(&#39;data-date-format&#39;),\n      datePickerMonth: &#39;&#39;,\n      datePickerYear: &#39;&#39;,\n      datePickerDay: &#39;&#39;,\n      datePickerDaysInMonth: [],\n      datePickerBlankDaysInMonth: [],\n      datePickerMonthNames: [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;August&#39;, &#39;September&#39;, &#39;October&#39;, &#39;November&#39;, &#39;December&#39;],\n      datePickerDays: [&#39;Sun&#39;, &#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;],\n      position: &#39;bottom&#39;,\n      toggleDatePicker() {\n          this.datePickerOpen = !this.datePickerOpen;\n          if (this.datePickerOpen) {\n              this.$nextTick(() =&gt; this.updatePosition());\n          }\n      },\n      updatePosition() {\n          const trigger = this.$refs.datePickerInput;\n          const popup = this.$refs.datePickerPopup;\n          const rect = trigger.getBoundingClientRect();\n          const popupRect = popup.getBoundingClientRect();\n          const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n          \n          if (rect.bottom + popupRect.height &gt; viewportHeight &amp;&amp; rect.top &gt; popupRect.height) {\n              this.position = &#39;top&#39;;\n          } else {\n              this.position = &#39;bottom&#39;;\n          }\n      },\n      datePickerDayClicked(day) {\n        let selectedDate = new Date(this.datePickerYear, this.datePickerMonth, day);\n        this.datePickerDay = day;\n        this.datePickerValue = this.datePickerFormatDate(selectedDate);\n        this.datePickerIsSelectedDate(day);\n        this.datePickerOpen = false;\n      },\n      datePickerPreviousMonth(){\n        if (this.datePickerMonth == 0) { \n            this.datePickerYear--; \n            this.datePickerMonth = 11; \n        } else {\n            this.datePickerMonth--;\n        }\n        this.datePickerCalculateDays();\n      },\n      datePickerNextMonth(){\n        if (this.datePickerMonth == 11) { \n            this.datePickerMonth = 0; \n            this.datePickerYear++; \n        } else { \n            this.datePickerMonth++; \n        }\n        this.datePickerCalculateDays();\n      },\n      datePickerIsSelectedDate(day) {\n        const d = new Date(this.datePickerYear, this.datePickerMonth, day);\n        return this.datePickerValue === this.datePickerFormatDate(d) ? true : false;\n      },\n      datePickerIsToday(day) {\n        const today = new Date();\n        const d = new Date(this.datePickerYear, this.datePickerMonth, day);\n        return today.toDateString() === d.toDateString() ? true : false;\n      },\n      datePickerCalculateDays() {\n        let daysInMonth = new Date(this.datePickerYear, this.datePickerMonth + 1, 0).getDate();\n        let dayOfWeek = new Date(this.datePickerYear, this.datePickerMonth).getDay();\n        let blankdaysArray = [];\n        for (var i = 1; i &lt;= dayOfWeek; i++) {\n            blankdaysArray.push(i);\n        }\n        let daysArray = [];\n        for (var i = 1; i &lt;= daysInMonth; i++) {\n            daysArray.push(i);\n        }\n        this.datePickerBlankDaysInMonth = blankdaysArray;\n        this.datePickerDaysInMonth = daysArray;\n      },\n      datePickerFormatDate(date) {\n        let formattedDay = this.datePickerDays[date.getDay()];\n        let formattedDate = (&#39;0&#39; + date.getDate()).slice(-2);\n        let formattedMonth = this.datePickerMonthNames[date.getMonth()];\n        let formattedMonthShortName = this.datePickerMonthNames[date.getMonth()].substring(0, 3);\n        let formattedMonthInNumber = (&#39;0&#39; + (parseInt(date.getMonth()) + 1)).slice(-2);\n        let formattedYear = date.getFullYear();\n\n        if (this.datePickerFormat === &#39;M d, Y&#39;) {\n          return `${formattedMonthShortName} ${formattedDate}, ${formattedYear}`;\n        }\n        if (this.datePickerFormat === &#39;MM-DD-YYYY&#39;) {\n          return `${formattedMonthInNumber}-${formattedDate}-${formattedYear}`;\n        }\n        if (this.datePickerFormat === &#39;DD-MM-YYYY&#39;) {\n          return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`;\n        }\n        if (this.datePickerFormat === &#39;YYYY-MM-DD&#39;) {\n          return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`;\n        }\n        if (this.datePickerFormat === &#39;D d M, Y&#39;) {\n          return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`;\n        }\n        \n        return `${formattedMonth} ${formattedDate}, ${formattedYear}`;\n      },\n    }\" x-init=\"\n        currentDate = new Date();\n        if (datePickerValue) {\n            currentDate = new Date(Date.parse(datePickerValue));\n        }\n        datePickerMonth = currentDate.getMonth();\n        datePickerYear = currentDate.getFullYear();\n        datePickerDay = currentDate.getDate();\n        datePickerValue = datePickerFormatDate(currentDate);\n        datePickerCalculateDays();\n    \" class=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" data-format=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(string(props.Config.Format))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 1, Col: 0}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 179, Col: 43}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" @resize.window=\"if (datePickerOpen) updatePosition()\"><div class=\"relative\"><input type=\"text\" id=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" data-monthnames=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.Config.Locale.MonthNames))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 174, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 180, Col: 68}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" data-daynames=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.Config.Locale.DayNames))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 181, Col: 64}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-data=\"{\n            open: false,\n            value: null,\n            format: $el.dataset.format,\n            currentMonth: 5,\n            currentYear: new Date().getFullYear(),\n            monthDays: [],\n            blankDays: [],\n            months: JSON.parse($el.dataset.monthnames) || [&#39;January&#39;, &#39;February&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;August&#39;, &#39;September&#39;, &#39;October&#39;, &#39;November&#39;, &#39;December&#39;],\n            days: JSON.parse($el.dataset.daynames) || [&#39;Mo&#39;, &#39;Tu&#39;, &#39;We&#39;, &#39;Th&#39;, &#39;Fr&#39;, &#39;Sa&#39;, &#39;Su&#39;],\n\n            position: &#39;bottom&#39;,\n\n            init() {\n                const initialDate = $el.dataset.value ? new Date(this.parseDate($el.dataset.value)) : new Date();\n                this.currentMonth = initialDate.getMonth();\n                this.currentYear = initialDate.getFullYear();\n                this.calculateDays();\n                // Format the initial value using the correct locale\n                if ($el.dataset.value) {\n                    this.value = this.formatDate(initialDate);\n                }\n            },\n\n            toggleDatePicker() {\n                this.open = !this.open;\n                if (this.open) {\n                    this.$nextTick(() =&gt; this.updatePosition());\n                }\n            },\n\n            updatePosition() {\n                const trigger = this.$refs.datePickerInput;\n                const popup = this.$refs.datePickerPopup;\n                const rect = trigger.getBoundingClientRect();\n                const popupRect = popup.getBoundingClientRect();\n                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n                \n                if (rect.bottom + popupRect.height &gt; viewportHeight &amp;&amp; rect.top &gt; popupRect.height) {\n                    this.position = &#39;top&#39;;\n                } else {\n                    this.position = &#39;bottom&#39;;\n                }\n            },\n\n            calculateDays() {\n                const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();\n                const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();\n                \n                this.blankDays = Array.from({ length: firstDay }, (_, i) =&gt; i);\n                this.monthDays = Array.from({ length: daysInMonth }, (_, i) =&gt; i + 1);\n            },\n\n\t\t\tparseDate(dateStr) {\n\t\t\t\tconst parts = dateStr.split(/[-/.]/);\n\t\t\t\tswitch(this.format) {\n\t\t\t\t\tcase &#39;eu&#39;:\n\t\t\t\t\t\treturn `${parts[2]}-${parts[1]}-${parts[0]}`;\n\t\t\t\t\tcase &#39;us&#39;:\n\t\t\t\t\t\treturn `${parts[2]}-${parts[0]}-${parts[1]}`;\n\t\t\t\t\tcase &#39;uk&#39;:\n\t\t\t\t\t\treturn `${parts[2]}-${parts[1]}-${parts[0]}`;\n\t\t\t\t\tcase &#39;long&#39;:\n\t\t\t\t\tcase &#39;iso&#39;:\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn dateStr;  // Für ISO und long Format das Datum unverändert lassen\n\t\t\t\t}\n\t\t\t}, \n\n\t\t\tformatDate(date) {\n                const d = date.getDate().toString().padStart(2, &#39;0&#39;);\n                const m = (date.getMonth() + 1).toString().padStart(2, &#39;0&#39;);\n                const y = date.getFullYear();\n\n                switch(this.format) {\n                    case &#39;eu&#39;:\n                        return `${d}.${m}.${y}`;\n\t\t\t\t\tcase &#39;uk&#39;:\n\t\t\t\t\t\treturn `${d}/${m}/${y}`;\n                    case &#39;us&#39;:\n                        return `${m}/${d}/${y}`;\n                    case &#39;long&#39;:\n                        // Use the months array from the provided locale\n                        return `${this.months[date.getMonth()]} ${d}, ${y}`;\n\t\t\t\t\t// case &#39;iso&#39;\n                    default:\n                        return `${y}-${m}-${d}`;\n                }\n            },\n\n            isToday(day) {\n                const today = new Date();\n                const date = new Date(this.currentYear, this.currentMonth, day);\n                return date.toDateString() === today.toDateString();\n            },\n\n            isSelected(day) {\n                if (!this.value) return false;\n                const date = new Date(this.currentYear, this.currentMonth, day);\n                const selected = new Date(this.parseDate(this.value));\n                return date.toDateString() === selected.toDateString();\n            },\n\n            selectDate(day) {\n                const date = new Date(this.currentYear, this.currentMonth, day);\n                this.value = this.formatDate(date);\n                this.open = false;\n            }\n        }\" @resize.window=\"if (open) updatePosition()\"><div class=\"relative\"><input x-ref=\"datePickerInput\" type=\"text\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 297, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" name=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 175, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 298, Col: 21}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" placeholder=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 176, Col: 35}
+		if props.Placeholder != "" {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" placeholder=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var10 string
+			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 300, Col: 36}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" placeholder=\"Select date\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
+		if props.Disabled {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" :value=\"datePickerValue\" x-modelable=\"datePickerValue\" @click=\"toggleDatePicker()\" x-on:keydown.escape=\"datePickerOpen = false\" x-ref=\"datePickerInput\" class=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\" readonly")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" :value=\"value\" x-modelable=\"value\" @click=\"toggleDatePicker()\" readonly class=\"peer flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -164,7 +347,17 @@ func Datepicker(props DatepickerProps) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div @click=\"toggleDatePicker()\" class=\"absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> <button type=\"button\" @click=\"toggleDatePicker()\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if props.Disabled {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"peer-disabled:pointer-events-none peer-disabled:opacity-50 absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -172,23 +365,23 @@ func Datepicker(props DatepickerProps) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div x-show=\"datePickerOpen\" x-transition:enter=\"transition ease-out duration-100\" x-transition:enter-start=\"transform opacity-0 scale-95\" x-transition:enter-end=\"transform opacity-100 scale-100\" x-transition:leave=\"transition ease-in duration-75\" x-transition:leave-start=\"transform opacity-100 scale-100\" x-transition:leave-end=\"transform opacity-0 scale-95\" @click.away=\"datePickerOpen = false\" x-ref=\"datePickerPopup\" :class=\"{\n                &#39;top-full mt-1&#39;: position === &#39;bottom&#39;,\n                &#39;bottom-full mb-1&#39;: position === &#39;top&#39;\n            }\" class=\"absolute left-0 z-50 w-64 p-4 mt-1 antialiased bg-popover text-popover-foreground border rounded-lg shadow border-border\"><div class=\"flex items-center justify-between mb-2\"><div><span x-text=\"datePickerMonthNames[datePickerMonth]\" class=\"text-lg font-bold\"></span> <span x-text=\"datePickerYear\" class=\"ml-1 text-lg font-normal text-muted-foreground\"></span></div><div><button @click=\"datePickerPreviousMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div><div x-show=\"open\" x-ref=\"datePickerPopup\" @click.away=\"open = false\" x-transition.opacity class=\"absolute left-0 z-50 mt-1 w-64 rounded-lg border bg-popover p-4 shadow-md\" :class=\"{&#39;top-full mt-1&#39;: position === &#39;bottom&#39;,&#39;bottom-full mb-1&#39;: position === &#39;top&#39;}\"><div class=\"flex items-center justify-between mb-4\"><span x-text=\"months[currentMonth] + &#39; &#39; + currentYear\" class=\"text-sm font-medium\"></span><div class=\"flex gap-1\"><button type=\"button\" @click=\"currentMonth--; if(currentMonth &lt; 0) { currentMonth = 11; currentYear--; } calculateDays()\" class=\"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = icons.ChevronLeft(icons.IconProps{Size: "16", Class: "text-muted-foreground"}).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = icons.ChevronLeft(icons.IconProps{}).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button @click=\"datePickerNextMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button type=\"button\" @click=\"currentMonth++; if(currentMonth &gt; 11) { currentMonth = 0; currentYear++; } calculateDays()\" class=\"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = icons.ChevronRight(icons.IconProps{Size: "16", Class: "text-muted-foreground"}).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = icons.ChevronRight(icons.IconProps{}).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div></div><div class=\"grid grid-cols-7 mb-3\"><template x-for=\"(day, index) in datePickerDays\" :key=\"index\"><div class=\"px-0.5\"><div x-text=\"day\" class=\"text-xs font-medium text-center text-muted-foreground\"></div></div></template></div><div class=\"grid grid-cols-7\"><template x-for=\"blankDay in datePickerBlankDaysInMonth\"><div class=\"p-1 text-sm text-center border border-transparent\"></div></template><template x-for=\"(day, dayIndex) in datePickerDaysInMonth\" :key=\"dayIndex\"><div class=\"px-0.5 mb-1 aspect-square\"><div x-text=\"day\" @click=\"datePickerDayClicked(day)\" :class=\"{\n                &#39;bg-muted text-muted-foreground&#39;: datePickerIsToday(day) == true, \n                &#39;text-foreground hover:bg-accent hover:text-accent-foreground&#39;: datePickerIsToday(day) == false &amp;&amp; datePickerIsSelectedDate(day) == false,\n                &#39;bg-primary text-primary-foreground hover:bg-primary/90&#39;: datePickerIsSelectedDate(day) == true\n              }\" class=\"flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7\"></div></div></template></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div></div><div class=\"grid grid-cols-7 gap-1 mb-2\"><template x-for=\"day in days\" :key=\"day\"><div class=\"text-center text-xs text-muted-foreground\" x-text=\"day\"></div></template></div><div class=\"grid grid-cols-7 gap-1\"><template x-for=\"blank in blankDays\" :key=\"&#39;blank&#39; + blank\"><div class=\"h-8 w-8\"></div></template><template x-for=\"day in monthDays\" :key=\"day\"><button type=\"button\" @click=\"selectDate(day)\" x-text=\"day\" :class=\"{\n                            &#39;bg-primary text-primary-foreground&#39;: isSelected(day),\n                            &#39;text-red-500&#39;: isToday(day) &amp;&amp; !isSelected(day),\n                            &#39;hover:bg-accent hover:text-accent-foreground&#39;: !isSelected(day)\n                        }\" class=\"inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"></button></template></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}