Docs: optimize TimePicker examples

Megabit · Dec 8, 2023 · 7aaede6 · 7aaede6
1 parent 0250917
commit 7aaede6
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 12 deletions.
diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -4332,9 +4332,17 @@ Task OnThemeColorChanged( string value )
 
         public const string BasicTimeEditExample = @"<TimeEdit TValue=""TimeSpan?"" />";
 
-        public const string BasicTimePickerExample = @"<TimePicker TValue=""TimeSpan?"" />";
+        public const string BasicTimePickerExample = @"<TimePicker TValue=""TimeSpan?"" @bind-Time=""@value"" />
 
-        public const string InlineTimePickerExample = @"<TimePicker TValue=""TimeSpan?"" Inline />";
+@code {
+    TimeSpan? value;
+}";
+
+        public const string InlineTimePickerExample = @"<TimePicker TValue=""TimeSpan?"" @bind-Time=""@value"" Inline />
+
+@code {
+    TimeSpan? value;
+}";
 
         public const string TimeEditShowPickerExample = @"<Field>
     <Button Color=""Color.Primary"" Clicked=""@(()=>timeEditRef.ShowPicker())"">
@@ -4368,11 +4376,21 @@ Task OnTimeChanged( TimeSpan? Time )
     }
 }";
 
-        public const string TimePickerNonStaticExample = @"<TimePicker TValue=""TimeSpan?"" StaticPicker=""false"" />";
+        public const string TimePickerNonStaticExample = @"<TimePicker TValue=""TimeSpan?"" @bind-Time=""@value"" StaticPicker=""false"" />
+
+@code {
+    TimeSpan? value;
+}";
+
+        public const string TimePickerWithDateTimeExample = @"<TimePicker TValue=""DateTime?"" @bind-Time=""@value"" />
+
+@code {
+    DateTime? value;
+}";
 
         public const string TimePickerWithIconExample = @"<Addons>
     <Addon AddonType=""AddonType.Body"">
-        <TimePicker @ref=""@timePicker"" TValue=""TimeSpan?"" />
+        <TimePicker @ref=""@timePicker"" TValue=""TimeSpan?"" @bind-Time=""@value"" />
     </Addon>
     <Addon AddonType=""AddonType.End"">
         <Button Color=""Color.Light"" Clicked=""@(()=>timePicker.ToggleAsync())"">
@@ -4382,6 +4400,8 @@ Task OnTimeChanged( TimeSpan? Time )
 </Addons>
 @code{
     TimePicker<TimeSpan?> timePicker;
+
+    TimeSpan? value;
 }";
 
         public const string BasicTooltipExample = @"<Tooltip Text=""Hello tooltip"">

diff --git a/...mentation/Blazorise.Docs/Pages/Docs/Components/Times/Code/BasicTimePickerExampleCode.html b/...mentation/Blazorise.Docs/Pages/Docs/Components/Times/Code/BasicTimePickerExampleCode.html
@@ -1,5 +1,10 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Time</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>value</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    TimeSpan? value;
+}
 </pre></div>
 </div>
diff --git a/...entation/Blazorise.Docs/Pages/Docs/Components/Times/Code/InlineTimePickerExampleCode.html b/...entation/Blazorise.Docs/Pages/Docs/Components/Times/Code/InlineTimePickerExampleCode.html
@@ -1,5 +1,10 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Inline</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Time</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>value</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Inline</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    TimeSpan? value;
+}
 </pre></div>
 </div>
diff --git a/...ation/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerNonStaticExampleCode.html b/...ation/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerNonStaticExampleCode.html
@@ -1,5 +1,10 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName">StaticPicker</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Time</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>value</span><span class="quot">&quot;</span> <span class="htmlAttributeName">StaticPicker</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    TimeSpan? value;
+}
 </pre></div>
 </div>
