Merge pull request #18648 from abpframework/issue-18335

Improve AbpDatePicker
abpframework · Jan 2, 2024 · ea7200f · ea7200f
2 parents 1c9d53b + 2f3b658
commit ea7200f
Show file tree

Hide file tree

Showing 9 changed files with 771 additions and 575 deletions.
diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md b/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md
@@ -364,7 +364,8 @@ You can set some of the attributes on your c# property, or directly on HTML tag.
 * `single-open-and-clear-button`: Shows the open and clear buttons in a single button when it's `True`. The default value is `True`.
 * `is-utc`: Converts the date to UTC when its `True`. The default value is `False`.
 * `is-iso`: Converts the date to ISO format when its `True`. The default value is `False`.
-* `date-format`: Sets the date format of the input. The default format is the user's culture date format. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
+* `visible-date-format`: Sets the date format of the input. The default format is the user's culture date format. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
+* `input-date-format`: Sets the date format of the hidden input for backend compatibility. The default format is `YYYY-MM-DD`. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
 * `date-separator`: Sets a character to separate start and end dates. The default value is `-`
 * Other non-mapped attributes will be automatically added to the input element as is. See the available [datepicker options](https://www.daterangepicker.com/#options). Eg: `data-start-date="2020-01-01"`
 
@@ -425,7 +426,8 @@ newPicker.insertAfter($('body'));
 * `singleOpenAndClearButton`: Shows the open and clear buttons in a single button when it's `True`. The default value is `True`.
 * `isUtc`: Converts the date to UTC when its `True`. The default value is `False`.
 * `isIso`: Converts the date to ISO format when its `True`. The default value is `False`.
-* `dateFormat`: Sets the date format of the input. The default format is the user's culture date format. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
+* `visibleDateFormat`: Sets the date format of the input. The default format is the user's culture date format. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
+* `inputDateFormat`: Sets the date format of the hidden input for backend compatibility. The default format is `YYYY-MM-DD`. You need to provide a JavaScript date format convention. Eg:  `YYYY-MM-DDTHH:MM:SSZ`.
 * `dateSeparator`: Sets a character to separate start and end dates. The default value is `-`.
 * `startDateName`: Sets the name of the hidden start date input.
 * `endDateName`: Sets the name of the hidden end date input.

diff --git a/....Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelper.cs b/....Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelper.cs
@@ -185,17 +185,28 @@ public void SetDatePickerOptions(IAbpDatePickerOptions options)
         set => _abpDatePickerOptionsImplementation.ParentEl = value;
     }
 
+    [Obsolete("Use VisibleDateFormat instead.")]
     public string? DateFormat {
         get => _abpDatePickerOptionsImplementation.DateFormat;
         set => _abpDatePickerOptionsImplementation.DateFormat = value;
     }
+
+    public string? VisibleDateFormat {
+        get => _abpDatePickerOptionsImplementation.VisibleDateFormat;
+        set => _abpDatePickerOptionsImplementation.VisibleDateFormat = value;
+    }
+
+    public string? InputDateFormat {
+        get => _abpDatePickerOptionsImplementation.InputDateFormat;
+        set => _abpDatePickerOptionsImplementation.InputDateFormat = value;
+    }
 
     public bool OpenButton {
         get => _abpDatePickerOptionsImplementation.OpenButton;
         set => _abpDatePickerOptionsImplementation.OpenButton = value;
     }
 
