diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml new file mode 100644 index 0000000000..4d426701d1 --- /dev/null +++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml @@ -0,0 +1,749 @@ +@page +@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.DatePickerModel + +@{ + ViewData["Title"] = "DatePicker"; +} + +@section styles { + + + +} + +@section scripts { + +} + + + + + +

DatePicker

+ + +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTime DateTime { get; set; }
+
+    public void OnGet()
+    {
+        DateTime = DateTime == default ? DateTime.Now : DateTime;
+    }
+}
+
+ + + 

+<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"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="DateTime">DateTime</label><span> * </span>
+    <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">
+        <div class="input-group">
+            <input placeholder="New" required="" type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DateTime" data-valmsg-replace="true"></span><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">
+    </abp-date-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+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;
+    }
+}
+
+ + + 

+<abp-date-range-picker time-picker="true" asp-for-end="EndDate" asp-for-start="StartDate"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="StartDate">StartDate</label>
+    <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">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span><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"><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">
+    </abp-date-range-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTime? NullableDateTime { get; set; }
+}
+
+ + + 

+<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTime"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="NullableDateTime">NullableDateTime</label>
+    <abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableDateTime" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="NullableDateTime" name="NullableDateTime" value="2023-04-12">
+    </abp-date-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTime? NullableStartDate { get; set; }
+        
+    [BindProperty]
+    public DateTime? NullableEndDate { get; set; }
+}
+
+ + + 

+<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTime"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="NullableStartDate">NullableStartDate</label>
+    <abp-date-range-picker>
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableStartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableEndDate" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="NullableStartDate" name="NullableStartDate" value=""><input data-end-date="true" type="hidden" id="NullableEndDate" name="NullableEndDate" value="">
+    </abp-date-range-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTimeOffset DateTimeDateTimeOffset { get; set; }
+
+    public void OnGet()
+    {
+        DateTimeDateTimeOffset = DateTimeDateTimeOffset == default ? DateTimeOffset.Now : DateTimeDateTimeOffset;
+    }
+}
+
+ + + 

+<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="DateTimeDateTimeOffset"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="DateTimeDateTimeOffset">DateTimeDateTimeOffset</label>
+    <abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true" data-date="2023-04-12T18:10:05.6171150+03:00">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DateTimeDateTimeOffset" data-valmsg-replace="true"></span><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">
+    </abp-date-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+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;
+    }
+}
+
+ + + 

+<abp-date-range-picker clear-button="false" asp-for-end="EndDateTimeOffset" asp-for-start="StartDateTimeOffset"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="StartDateTimeOffset">StartDateTimeOffset</label>
+    <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">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="StartDateTimeOffset" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="EndDateTimeOffset" data-valmsg-replace="true"></span><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"><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">
+    </abp-date-range-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTimeOffset DateTimeDateTimeOffset { get; set; }
+}
+
+ + + 

+<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="NullableDateTimeDateTimeOffset"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="NullableDateTimeDateTimeOffset">NullableDateTimeDateTimeOffset</label>
+    <abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableDateTimeDateTimeOffset" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="NullableDateTimeDateTimeOffset" name="NullableDateTimeDateTimeOffset" value="2023-04-12">
+    </abp-date-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
+        
+    [BindProperty]
+    public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
+}
+
+ + + 

+<abp-date-range-picker clear-button="false" asp-for-end="NullableEndDateTimeOffset" asp-for-start="NullableStartDateTimeOffset"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="NullableStartDateTimeOffset">NullableStartDateTimeOffset</label>
+    <abp-date-range-picker>
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableStartDateTimeOffset" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="NullableEndDateTimeOffset" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="NullableStartDateTimeOffset" name="NullableStartDateTimeOffset" value=""><input data-end-date="true" type="hidden" id="NullableEndDateTimeOffset" name="NullableEndDateTimeOffset" value="">
+    </abp-date-range-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+    [BindProperty]
+    public string StringDate { get; set; }
+}
+
+ + + 

+<abp-date-picker auto-update-input="true" today-button-classes="btn primary" asp-for="StringDate"/>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="StringDate">StringDate</label>
+    <abp-date-picker data-today-button-classes="btn primary" data-auto-update-input="true">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary d-none" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="clear" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringDate" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="StringDate" name="StringDate" value="2023-04-12">
+    </abp-date-picker>
+</div>
+
+ + +
+
+ +
+
+ +
+
+ + + 

+public class DatePickerModel : PageModel
+{
+   [BindProperty]
+    public string StringStartDate { get; set; }
+       
+    [BindProperty]
+    public string StringEndDate { get; set; }
+}
+
+ + + 

+<abp-date-range-picker clear-button="false" asp-for-end="StringEndDate" asp-for-start="StringStartDate"></abp-date-range-picker>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="StringStartDate">StringStartDate</label>
+    <abp-date-range-picker>
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringStartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="StringEndDate" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="StringStartDate" name="StringStartDate" value=""><input data-end-date="true" type="hidden" id="StringEndDate" name="StringEndDate" value="">
+    </abp-date-range-picker>
+</div>
+
+ + +
+
+ +

Dynamic Form

+ + +
+
+ + +
+
+ + + 

+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<AbpDatePickerRange>();
+       DatePickerOptions.Ranges.Add(new AbpDatePickerRange("Today", DateTime.Now, DateTime.Now));
+   }
+   
+   public void OnPost()
+   {
+       return;
+   }
+}
+
+ + + 