diff --git a/...on/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerWithDateTimeExampleCode.html b/...on/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerWithDateTimeExampleCode.html
@@ -0,0 +1,10 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">DateTime?</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Time</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>value</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    DateTime? value;
+}
+</pre></div>
+</div>
diff --git a/...tation/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerWithIconExampleCode.html b/...tation/Blazorise.Docs/Pages/Docs/Components/Times/Code/TimePickerWithIconExampleCode.html
@@ -2,7 +2,7 @@
 <div class="html"><pre>
 <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Addons</span><span class="htmlTagDelimiter">&gt;</span>
     <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Addon</span> <span class="htmlAttributeName">AddonType</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">AddonType</span><span class="enumValue">.Body</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
-        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>timePicker</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TimePicker</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>timePicker</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">TimeSpan?</span><span class="quot">&quot;</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-Time</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>value</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
     <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Addon</span><span class="htmlTagDelimiter">&gt;</span>
     <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Addon</span> <span class="htmlAttributeName">AddonType</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">AddonType</span><span class="enumValue">.End</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
         <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Light</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Clicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(()=&gt;timePicker.ToggleAsync())</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
@@ -14,6 +14,8 @@
 <div class="csharp"><pre>
 <span class="atSign">&#64;</span>code{
     TimePicker&lt;TimeSpan?&gt; timePicker;
+
+    TimeSpan? value;
 }
 </pre></div>
 </div>
diff --git a/...entation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/BasicTimePickerExample.razor b/...entation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/BasicTimePickerExample.razor
@@ -1,3 +1,7 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TimePicker TValue="TimeSpan?" />
+<TimePicker TValue="TimeSpan?" @bind-Time="@value" />
+
+@code {
+    TimeSpan? value;
+}
diff --git a/...ntation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/InlineTimePickerExample.razor b/...ntation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/InlineTimePickerExample.razor
@@ -1,3 +1,7 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TimePicker TValue="TimeSpan?" Inline />
+<TimePicker TValue="TimeSpan?" @bind-Time="@value" Inline />
+
+@code {
+    TimeSpan? value;
+}
diff --git a/...tion/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerNonStaticExample.razor b/...tion/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerNonStaticExample.razor
@@ -1,3 +1,7 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TimePicker TValue="TimeSpan?" StaticPicker="false" />
+<TimePicker TValue="TimeSpan?" @bind-Time="@value" StaticPicker="false" />
+
+@code {
+    TimeSpan? value;
+}
diff --git a/...n/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerWithDateTimeExample.razor b/...n/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerWithDateTimeExample.razor
@@ -0,0 +1,7 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<TimePicker TValue="DateTime?" @bind-Time="@value" />
+
+@code {
+    DateTime? value;
+}
diff --git a/...ation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerWithIconExample.razor b/...ation/Blazorise.Docs/Pages/Docs/Components/Times/Examples/TimePickerWithIconExample.razor
@@ -2,7 +2,7 @@
 
 <Addons>
     <Addon AddonType="AddonType.Body">
-        <TimePicker @ref="@timePicker" TValue="TimeSpan?" />
+        <TimePicker @ref="@timePicker" TValue="TimeSpan?" @bind-Time="@value" />
     </Addon>
     <Addon AddonType="AddonType.End">
         <Button Color="Color.Light" Clicked="@(()=>timePicker.ToggleAsync())">
@@ -12,4 +12,6 @@
 </Addons>
 @code{
     TimePicker<TimeSpan?> timePicker;
+
+    TimeSpan? value;
 }
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Times/TimePickerPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Times/TimePickerPage.razor
@@ -26,13 +26,24 @@
 
 <DocsPageSection>
     <DocsPageSectionHeader Title="Basic example">
+        In the following example, the Blazorise TimePicker is easily set up and bound to a value by setting the <Code>@@bind-</Code> directive.
     </DocsPageSectionHeader>
     <DocsPageSectionContent Outlined FullWidth>
         <BasicTimePickerExample />
     </DocsPageSectionContent>
     <DocsPageSectionSource Code="BasicTimePickerExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="DateTime example">
+        In the following example, the Blazorise TimePicker component is easily configured to bind with a <Code>DateTime?</Code> type, demonstrating its versatility.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <TimePickerWithDateTimeExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="TimePickerWithDateTimeExample" />
+</DocsPageSection>
+
 <DocsPageSection>
     <DocsPageSectionHeader Title="Add icon">
         To add icon you can combine <Code>TimePicker</Code> with an <Code>Addon</Code>.