tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

bootstrap-taghelpers.abp.io: added new tag-helper datepicker

pull/16261/head
Onur Pıçakcı 3 years ago
parent
2d456bcae8
commit
16c868d218
5 changed files with 915 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 749
      modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml
  2. 163
      modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs
  3. 1
      modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
  4. 1
      modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs
  5. 1
      modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs

749
modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml
View File

@ -0,0 +1,749 @@
@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.DatePickerModel
@{
ViewData["Title"] = "DatePicker";
}
@section styles {
<abp-style-bundle>
<abp-style src="/css/demo.css"/>
</abp-style-bundle>
}
@section scripts {
<script>
var newPicker = abp.libs.bootstrapDateRangePicker.createDateRangePicker(
{
label: "New JavaScript Picker",
startDate: "2020-01-01",
endDate: "2020-01-02",
singleOpenAndClearButton: false,
placeholder: "New Picker",
});
newPicker.insertBefore($('.test-picker').parent());
</script>
}
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<h2>DatePicker</h2>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-picker placeholder="New" single-open-and-clear-button="false" week-numbers="Iso" time-picker="true" required today-button-classes="btn primary" picker-id="testPicker" asp-for="DateTime"></abp-date-picker>
</div>
<div class="code-area test-picker">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTime DateTime { get; set; }
public void OnGet()
{
DateTime = DateTime == default ? DateTime.Now : DateTime;
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker placeholder="New" single-open-and-clear-button="false" week-numbers="Iso" time-picker="true" required today-button-classes="btn primary" picker-id="testPicker" asp-for="DateTime"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DateTime"&gt;DateTime&lt;/label&gt;&lt;span&gt; * &lt;/span&gt;
&lt;abp-date-picker placeholder="New" required="" data-show-i-s-o-week-numbers="true" data-time-picker="true" data-today-button-classes="btn primary" id="testPicker" data-single-open-and-clear-button="false" data-date="2023-04-12T17:56:33.1115260+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input placeholder="New" required="" type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DateTime" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" data-val="true" data-val-required="The DateTime field is required." id="DateTime" name="DateTime" value="Wed Apr 12 2023 17:56:33 GMT+0300"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-range-picker time-picker="true" asp-for-end="EndDate" asp-for-start="StartDate"></abp-date-range-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTime StartDate { get; set; }
[BindProperty]
public DateTime EndDate { get; set; }
public void OnGet()
{
EndDate = EndDate == default ? DateTime.Now : EndDate;
DateTime = DateTime == default ? DateTime.Now : DateTime;
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-range-picker time-picker="true" asp-for-end="EndDate" asp-for-start="StartDate"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="StartDate"&gt;StartDate&lt;/label&gt;
&lt;abp-date-range-picker data-time-picker="true" data-start-date="0001-01-01T00:00:00.0000000" data-end-date="2023-04-12T18:02:13.2033440+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" data-val="true" data-val-required="The StartDate field is required." id="StartDate" name="StartDate" value="Mon Jan 01 0001 00:00:00 GMT+0155"&gt;&lt;input data-end-date="true" type="hidden" data-val="true" data-val-required="The EndDate field is required." id="EndDate" name="EndDate" value="Wed Apr 12 2023 18:02:13 GMT+0300"&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTime"></abp-date-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTime? NullableDateTime { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTime"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="NullableDateTime"&gt;NullableDateTime&lt;/label&gt;
&lt;abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableDateTime" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="NullableDateTime" name="NullableDateTime" value="2023-04-12"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-range-picker clear-button="false" asp-for-end="NullableEndDate" asp-for-start="NullableStartDate"></abp-date-range-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTime? NullableStartDate { get; set; }
[BindProperty]
public DateTime? NullableEndDate { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTime"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="NullableStartDate"&gt;NullableStartDate&lt;/label&gt;
&lt;abp-date-range-picker&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableStartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableEndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="NullableStartDate" name="NullableStartDate" value=""&gt;&lt;input data-end-date="true" type="hidden" id="NullableEndDate" name="NullableEndDate" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="DateTimeDateTimeOffset"></abp-date-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTimeOffset DateTimeDateTimeOffset { get; set; }
public void OnGet()
{
DateTimeDateTimeOffset = DateTimeDateTimeOffset == default ? DateTimeOffset.Now : DateTimeDateTimeOffset;
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="DateTimeDateTimeOffset"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DateTimeDateTimeOffset"&gt;DateTimeDateTimeOffset&lt;/label&gt;
&lt;abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true" data-date="2023-04-12T18:10:05.6171150+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DateTimeDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" data-val="true" data-val-required="The DateTimeDateTimeOffset field is required." id="DateTimeDateTimeOffset" name="DateTimeDateTimeOffset" value="2023-04-12"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-range-picker clear-button="false" asp-for-end="EndDateTimeOffset" asp-for-start="StartDateTimeOffset"></abp-date-range-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTimeOffset StartDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset EndDateTimeOffset { get; set; }
public void OnGet()
{
StartDateTimeOffset = StartDateTimeOffset == default ? DateTimeOffset.Now : StartDateTimeOffset;
EndDateTimeOffset = EndDateTimeOffset == default ? DateTimeOffset.Now : EndDateTimeOffset;
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-range-picker clear-button="false" asp-for-end="EndDateTimeOffset" asp-for-start="StartDateTimeOffset"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="StartDateTimeOffset"&gt;StartDateTimeOffset&lt;/label&gt;
&lt;abp-date-range-picker data-start-date="2023-04-12T18:11:50.9560980+03:00" data-end-date="2023-04-12T18:11:50.9560980+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="StartDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="EndDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" data-val="true" data-val-required="The StartDateTimeOffset field is required." id="StartDateTimeOffset" name="StartDateTimeOffset" value="Wed Apr 12 2023 18:11:50 GMT+0300"&gt;&lt;input data-end-date="true" type="hidden" data-val="true" data-val-required="The EndDateTimeOffset field is required." id="EndDateTimeOffset" name="EndDateTimeOffset" value="Wed Apr 12 2023 18:11:50 GMT+0300"&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTimeDateTimeOffset"></abp-date-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTimeOffset DateTimeDateTimeOffset { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTimeDateTimeOffset"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="NullableDateTimeDateTimeOffset"&gt;NullableDateTimeDateTimeOffset&lt;/label&gt;
&lt;abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableDateTimeDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="NullableDateTimeDateTimeOffset" name="NullableDateTimeDateTimeOffset" value="2023-04-12"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-range-picker clear-button="false" asp-for-end="NullableEndDateTimeOffset" asp-for-start="NullableStartDateTimeOffset"></abp-date-range-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-range-picker clear-button="false" asp-for-end="NullableEndDateTimeOffset" asp-for-start="NullableStartDateTimeOffset"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="NullableStartDateTimeOffset"&gt;NullableStartDateTimeOffset&lt;/label&gt;
&lt;abp-date-range-picker&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableStartDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableEndDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="NullableStartDateTimeOffset" name="NullableStartDateTimeOffset" value=""&gt;&lt;input data-end-date="true" type="hidden" id="NullableEndDateTimeOffset" name="NullableEndDateTimeOffset" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="StringDate"></abp-date-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public string StringDate { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="StringDate"/&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="StringDate"&gt;StringDate&lt;/label&gt;
&lt;abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="StringDate" name="StringDate" value="2023-04-12"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-date-range-picker clear-button="false" asp-for-end="StringEndDate" asp-for-start="StringStartDate"></abp-date-range-picker>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
[BindProperty]
public string StringStartDate { get; set; }
[BindProperty]
public string StringEndDate { get; set; }
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-date-range-picker clear-button="false" asp-for-end="StringEndDate" asp-for-start="StringStartDate"&gt;&lt;/abp-date-range-picker&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="StringStartDate"&gt;StringStartDate&lt;/label&gt;
&lt;abp-date-range-picker&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringStartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringEndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="StringStartDate" name="StringStartDate" value=""&gt;&lt;input data-end-date="true" type="hidden" id="StringEndDate" name="StringEndDate" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h2>Dynamic Form</h2>
<div class="demo-with-code">
<div class="demo-area">
<abp-dynamic-form abp-model="DynamicFormExample">
</abp-dynamic-form>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Modal Class">
<pre><code>
public class DatePickerModel : PageModel
{
public class DynamicForm
{
[BindProperty]
[DateRangePicker("MyPicker",true)]
public DateTime StartDate { get; set; }
[BindProperty]
[DateRangePicker("MyPicker",false)]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime EndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime DateTime { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker2",true)]
public DateTime? NullableStartDate { get; set; }
[BindProperty]
[DateRangePicker("MyPicker2")]
public DateTime? NullableEndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime? NullableDateTime { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker3",true)]
public DateTimeOffset StartDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker3")]
public DateTimeOffset EndDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTimeOffset DateTimeDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker4",true)]
public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker4")]
public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTimeOffset? NullableDateTimeDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker5",true)]
public string StringStartDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker5")]
public string StringEndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DatePicker]
public string StringDate { get; set; }
}
public AbpDatePickerOptions DatePickerOptions { get; set; }
[BindProperty]
public DynamicForm DynamicFormExample { get; set; }
public void OnGet()
{
DynamicFormExample ??= new DynamicForm
{
StartDate = DateTime.Now,
EndDate = DateTime.Now,
DateTime = DateTime.Now,
StartDateTimeOffset = DateTimeOffset.Now,
EndDateTimeOffset = DateTimeOffset.Now,
DateTimeDateTimeOffset = DateTimeOffset.Now,
};
DatePickerOptions = new AbpDatePickerOptions();
DatePickerOptions.LinkedCalendars = false;
DatePickerOptions.Ranges = new List&lt;AbpDatePickerRange&gt;();
DatePickerOptions.Ranges.Add(new AbpDatePickerRange("Today", DateTime.Now, DateTime.Now));
}
public void OnPost()
{
return;
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-dynamic-form abp-model="DynamicFormExample"&gt;
&lt;/abp-dynamic-form&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_StartDate"&gt;StartDate&lt;/label&gt;
&lt;abp-date-range-picker id="MyPicker" data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}" data-start-date="2023-04-12T18:17:53.3007330+03:00" data-end-date="2023-04-12T18:17:53.3007340+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.EndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" data-val="true" data-val-required="The StartDate field is required." id="DynamicFormExample_StartDate" name="DynamicFormExample.StartDate" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;&lt;input data-end-date="true" type="hidden" data-val="true" data-val-required="The EndDate field is required." id="DynamicFormExample_EndDate" name="DynamicFormExample.EndDate" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_NullableStartDate"&gt;NullableStartDate&lt;/label&gt;
&lt;abp-date-range-picker id="MyPicker2" data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableStartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableEndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="DynamicFormExample_NullableStartDate" name="DynamicFormExample.NullableStartDate" value=""&gt;&lt;input data-end-date="true" type="hidden" id="DynamicFormExample_NullableEndDate" name="DynamicFormExample.NullableEndDate" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_StartDateTimeOffset"&gt;StartDateTimeOffset&lt;/label&gt;
&lt;abp-date-range-picker id="MyPicker3" data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}" data-start-date="2023-04-12T18:17:53.3007340+03:00" data-end-date="2023-04-12T18:17:53.3007340+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StartDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.EndDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" data-val="true" data-val-required="The StartDateTimeOffset field is required." id="DynamicFormExample_StartDateTimeOffset" name="DynamicFormExample.StartDateTimeOffset" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;&lt;input data-end-date="true" type="hidden" data-val="true" data-val-required="The EndDateTimeOffset field is required." id="DynamicFormExample_EndDateTimeOffset" name="DynamicFormExample.EndDateTimeOffset" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_NullableStartDateTimeOffset"&gt;NullableStartDateTimeOffset&lt;/label&gt;
&lt;abp-date-range-picker id="MyPicker4" data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableStartDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableEndDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="DynamicFormExample_NullableStartDateTimeOffset" name="DynamicFormExample.NullableStartDateTimeOffset" value=""&gt;&lt;input data-end-date="true" type="hidden" id="DynamicFormExample_NullableEndDateTimeOffset" name="DynamicFormExample.NullableEndDateTimeOffset" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_StringStartDate"&gt;StringStartDate&lt;/label&gt;
&lt;abp-date-range-picker id="MyPicker5" data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringStartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringEndDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-start-date="true" type="hidden" id="DynamicFormExample_StringStartDate" name="DynamicFormExample.StringStartDate" value=""&gt;&lt;input data-end-date="true" type="hidden" id="DynamicFormExample_StringEndDate" name="DynamicFormExample.StringEndDate" value=""&gt;
&lt;/abp-date-range-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_DateTime"&gt;DateTime&lt;/label&gt;
&lt;abp-date-picker data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}" data-date="2023-04-12T18:17:53.3007340+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.DateTime" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" data-val="true" data-val-required="The DateTime field is required." id="DynamicFormExample_DateTime" name="DynamicFormExample.DateTime" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_NullableDateTime"&gt;NullableDateTime&lt;/label&gt;
&lt;abp-date-picker data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableDateTime" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="DynamicFormExample_NullableDateTime" name="DynamicFormExample.NullableDateTime" value=""&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_DateTimeDateTimeOffset"&gt;DateTimeDateTimeOffset&lt;/label&gt;
&lt;abp-date-picker data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}" data-date="2023-04-12T18:17:53.3007340+03:00"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.DateTimeDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" data-val="true" data-val-required="The DateTimeDateTimeOffset field is required." id="DynamicFormExample_DateTimeDateTimeOffset" name="DynamicFormExample.DateTimeDateTimeOffset" value="Wed Apr 12 2023 18:17:53 GMT+0300"&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_NullableDateTimeDateTimeOffset"&gt;NullableDateTimeDateTimeOffset&lt;/label&gt;
&lt;abp-date-picker data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableDateTimeDateTimeOffset" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="DynamicFormExample_NullableDateTimeDateTimeOffset" name="DynamicFormExample.NullableDateTimeDateTimeOffset" value=""&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
&lt;div class="mb-3"&gt;
&lt;label class="form-label" for="DynamicFormExample_StringDate"&gt;StringDate&lt;/label&gt;
&lt;abp-date-picker data-linked-calendars="false" data-ranges="{&quot;Today&quot;:[&quot;2023-04-12T18:17:53.3007400+03:00&quot;,&quot;2023-04-12T18:17:53.3007400+03:00&quot;]}"&gt;
&lt;div class="input-group"&gt;
&lt;input type="text" autocomplete="off" class="form-control"&gt;
&lt;button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-times"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing..."&gt;
&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;/div&gt;&lt;span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringDate" data-valmsg-replace="true"&gt;&lt;/span&gt;&lt;input data-date="true" type="hidden" id="DynamicFormExample_StringDate" name="DynamicFormExample.StringDate" value=""&gt;
&lt;/abp-date-picker&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>

163
modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs
View File

@ -0,0 +1,163 @@
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components;
public class DatePickerModel : PageModel
{
[BindProperty]
public DateTime StartDate { get; set; }
[BindProperty]
public DateTime EndDate { get; set; }
[BindProperty]
public DateTime DateTime { get; set; }
[BindProperty]
public DateTime? NullableStartDate { get; set; }
[BindProperty]
public DateTime? NullableEndDate { get; set; }
[BindProperty]
public DateTime? NullableDateTime { get; set; }
[BindProperty]
public DateTimeOffset StartDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset EndDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset DateTimeDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
[BindProperty]
public DateTimeOffset? NullableDateTimeDateTimeOffset { get; set; }
[BindProperty]
public string StringStartDate { get; set; }
[BindProperty]
public string StringEndDate { get; set; }
[BindProperty]
public string StringDate { get; set; }
public class DynamicForm
{
[BindProperty]
[DateRangePicker("MyPicker",true)]
public DateTime StartDate { get; set; }
[BindProperty]
[DateRangePicker("MyPicker",false)]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime EndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime DateTime { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker2",true)]
public DateTime? NullableStartDate { get; set; }
[BindProperty]
[DateRangePicker("MyPicker2")]
public DateTime? NullableEndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTime? NullableDateTime { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker3",true)]
public DateTimeOffset StartDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker3")]
public DateTimeOffset EndDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTimeOffset DateTimeDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker4",true)]
public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker4")]
public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
public DateTimeOffset? NullableDateTimeDateTimeOffset { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker5",true)]
public string StringStartDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DateRangePicker("MyPicker5")]
public string StringEndDate { get; set; }
[BindProperty]
[DatePickerOptions(nameof(DatePickerOptions))]
[DatePicker]
public string StringDate { get; set; }
}
public AbpDatePickerOptions DatePickerOptions { get; set; }
[BindProperty]
public DynamicForm DynamicFormExample { get; set; }
public void OnGet()
{
StartDate = StartDate == default ? DateTime.Now : StartDate;
EndDate = EndDate == default ? DateTime.Now : EndDate;
DateTime = DateTime == default ? DateTime.Now : DateTime;
StartDateTimeOffset = StartDateTimeOffset == default ? DateTimeOffset.Now : StartDateTimeOffset;
EndDateTimeOffset = EndDateTimeOffset == default ? DateTimeOffset.Now : EndDateTimeOffset;
DateTimeDateTimeOffset = DateTimeDateTimeOffset == default ? DateTimeOffset.Now : DateTimeDateTimeOffset;
DynamicFormExample ??= new DynamicForm {
StartDate = DateTime.Now,
EndDate = DateTime.Now,
DateTime = DateTime.Now,
StartDateTimeOffset = DateTimeOffset.Now,
EndDateTimeOffset = DateTimeOffset.Now,
DateTimeDateTimeOffset = DateTimeOffset.Now,
};
DatePickerOptions = new AbpDatePickerOptions();
DatePickerOptions.LinkedCalendars = false;
DatePickerOptions.Ranges = new List<AbpDatePickerRange>();
DatePickerOptions.Ranges.Add(new AbpDatePickerRange("Today", DateTime.Now, DateTime.Now));
}
public void OnPost()
{
return;
}
}

1
modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
View File

@ -17,6 +17,7 @@
<li><a asp-page="Components/Cards">Cards</a></li>
<li><a asp-page="Components/Carousel">Carousel</a></li>
<li><a asp-page="Components/collapse">Collapse</a></li>
<li><a asp-page="Components/DatePicker">DatePicker & DateRangePicker</a></li>
<li><a asp-page="Components/Dropdowns">Dropdowns</a></li>
<li><a asp-page="Components/DynamicForms">Dynamic Forms</a></li>
<li><a asp-page="Components/FormElements">Form Elements</a></li>

1
modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs
View File

@ -32,6 +32,7 @@ public class BootstrapDemoMenuContributor : IMenuContributor
new ApplicationMenuItem(BootstrapDemoMenus.Components.Cards, "Cards", url: "/Components/Cards"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.Carousel, "Carousel", url: "/Components/Carousel"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.Collapse, "Collapse", url: "/Components/Collapse"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.DatePicker, "DatePicker & DateRangePicker", url: "/Components/DatePicker"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.Dropdowns, "Dropdowns", url: "/Components/Dropdowns"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.DynamicForms, "Dynamic Forms", url: "/Components/DynamicForms"),
new ApplicationMenuItem(BootstrapDemoMenus.Components.FormElements, "Form Elements", url: "/Components/FormElements"),

1
modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs
View File

@ -17,6 +17,7 @@ public class BootstrapDemoMenus
public const string Cards = Root + ".Cards";
public const string Carousel = Root + ".Carousel";
public const string Collapse = Root + ".Collapse";
public const string DatePicker = Root + ".DatePicker";
public const string Dropdowns = Root + ".Dropdowns";
public const string DynamicForms = Root + ".DynamicForms";
public const string FormElements = Root + ".FormElements";

Write Preview
Loading…
Cancel
Save