+<abp-dynamic-form abp-model="DynamicFormExample">
+</abp-dynamic-form>
+
+ + + 

+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_StartDate">StartDate</label>
+    <abp-date-range-picker id="MyPicker" data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}" data-start-date="2023-04-12T18:17:53.3007330+03:00" data-end-date="2023-04-12T18:17:53.3007340+03:00">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.EndDate" data-valmsg-replace="true"></span><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"><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">
+    </abp-date-range-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_NullableStartDate">NullableStartDate</label>
+    <abp-date-range-picker id="MyPicker2" data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableStartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableEndDate" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="DynamicFormExample_NullableStartDate" name="DynamicFormExample.NullableStartDate" value=""><input data-end-date="true" type="hidden" id="DynamicFormExample_NullableEndDate" name="DynamicFormExample.NullableEndDate" value="">
+    </abp-date-range-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_StartDateTimeOffset">StartDateTimeOffset</label>
+    <abp-date-range-picker id="MyPicker3" data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}" data-start-date="2023-04-12T18:17:53.3007340+03:00" data-end-date="2023-04-12T18:17:53.3007340+03:00">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StartDateTimeOffset" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.EndDateTimeOffset" data-valmsg-replace="true"></span><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"><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">
+    </abp-date-range-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_NullableStartDateTimeOffset">NullableStartDateTimeOffset</label>
+    <abp-date-range-picker id="MyPicker4" data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableStartDateTimeOffset" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableEndDateTimeOffset" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="DynamicFormExample_NullableStartDateTimeOffset" name="DynamicFormExample.NullableStartDateTimeOffset" value=""><input data-end-date="true" type="hidden" id="DynamicFormExample_NullableEndDateTimeOffset" name="DynamicFormExample.NullableEndDateTimeOffset" value="">
+    </abp-date-range-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_StringStartDate">StringStartDate</label>
+    <abp-date-range-picker id="MyPicker5" data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringStartDate" data-valmsg-replace="true"></span><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringEndDate" data-valmsg-replace="true"></span><input data-start-date="true" type="hidden" id="DynamicFormExample_StringStartDate" name="DynamicFormExample.StringStartDate" value=""><input data-end-date="true" type="hidden" id="DynamicFormExample_StringEndDate" name="DynamicFormExample.StringEndDate" value="">
+    </abp-date-range-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_DateTime">DateTime</label>
+    <abp-date-picker data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}" data-date="2023-04-12T18:17:53.3007340+03:00">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.DateTime" data-valmsg-replace="true"></span><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">
+    </abp-date-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_NullableDateTime">NullableDateTime</label>
+    <abp-date-picker data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableDateTime" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="DynamicFormExample_NullableDateTime" name="DynamicFormExample.NullableDateTime" value="">
+    </abp-date-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_DateTimeDateTimeOffset">DateTimeDateTimeOffset</label>
+    <abp-date-picker data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}" data-date="2023-04-12T18:17:53.3007340+03:00">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.DateTimeDateTimeOffset" data-valmsg-replace="true"></span><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">
+    </abp-date-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_NullableDateTimeDateTimeOffset">NullableDateTimeDateTimeOffset</label>
+    <abp-date-picker data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.NullableDateTimeDateTimeOffset" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="DynamicFormExample_NullableDateTimeDateTimeOffset" name="DynamicFormExample.NullableDateTimeDateTimeOffset" value="">
+    </abp-date-picker>
+</div>
+<div class="mb-3">
+    <label class="form-label" for="DynamicFormExample_StringDate">StringDate</label>
+    <abp-date-picker data-linked-calendars="false" data-ranges="{"Today":["2023-04-12T18:17:53.3007400+03:00","2023-04-12T18:17:53.3007400+03:00"]}">
+        <div class="input-group">
+            <input type="text" autocomplete="off" class="form-control">
+            <button type="button" tabindex="-1" data-type="clear" class="d-none btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-times"></i>
+            </button>
+            <button type="button" tabindex="-1" data-type="open" class="btn btn-outline-secondary" data-busy-text="Processing...">
+                <i class="fa fa-calendar"></i>
+            </button>
+        </div><span class="text-danger col-auto field-validation-valid" data-valmsg-for="DynamicFormExample.StringDate" data-valmsg-replace="true"></span><input data-date="true" type="hidden" id="DynamicFormExample_StringDate" name="DynamicFormExample.StringDate" value="">
+    </abp-date-picker>
+</div>
+
+ + +
+
\ No newline at end of file diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs new file mode 100644 index 0000000000..78b5afa2b0 --- /dev/null +++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs @@ -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(); + DatePickerOptions.Ranges.Add(new AbpDatePickerRange("Today", DateTime.Now, DateTime.Now)); + } + + public void OnPost() + { + return; + } +} \ No newline at end of file diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml index 6888267210..43c0a1bffb 100644 --- a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml +++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml @@ -17,6 +17,7 @@
  • Cards
  • Carousel
  • Collapse
    • +
  • DatePicker & DateRangePicker
  • Dropdowns
  • Dynamic Forms
  • Form Elements
    • diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs index b6fce0dce0..e9ddf5ac0e 100644 --- a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs +++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenuContributor.cs @@ -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"), diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs index 4227c807c6..2f381221ed 100644 --- a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs +++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Menus/BootstrapDemoMenus.cs @@ -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";