date, time picker 2

BlazorFluentUI/Components/Layout/MainLayout.razor

@@ -18,9 +18,9 @@
         <FluentToastProvider MaxToastCount="10" />
     </FluentStack>
     <FluentFooter>
-        <FluentIcon Class="me-1" Value="@(new Icons.Regular.Size16.EmojiLaugh())"/>This site is powered by Blazor and MS Fluent UI
+        This site is powered by Blazor and MS Fluent UI
         <FluentSpacer />
-        ⓒ Peace
+        Peace
     </FluentFooter>
 </FluentLayout>
 

BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor

@@ -26,7 +26,7 @@
                             View="CalendarViews.Months"/>
             <p>Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))</p>
             <p>Panel: @(epickerMonth.ToString("yyyy-MM-dd"))</p>
-        </div
+        </div>
          <div>
             <h4>Year</h4>
             <FluentCalendar DisabledDateFunc="@DisabledYear" @bind-Value="eselectedYear" @bind-PickerMonth="epickerYear"

BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor

@@ -28,6 +28,19 @@
     </div>
 </FluentCard>
 
+<FluentLabel class="my-3" Typo="Typography.H4">Conversion</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    @* Default usage *@
+    <div>
+        <FluentDatePicker @bind-Value="MyDateTime" />
+        <FluentTimePicker @bind-Value="MyDateTime" />
+        <b>Date:</b> @(MyDateTime?.ToString("yyyy-MM-dd"))
+        <b>Time:</b> @(MyDateTime?.ToString("HH:mm"))
+    </div>
+</FluentCard>
+
 @code {
-    private DateTime? eval = DateTime.Now;
+    DateTime? eval = DateTime.Now;
+
+    DateTime? MyDateTime = DateTime.Now;
 }

BlazorFluentUI/wwwroot/app-cutom.css

@@ -32,4 +32,9 @@
 .fluent-fixed-w100 {
 	max-width: 100px;
 	min-width: 100px;
+}
+
+.fluent-calendar {
+	overflow-y: initial;
+	overflow-x: initial;
 }