From 7057a884a4722540d282f384471aa37904a14c97 Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Tue, 30 Jun 2026 16:24:22 +0300
Subject: [PATCH] Implement a basic CalendarDatePicker mimicking other pickers

---
 .../Pages/DateTimePickerDemo.axaml            | 28 ++++++
 Material.Styles/MaterialToolKit.xaml          |  1 +
 .../Resources/Themes/CalendarDatePicker.axaml | 92 +++++++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 Material.Styles/Resources/Themes/CalendarDatePicker.axaml

diff --git a/Material.Avalonia.Demo/Pages/DateTimePickerDemo.axaml b/Material.Avalonia.Demo/Pages/DateTimePickerDemo.axaml
index 76f4032a..13f85dfc 100644
--- a/Material.Avalonia.Demo/Pages/DateTimePickerDemo.axaml
+++ b/Material.Avalonia.Demo/Pages/DateTimePickerDemo.axaml
@@ -45,6 +45,34 @@
       </StackPanel>
     </StackPanel>
 
+    <TextBlock Classes="Headline6 Subheadline2" Text="CalendarDatePicker" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
+        <TextBlock Text="{Binding #CalendarDatePicker0.SelectedDate, FallbackValue=Not selected}" />
+        <showMeTheXaml:XamlDisplay UniqueId="CalendarDatePicker0">
+          <CalendarDatePicker Name="CalendarDatePicker0" />
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+
+      <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
+        <TextBlock Text="{Binding #CalendarDatePicker1.SelectedDate}" />
+        <showMeTheXaml:XamlDisplay UniqueId="CalendarDatePicker1">
+          <CalendarDatePicker Name="CalendarDatePicker1"
+                              assists:TextFieldAssist.Label="This is a date actually"
+                              SelectedDate="09/26/2021" />
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+
+      <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
+        <TextBlock Text="With watermark" />
+        <showMeTheXaml:XamlDisplay UniqueId="CalendarDatePicker2">
+          <CalendarDatePicker Name="CalendarDatePicker2"
+                              UseFloatingPlaceholder="True"
+                              PlaceholderText="Pick a day" />
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+    </StackPanel>
+
     <TextBlock Classes="Headline6 Subheadline2" Text="TimePicker" />
     <StackPanel Orientation="Horizontal">
       <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
diff --git a/Material.Styles/MaterialToolKit.xaml b/Material.Styles/MaterialToolKit.xaml
index a220c5f4..5293bcd1 100644
--- a/Material.Styles/MaterialToolKit.xaml
+++ b/Material.Styles/MaterialToolKit.xaml
@@ -34,6 +34,7 @@
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/Calendar.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarButton.axaml" />
+        <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarDatePicker.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarDayButton.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/CalendarItem.axaml" />
         <ResourceInclude Source="avares://Material.Styles/Resources/Themes/Carousel.axaml" />
diff --git a/Material.Styles/Resources/Themes/CalendarDatePicker.axaml b/Material.Styles/Resources/Themes/CalendarDatePicker.axaml
new file mode 100644
index 00000000..aed271f0
--- /dev/null
+++ b/Material.Styles/Resources/Themes/CalendarDatePicker.axaml
@@ -0,0 +1,92 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:assists="clr-namespace:Material.Styles.Assists"
+                    xmlns:controls="clr-namespace:Material.Styles.Controls">
+  <Design.PreviewWith>
+    <StackPanel Margin="20 20 200 600" Spacing="16">
+      <CalendarDatePicker />
+      <CalendarDatePicker SelectedDate="2026-06-30" assists:TextFieldAssist.Label="Birthday" />
+      <CalendarDatePicker IsEnabled="False" assists:TextFieldAssist.Label="Disabled" />
+    </StackPanel>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="MaterialCalendarDatePicker" TargetType="CalendarDatePicker">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="0" />
+    <Setter Property="MinWidth" Value="120" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="assists:TextFieldAssist.Label" Value="Date" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DataValidationErrors>
+          <Panel>
+            <!-- TODO: Make TextBox writeable -->
+            <!-- TODO: allow use different text boxes style-->
+            <TextBox Name="PART_TextBox"
+                     assists:TextFieldAssist.Label="{TemplateBinding assists:TextFieldAssist.Label}"
+                     Foreground="{TemplateBinding Foreground}"
+                     PlaceholderText="{TemplateBinding PlaceholderText}"
+                     UseFloatingPlaceholder="{TemplateBinding UseFloatingPlaceholder}"
+                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
+              <TextBox.InnerRightContent>
+                <Button Name="PART_Button"
+                        Theme="{StaticResource MaterialFlatButton}"
+                        Focusable="False"
+                        Width="36" Height="36"
+                        Padding="0"
+                        Margin="8 8 8 6"
+                        Foreground="{DynamicResource MaterialBodyBrush}">
+                  <controls:MaterialInternalIcon Kind="Calendar"
+                                                 Width="20"
+                                                 Height="20" />
+                </Button>
+              </TextBox.InnerRightContent>
+            </TextBox>
+            <Panel Name="PART_PopupContainer">
+              <Popup Name="PART_Popup"
+                     PlacementTarget="{TemplateBinding}"
+                     IsLightDismissEnabled="True"
+                     VerticalOffset="-16">
+                <controls:Card Name="PART_Card" Padding="0" Margin="8">
+                  <Calendar Name="PART_Calendar"
+                            FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                            IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                            SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}"
+                            DisplayDate="{TemplateBinding DisplayDate}"
+                            DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                            DisplayDateEnd="{TemplateBinding DisplayDateEnd}" />
+                </controls:Card>
+              </Popup>
+            </Panel>
+          </Panel>
+        </DataValidationErrors>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ Panel#PART_PopupContainer">
+      <Setter Property="Margin" Value="-8" />
+    </Style>
+
+    <Style Selector="^ /template/ TextBox#PART_TextBox">
+      <Setter Property="Margin" Value="0" />
+      <Setter Property="IsReadOnly" Value="True" />
+    </Style>
+
+    <!-- Disabled State -->
+    <Style Selector="^:disabled /template/ Button#PART_Button">
+      <Setter Property="Foreground" Value="{DynamicResource MaterialBodyBrush}" />
+      <Setter Property="Opacity" Value="0.38" />
+    </Style>
+  </ControlTheme>
+
+  <!-- Default theme -->
+  <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker"
+                BasedOn="{StaticResource MaterialCalendarDatePicker}" />
+</ResourceDictionary>