-    public bool ClearButton {
+    public bool? ClearButton {
         get => _abpDatePickerOptionsImplementation.ClearButton;
         set => _abpDatePickerOptionsImplementation.ClearButton = value;
     }

diff --git a/...pNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelperService.cs b/...pNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelperService.cs
@@ -125,7 +125,7 @@ public async override Task ProcessAsync(TagHelperContext context, TagHelperOutpu
         var openButtonContent = TagHelper.OpenButton
             ? await ProcessButtonAndGetContentAsync(context, output, "calendar", "open")
             : "";
-        var clearButtonContent = TagHelper.ClearButton
+        var clearButtonContent = TagHelper.ClearButton == true || (!TagHelper.ClearButton.HasValue && TagHelper.AutoUpdateInput != true)
             ? await ProcessButtonAndGetContentAsync(context, output, "times", "clear", visible:!TagHelper.SingleOpenAndClearButton)
             : "";
 
@@ -382,6 +382,16 @@ protected TagHelperAttributeList ConvertDatePickerOptionsToAttributeList(IAbpDat
         {
             attrList.Add("data-date-format", options.DateFormat);
         }
+
+        if(!options.VisibleDateFormat.IsNullOrEmpty())
+        {
+            attrList.Add("data-visible-date-format", options.VisibleDateFormat);
+        }
+
+        if(!options.InputDateFormat.IsNullOrEmpty())
+        {
+            attrList.Add("data-input-date-format", options.InputDateFormat);
+        }
 
         if(options.Ranges != null && options.Ranges.Any())
         {

diff --git a/...c/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerOptions.cs b/...c/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerOptions.cs
@@ -31,9 +31,13 @@ public class AbpDatePickerOptions : IAbpDatePickerOptions
     public bool? LinkedCalendars { get; set; }
     public bool? AutoUpdateInput { get; set; }
     public string? ParentEl { get; set; }
+
+    [Obsolete("Use VisibleDateFormat instead.")]
     public string? DateFormat { get; set; }
+    public string? VisibleDateFormat { get; set; }
+    public string? InputDateFormat { get; set; }
     public bool OpenButton { get; set; } = true;
-    public bool ClearButton { get; set; } = true;
+    public bool? ClearButton { get; set; }
     public bool SingleOpenAndClearButton { get; set; } = true;
     public bool? IsUtc { get; set; }
     public bool? IsIso { get; set; }

diff --git a/...NetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDateRangePickerTagHelperService.cs b/...NetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDateRangePickerTagHelperService.cs
@@ -84,18 +84,24 @@ protected override int GetOrder()
 
     protected override void AddBaseTagAttributes(TagHelperAttributeList attributes)
     {
-        if (TagHelper.AspForStart != null && 
-            TagHelper.AspForStart.Model != null &&
+        if (TagHelper.AspForStart?.Model != null &&
             SupportedInputTypes.TryGetValue(TagHelper.AspForStart.Metadata.ModelType, out var convertFuncStart))
         {
-            attributes.Add("data-start-date", convertFuncStart(TagHelper.AspForStart.Model));
+            var convert = convertFuncStart(TagHelper.AspForStart.Model);
+            if(!convert.IsNullOrWhiteSpace())
+            {
+                attributes.Add("data-start-date", convert);
+            }
         }
-
-        if (TagHelper.AspForEnd != null && 
-            TagHelper.AspForEnd.Model != null &&
+
+        if (TagHelper.AspForEnd?.Model != null &&
             SupportedInputTypes.TryGetValue(TagHelper.AspForEnd.Metadata.ModelType, out var convertFuncEnd))
         {
-            attributes.Add("data-end-date", convertFuncEnd(TagHelper.AspForEnd.Model));
+            var convert = convertFuncEnd(TagHelper.AspForEnd.Model);
+            if(!convert.IsNullOrWhiteSpace())
+            {
+                attributes.Add("data-end-date", convert);
+            }
         }
     }
 

diff --git a/.../Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/IAbpDatePickerOptions.cs b/.../Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/IAbpDatePickerOptions.cs
@@ -134,11 +134,22 @@ public interface IAbpDatePickerOptions
     /// </summary>
     string? ParentEl { get; set; }
 
+    [Obsolete("Use VisibleDateFormat instead.")]
     string? DateFormat { get; set; }
+
+    /// <summary>
+    /// The date format string that will appear in the input element. For user input.
+    /// </summary>
+    string? VisibleDateFormat { get; set; }
+
+    /// <summary>
+    /// The date format string that will appear in the hidden input element. For backend compatibility.
+    /// </summary>
+    string? InputDateFormat { get; set; }
 
     bool OpenButton { get; set; }
 
-    bool ClearButton { get; set; }
+    bool? ClearButton { get; set; }
 
     bool SingleOpenAndClearButton { get; set; }
 

diff --git a/...rc/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Bundling/SharedThemeGlobalScriptContributor.cs b/...rc/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Bundling/SharedThemeGlobalScriptContributor.cs
@@ -48,7 +48,8 @@ public override void ConfigureBundle(BundleConfigurationContext context)
             "/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/modal-manager.js",
             "/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js",
             "/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js",
-            "/libs/abp/aspnetcore-mvc-ui-theme-shared/toastr/abp-toastr.js"
+            "/libs/abp/aspnetcore-mvc-ui-theme-shared/toastr/abp-toastr.js",
+            "/libs/abp/aspnetcore-mvc-ui-theme-shared/date-range-picker/date-range-picker-extensions.js"
         });
     }
 }