Refactor and add atrributes

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerBaseTagHelper.cs

@@ -1,147 +0,0 @@
-using System;
-using System.Collections.Generic;
-using JetBrains.Annotations;
-using Microsoft.AspNetCore.Razor.TagHelpers;
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-public abstract class
-    AbpDatePickerBaseTagHelper<TTagHelper> : AbpTagHelper<TTagHelper, AbpDatePickerBaseTagHelperService<TTagHelper>>
-    where TTagHelper : AbpDatePickerBaseTagHelper<TTagHelper>
-
-{
-    public string Label { get; set; }
-
-    public string LabelTooltip { get; set; }
-
-    public string LabelTooltipIcon { get; set; } = "bi-info-circle";
-
-    public string LabelTooltipPlacement { get; set; } = "right";
-
-    public bool LabelTooltipHtml { get; set; } = false;
-
-    [HtmlAttributeName("info")] 
-    public string InfoText { get; set; }
-
-    [HtmlAttributeName("disabled")] 
-    public bool IsDisabled { get; set; } = false;
-
-    [HtmlAttributeName("readonly")] 
-    public bool? IsReadonly { get; set; } = false;
-
-    public bool AutoFocus { get; set; }
-
-    [HtmlAttributeName("type")] 
-    public string InputTypeName { get; set; } = "text";
-
-    public AbpFormControlSize Size { get; set; } = AbpFormControlSize.Default;
-
-    [HtmlAttributeName("required-symbol")] 
-    public bool DisplayRequiredSymbol { get; set; } = true;
-
-    [HtmlAttributeName("asp-format")] 
-    public string Format { get; set; }
-
-    public string Name { get; set; }
-
-    public string Value { get; set; }
-
-    public bool SuppressLabel { get; set; }
-
-
-    // Min and Max date
-    public DateTime? MinDate { get; set; }
-
-    public DateTime? MaxDate { get; set; }
-
-    // Max span between start and end date
-    public object? MaxSpan { get; set; }
-
-    // Show dropdowns
-    public bool ShowDropdowns { get; set; } = true;
-
-    // Min and Max year
-    public int? MinYear { get; set; }
-
-    public int? MaxYear { get; set; }
-
-    // Show week numbers
-    public AbpDatePickerWeekNumbers WeekNumbers { get; set; } = AbpDatePickerWeekNumbers.None;
-
-    // Time picker
-    public bool? TimePicker { get; set; }
-
-    // Time picker increment
-    public int? TimePickerIncrement { get; set; }
-
-    // Time picker 24 hour
-    public bool? TimePicker24Hour { get; set; }
-
-    // Time picker seconds
-    public bool? TimePickerSeconds { get; set; }
-
-    // Ranges object
-    public List<AbpDatePickerRange> Ranges { get; set; }
-    
-    // Show custom range label
-    public bool ShowCustomRangeLabel { get; set; } = true;
-    
-    // Always show calendar
-    public bool AlwaysShowCalendars { get; set; } = false;
-
-    // Opens date picker on left or right or center of the input
-    public AbpDatePickerOpens Opens { get; set; } = AbpDatePickerOpens.Center;
-
-    // Drops down or up or auto
-    public AbpDatePickerDrops Drops { get; set; } = AbpDatePickerDrops.Down;
-
-    // Button classes
-    [CanBeNull] 
-    public string ButtonClasses { get; set; }
-
-    // Apply class to all buttons
-    [CanBeNull] 
-    public string ApplyButtonClasses { get; set; }
-
-    // Cancel class to all buttons
-    [CanBeNull] 
-    public string CancelButtonClasses { get; set; }
-
-    // Locale
-    [CanBeNull] 
-    public object Locale { get; set; }
-
-    // Auto apply
-    public bool AutoApply { get; set; } = true;
-
-    // Linked calendars
-    public bool? LinkedCalendars { get; set; }
-
-    // Auto update input
-    public bool AutoUpdateInput { get; set; } = false;
-
-    // Parent element
-    [CanBeNull] 
-    public string ParentEl { get; set; }
-
-    // public DatePickerType Type { get; set; } = DatePickerType.Date;
-
-    [CanBeNull] 
-    public string DateFormat { get; set; }
-
-    public bool OpenButton { get; set; } = true;
-
-    public bool ClearButton { get; set; } = true;
-
-    public bool IsUtc { get; set; } = false;
-    
-    public bool IsIso { get; set; } = false;
-    
-    [CanBeNull] 
-    public object Options { get; set; }
-
-    protected AbpDatePickerBaseTagHelper(AbpDatePickerBaseTagHelperService<TTagHelper> service) : base(service)
-    {
-    }
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerDrops.cs

@@ -1,8 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-public enum AbpDatePickerDrops
-{
-    Down,
-    Up,
-    Auto
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerOpens.cs

@@ -1,8 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-public enum AbpDatePickerOpens
-{
-    Left,
-    Right,
-    Center
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerWeekNumbers.cs

@@ -1,8 +0,0 @@
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-public enum AbpDatePickerWeekNumbers
-{
-    None,
-    Normal,
-    Iso
-}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelper.cs

@@ -0,0 +1,208 @@
+using System;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public abstract class
+    AbpDatePickerBaseTagHelper<TTagHelper> : AbpTagHelper<TTagHelper, AbpDatePickerBaseTagHelperService<TTagHelper>>, IAbpDatePickerOptions
+    where TTagHelper : AbpDatePickerBaseTagHelper<TTagHelper>
+
+{
+    private IAbpDatePickerOptions _abpDatePickerOptionsImplementation;
+    public string Label { get; set; }
+
+    public string LabelTooltip { get; set; }
+
+    public string LabelTooltipIcon { get; set; } = "bi-info-circle";
+
+    public string LabelTooltipPlacement { get; set; } = "right";
+
+    public bool LabelTooltipHtml { get; set; } = false;
+
+    [HtmlAttributeName("info")] 
+    public string InfoText { get; set; }
+
+    [HtmlAttributeName("disabled")] 
+    public bool IsDisabled { get; set; } = false;
+
+    [HtmlAttributeName("readonly")] 
+    public bool? IsReadonly { get; set; } = false;
+
+    public bool AutoFocus { get; set; }
+
+    public AbpFormControlSize Size { get; set; } = AbpFormControlSize.Default;
+
+    [HtmlAttributeName("required-symbol")] 
+    public bool DisplayRequiredSymbol { get; set; } = true;
+
+    public string Name { get; set; }
+
+    public string Value { get; set; }
+
+    public bool SuppressLabel { get; set; }
+
+
+    
+
+    protected AbpDatePickerBaseTagHelper(AbpDatePickerBaseTagHelperService<TTagHelper> service) : base(service)
+    {
+        _abpDatePickerOptionsImplementation = new AbpDatePickerOptions();
+    }
+
+
+    public string PickerId {
+        get => _abpDatePickerOptionsImplementation.PickerId;
+        set => _abpDatePickerOptionsImplementation.PickerId = value;
+    }
+
+    public DateTime? MinDate {
+        get => _abpDatePickerOptionsImplementation.MinDate;
+        set => _abpDatePickerOptionsImplementation.MinDate = value;
+    }
+
+    public DateTime? MaxDate {
+        get => _abpDatePickerOptionsImplementation.MaxDate;
+        set => _abpDatePickerOptionsImplementation.MaxDate = value;
+    }
+
+    public object MaxSpan {
+        get => _abpDatePickerOptionsImplementation.MaxSpan;
+        set => _abpDatePickerOptionsImplementation.MaxSpan = value;
+    }
+
+    public bool? ShowDropdowns {
+        get => _abpDatePickerOptionsImplementation.ShowDropdowns;
+        set => _abpDatePickerOptionsImplementation.ShowDropdowns = value;
+    }
+
+    public int? MinYear {
+        get => _abpDatePickerOptionsImplementation.MinYear;
+        set => _abpDatePickerOptionsImplementation.MinYear = value;
+    }
+
+    public int? MaxYear {
+        get => _abpDatePickerOptionsImplementation.MaxYear;
+        set => _abpDatePickerOptionsImplementation.MaxYear = value;
+    }
+
+    public AbpDatePickerWeekNumbers WeekNumbers {
+        get => _abpDatePickerOptionsImplementation.WeekNumbers;
+        set => _abpDatePickerOptionsImplementation.WeekNumbers = value;
+    }
+
+    public bool? TimePicker {
+        get => _abpDatePickerOptionsImplementation.TimePicker;
+        set => _abpDatePickerOptionsImplementation.TimePicker = value;
+    }
+
+    public int? TimePickerIncrement {
+        get => _abpDatePickerOptionsImplementation.TimePickerIncrement;
+        set => _abpDatePickerOptionsImplementation.TimePickerIncrement = value;
+    }
+
+    public bool? TimePicker24Hour {
+        get => _abpDatePickerOptionsImplementation.TimePicker24Hour;
+        set => _abpDatePickerOptionsImplementation.TimePicker24Hour = value;
+    }
+
+    public bool? TimePickerSeconds {
+        get => _abpDatePickerOptionsImplementation.TimePickerSeconds;
+        set => _abpDatePickerOptionsImplementation.TimePickerSeconds = value;
+    }
+
+    public List<AbpDatePickerRange> Ranges {
+        get => _abpDatePickerOptionsImplementation.Ranges;
+        set => _abpDatePickerOptionsImplementation.Ranges = value;
+    }
+
+    public bool? ShowCustomRangeLabel {
+        get => _abpDatePickerOptionsImplementation.ShowCustomRangeLabel;
+        set => _abpDatePickerOptionsImplementation.ShowCustomRangeLabel = value;
+    }
+
+    public bool? AlwaysShowCalendars {
+        get => _abpDatePickerOptionsImplementation.AlwaysShowCalendars;
+        set => _abpDatePickerOptionsImplementation.AlwaysShowCalendars = value;
+    }
+
+    public AbpDatePickerOpens Opens {
+        get => _abpDatePickerOptionsImplementation.Opens;
+        set => _abpDatePickerOptionsImplementation.Opens = value;
+    }
+
+    public AbpDatePickerDrops Drops {
+        get => _abpDatePickerOptionsImplementation.Drops;
+        set => _abpDatePickerOptionsImplementation.Drops = value;
+    }
+
+    public string ButtonClasses {
+        get => _abpDatePickerOptionsImplementation.ButtonClasses;
+        set => _abpDatePickerOptionsImplementation.ButtonClasses = value;
+    }
+
+    public string ApplyButtonClasses {
+        get => _abpDatePickerOptionsImplementation.ApplyButtonClasses;
+        set => _abpDatePickerOptionsImplementation.ApplyButtonClasses = value;
+    }
+
+    public string CancelButtonClasses {
+        get => _abpDatePickerOptionsImplementation.CancelButtonClasses;
+        set => _abpDatePickerOptionsImplementation.CancelButtonClasses = value;
+    }
+
+    public object Locale {
+        get => _abpDatePickerOptionsImplementation.Locale;
+        set => _abpDatePickerOptionsImplementation.Locale = value;
+    }
+
+    public bool? AutoApply {
+        get => _abpDatePickerOptionsImplementation.AutoApply;
+        set => _abpDatePickerOptionsImplementation.AutoApply = value;
+    }
+
+    public bool? LinkedCalendars {
+        get => _abpDatePickerOptionsImplementation.LinkedCalendars;
+        set => _abpDatePickerOptionsImplementation.LinkedCalendars = value;
+    }
+
+    public bool? AutoUpdateInput {
+        get => _abpDatePickerOptionsImplementation.AutoUpdateInput;
+        set => _abpDatePickerOptionsImplementation.AutoUpdateInput = value;
+    }
+
+    public string ParentEl {
+        get => _abpDatePickerOptionsImplementation.ParentEl;
+        set => _abpDatePickerOptionsImplementation.ParentEl = value;
+    }
+
+    public string DateFormat {
+        get => _abpDatePickerOptionsImplementation.DateFormat;
+        set => _abpDatePickerOptionsImplementation.DateFormat = value;
+    }
+
+    public bool OpenButton {
+        get => _abpDatePickerOptionsImplementation.OpenButton;
+        set => _abpDatePickerOptionsImplementation.OpenButton = value;
+    }
+
+    public bool ClearButton {
+        get => _abpDatePickerOptionsImplementation.ClearButton;
+        set => _abpDatePickerOptionsImplementation.ClearButton = value;
+    }
+
+    public bool? IsUtc {
+        get => _abpDatePickerOptionsImplementation.IsUtc;
+        set => _abpDatePickerOptionsImplementation.IsUtc = value;
+    }
+
+    public bool? IsIso {
+        get => _abpDatePickerOptionsImplementation.IsIso;
+        set => _abpDatePickerOptionsImplementation.IsIso = value;
+    }
+
+    public object Options {
+        get => _abpDatePickerOptionsImplementation.Options;
+        set => _abpDatePickerOptionsImplementation.Options = value;
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerBaseTagHelperService.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerBaseTagHelperService.cs

@@ -15,10 +15,9 @@ using Microsoft.Extensions.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Extensions;
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
 using Volo.Abp.Json;
 
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
 
 public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelperService<TTagHelper>
     where TTagHelper : AbpDatePickerBaseTagHelper<TTagHelper>
@@ -82,6 +81,7 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
         AddDisabledAttribute(TagHelperOutput);
         AddAutoFocusAttribute(TagHelperOutput);
         AddFormControls(context, output, TagHelperOutput);
+        AddReadOnlyAttribute(TagHelperOutput);
         AddPlaceholderAttribute(TagHelperOutput);
         AddInfoTextId(TagHelperOutput);
 
@@ -93,7 +93,7 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
             ? await ProcessButtonAndGetContentAsync(context, output, "times", "clear")
             : "";
 
-        var labelContent = TagHelper.SuppressLabel ? "" : await GetLabelAsHtmlAsync(context, output, TagHelperOutput);
+        var labelContent = await GetLabelAsHtmlAsync(context, output, TagHelperOutput);
         var infoContent = GetInfoAsHtml(context, output, TagHelperOutput);
         var validationContent = await GetValidationAsHtmlAsync(context, output);
 
@@ -104,7 +104,7 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
             TagHelperOutput.Render(Encoder) + openButtonContent + clearButtonContent + infoContent
         );
 
-        var abpDatePickerTag = new TagHelperOutput(TagName, GetBaseTagAttributes(context, output),
+        var abpDatePickerTag = new TagHelperOutput(TagName, GetBaseTagAttributes(context, output, TagHelper),
             (_, _) => Task.FromResult<TagHelperContent>(new DefaultTagHelperContent()));
         abpDatePickerTag.Content.AppendHtml(inputGroup.Render(Encoder));
         abpDatePickerTag.Content.AppendHtml(validationContent);
@@ -129,6 +129,15 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
 
         output.Content.AppendHtml(innerHtml);
     }
+    
+    protected virtual void AddReadOnlyAttribute(TagHelperOutput inputTagHelperOutput)
+    {
+        if (inputTagHelperOutput.Attributes.ContainsName("readonly") == false &&
+            (TagHelper.IsReadonly != false || GetAttribute<ReadOnlyInput>() != null))
+        {
+            inputTagHelperOutput.Attributes.Add("readonly", "");
+        }
+    }
 
     protected virtual TagHelperAttributeList GetInputAttributes(TagHelperContext context, TagHelperOutput output)
     {
@@ -205,75 +214,45 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
         return string.Empty;
     }
 
-    protected TagHelperAttributeList GetBaseTagAttributes(TagHelperContext context, TagHelperOutput output)
+    protected TagHelperAttributeList ConvertDatePickerOptionsToAttributeList(IAbpDatePickerOptions options)
     {
-        var groupPrefix = "group-";
-
-        var tagHelperAttributes = output.Attributes.Where(a => !a.Name.StartsWith(groupPrefix)).ToList();
-
         var attrList = new TagHelperAttributeList();
-
-        foreach (var tagHelperAttribute in tagHelperAttributes)
-        {
-            attrList.Add(tagHelperAttribute);
-        }
-
-        if (attrList.ContainsName("type"))
-        {
-            attrList.Remove(attrList.First(a => a.Name == "type"));
-        }
-
-        if (attrList.ContainsName("name"))
-        {
-            attrList.Remove(attrList.First(a => a.Name == "name"));
-        }
-        
-        if (attrList.ContainsName("id"))
-        {
-            attrList.Remove(attrList.First(a => a.Name == "id"));
-        }
-
-        if (attrList.ContainsName("value"))
-        {
-            attrList.Remove(attrList.First(a => a.Name == "value"));
-        }
-
-        if (TagHelper.Locale != null)
+        if (options.Locale != null)
         {
-            attrList.Add("data-locale", JsonSerializer.Serialize(TagHelper.Locale));
+            attrList.Add("data-locale", JsonSerializer.Serialize(options.Locale));
         }
 
-        if (TagHelper.MinDate != null)
+        if (options.MinDate != null)
         {
-            attrList.Add("data-min-date", TagHelper.MinDate);
+            attrList.Add("data-min-date", options.MinDate);
         }
 
-        if (TagHelper.MaxDate != null)
+        if (options.MaxDate != null)
         {
-            attrList.Add("data-max-date", TagHelper.MaxDate);
+            attrList.Add("data-max-date", options.MaxDate);
         }
 
-        if (TagHelper.MaxSpan != null)
+        if (options.MaxSpan != null)
         {
-            attrList.Add("data-max-span", JsonSerializer.Serialize(TagHelper.MaxSpan));
+            attrList.Add("data-max-span", JsonSerializer.Serialize(options.MaxSpan));
         }
 
-        if (TagHelper.ShowDropdowns == false)
+        if (options.ShowDropdowns == false)
         {
-            attrList.Add("data-show-dropdowns", TagHelper.ShowDropdowns.ToString().ToLowerInvariant());
+            attrList.Add("data-show-dropdowns", options.ShowDropdowns.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.MinYear != null)
+        if (options.MinYear != null)
         {
-            attrList.Add("data-min-year", TagHelper.MinYear);
+            attrList.Add("data-min-year", options.MinYear);
         }
 
-        if (TagHelper.MaxYear != null)
+        if (options.MaxYear != null)
         {
-            attrList.Add("data-max-year", TagHelper.MaxYear);
+            attrList.Add("data-max-year", options.MaxYear);
         }
 
-        switch (TagHelper.WeekNumbers)
+        switch (options.WeekNumbers)
         {
             case AbpDatePickerWeekNumbers.Normal:
                 attrList.Add("data-show-week-numbers", "true");
@@ -283,106 +262,161 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
                 break;
         }
 
-        if (TagHelper.TimePicker != null)
+        if (options.TimePicker != null)
         {
-            attrList.Add("data-time-picker", TagHelper.TimePicker.ToString().ToLowerInvariant());
+            attrList.Add("data-time-picker", options.TimePicker.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.TimePickerIncrement != null)
+        if (options.TimePickerIncrement != null)
         {
-            attrList.Add("data-time-picker-increment", TagHelper.TimePickerIncrement);
+            attrList.Add("data-time-picker-increment", options.TimePickerIncrement);
         }
 
-        if (TagHelper.TimePicker24Hour != null)
+        if (options.TimePicker24Hour != null)
         {
-            attrList.Add("data-time-picker24-hour", TagHelper.TimePicker24Hour.ToString().ToLowerInvariant());
+            attrList.Add("data-time-picker24-hour", options.TimePicker24Hour.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.TimePickerSeconds != null)
+        if (options.TimePickerSeconds != null)
         {
-            attrList.Add("data-time-picker-seconds", TagHelper.TimePickerSeconds.ToString().ToLowerInvariant());
+            attrList.Add("data-time-picker-seconds", options.TimePickerSeconds.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.Opens != AbpDatePickerOpens.Center)
+        if (options.Opens != AbpDatePickerOpens.Center)
         {
-            attrList.Add("data-opens", TagHelper.Opens.ToString().ToLowerInvariant());
+            attrList.Add("data-opens", options.Opens.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.Drops != AbpDatePickerDrops.Down)
+        if (options.Drops != AbpDatePickerDrops.Down)
         {
-            attrList.Add("data-drops", TagHelper.Drops.ToString().ToLowerInvariant());
+            attrList.Add("data-drops", options.Drops.ToString().ToLowerInvariant());
         }
 
-        if (!TagHelper.ButtonClasses.IsNullOrEmpty())
+        if (!options.ButtonClasses.IsNullOrEmpty())
         {
-            attrList.Add("data-button-classes", TagHelper.ButtonClasses);
+            attrList.Add("data-button-classes", options.ButtonClasses);
         }
 
-        if (!TagHelper.ApplyButtonClasses.IsNullOrEmpty())
+        if (!options.ApplyButtonClasses.IsNullOrEmpty())
         {
-            attrList.Add("data-apply-button-classes", TagHelper.ApplyButtonClasses);
+            attrList.Add("data-apply-button-classes", options.ApplyButtonClasses);
         }
 
-        if (!TagHelper.CancelButtonClasses.IsNullOrEmpty())
+        if (!options.CancelButtonClasses.IsNullOrEmpty())
         {
-            attrList.Add("data-cancel-button-classes", TagHelper.CancelButtonClasses);
+            attrList.Add("data-cancel-button-classes", options.CancelButtonClasses);
         }
 
-        if (!TagHelper.AutoApply)
+        if (options.AutoApply != null)
         {
-            attrList.Add("data-auto-apply", TagHelper.AutoApply.ToString().ToLowerInvariant());
+            attrList.Add("data-auto-apply", options.AutoApply.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.LinkedCalendars != null)
+        if (options.LinkedCalendars != null)
         {
-            attrList.Add("data-linked-calendars", TagHelper.LinkedCalendars.ToString().ToLowerInvariant());
+            attrList.Add("data-linked-calendars", options.LinkedCalendars.ToString().ToLowerInvariant());
         }
 
-        if (TagHelper.AutoUpdateInput)
+        if (options.AutoUpdateInput != null)
         {
-            attrList.Add("data-auto-update-input", TagHelper.AutoUpdateInput.ToString().ToLowerInvariant());
+            attrList.Add("data-auto-update-input", options.AutoUpdateInput.ToString().ToLowerInvariant());
         }
 
-        if (!TagHelper.ParentEl.IsNullOrEmpty())
+        if (!options.ParentEl.IsNullOrEmpty())
         {
-            attrList.Add("data-parent-el", TagHelper.ParentEl);
+            attrList.Add("data-parent-el", options.ParentEl);
         }
 
-        if (!TagHelper.DateFormat.IsNullOrEmpty())
+        if (!options.DateFormat.IsNullOrEmpty())
         {
-            attrList.Add("data-date-format", TagHelper.DateFormat);
+            attrList.Add("data-date-format", options.DateFormat);
         }
         
-        if(TagHelper.Ranges != null && TagHelper.Ranges.Any())
+        if(options.Ranges != null && options.Ranges.Any())
         {
-            var ranges = TagHelper.Ranges.ToDictionary(r => r.Label, r => r.Dates);
+            var ranges = options.Ranges.ToDictionary(r => r.Label, r => r.Dates);
             
             attrList.Add("data-ranges", JsonSerializer.Serialize(ranges));
         }
         
-        if(TagHelper.AlwaysShowCalendars)
+        if(options.AlwaysShowCalendars != null)
         {
-            attrList.Add("data-always-show-calendars", TagHelper.AlwaysShowCalendars.ToString().ToLowerInvariant());
+            attrList.Add("data-always-show-calendars", options.AlwaysShowCalendars.ToString().ToLowerInvariant());
         }
         
-        if(TagHelper.ShowCustomRangeLabel == false)
+        if(options.ShowCustomRangeLabel == false)
         {
-            attrList.Add("data-show-custom-range-label", TagHelper.ShowCustomRangeLabel.ToString().ToLowerInvariant());
+            attrList.Add("data-show-custom-range-label", options.ShowCustomRangeLabel.ToString().ToLowerInvariant());
         }
         
-        if(TagHelper.Options != null)
+        if(options.Options != null)
         {
-            attrList.Add("data-options", JsonSerializer.Serialize(TagHelper.Options));
+            attrList.Add("data-options", JsonSerializer.Serialize(options.Options));
         }
         
-        if (TagHelper.IsUtc)
+        if (options.IsUtc != null)
         {
             attrList.Add("data-is-utc", "true");
         }
         
-        if (TagHelper.IsIso)
+        if (options.IsIso != null)
+        {
+            attrList.Add("data-is-iso", options.IsIso.ToString().ToLowerInvariant());
+        }
+
+        if (!options.PickerId.IsNullOrWhiteSpace())
         {
-            attrList.Add("data-is-iso", TagHelper.IsIso.ToString().ToLowerInvariant());
+            attrList.Add("id", options.PickerId);
+        }
+        
+        return attrList;
+    }
+
+    protected TagHelperAttributeList GetBaseTagAttributes(TagHelperContext context, TagHelperOutput output, IAbpDatePickerOptions options)
+    {
+        var groupPrefix = "group-";
+
+        var tagHelperAttributes = output.Attributes.Where(a => !a.Name.StartsWith(groupPrefix)).ToList();
+
+        var attrList = new TagHelperAttributeList();
+
+        foreach (var tagHelperAttribute in tagHelperAttributes)
+        {
+            attrList.Add(tagHelperAttribute);
+        }
+
+        if (attrList.ContainsName("type"))
+        {
+            attrList.Remove(attrList.First(a => a.Name == "type"));
+        }
+
+        if (attrList.ContainsName("name"))
+        {
+            attrList.Remove(attrList.First(a => a.Name == "name"));
+        }
+        
+        if (attrList.ContainsName("id"))
+        {
+            attrList.Remove(attrList.First(a => a.Name == "id"));
+        }
+
+        if (attrList.ContainsName("value"))
+        {
+            attrList.Remove(attrList.First(a => a.Name == "value"));
+        }
+
+        foreach (var attr in ConvertDatePickerOptionsToAttributeList(options))
+        {
+            attrList.Add(attr);
+        }
+
+        var optionsAttribute = GetAttribute<DatePickerOptionsAttribute>();
+        if(optionsAttribute != null)
+        {
+            foreach (var attr in ConvertDatePickerOptionsToAttributeList(optionsAttribute))
+            {
+                attrList.Add(attr);
+            }
         }
 
         AddBaseTagAttributes(attrList);
@@ -440,6 +474,10 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
     protected virtual async Task<string> GetLabelAsHtmlAsync(TagHelperContext context, TagHelperOutput output,
         TagHelperOutput inputTag)
     {
+        if (IsOutputHidden(inputTag) || TagHelper.SuppressLabel)
+        {
+            return string.Empty;
+        }
         if (string.IsNullOrEmpty(TagHelper.Label))
         {
             return await GetLabelAsHtmlUsingTagHelperAsync(context, output) + GetRequiredSymbol(context, output);
@@ -489,9 +527,14 @@ public abstract class AbpDatePickerBaseTagHelperService<TTagHelper> : AbpTagHelp
     protected virtual async Task<string> GetLabelAsHtmlUsingTagHelperAsync(TagHelperContext context,
         TagHelperOutput output)
     {
+        var modelExpression = GetModelExpression();
+        if (modelExpression == null)
+        {
+            return string.Empty;
+        }
         var labelTagHelper = new LabelTagHelper(Generator) {
             ViewContext = TagHelper.ViewContext,
-            For = GetModelExpression()
+            For = modelExpression
         };
 
         var attributeList = new TagHelperAttributeList();

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerDrops.cs

@@ -0,0 +1,8 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public enum AbpDatePickerDrops
+{
+    Down,
+    Up,
+    Auto
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerOpens.cs

@@ -0,0 +1,8 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public enum AbpDatePickerOpens
+{
+    Left,
+    Right,
+    Center
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerOptions.cs

@@ -0,0 +1,39 @@
+using System;
+using System.Collections.Generic;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public class AbpDatePickerOptions : IAbpDatePickerOptions
+{
+    public string PickerId { get; set; }
+    public DateTime? MinDate { get; set; }
+    public DateTime? MaxDate { get; set; }
+    public object MaxSpan { get; set; }
+    public bool? ShowDropdowns { get; set; }
+    public int? MinYear { get; set; }
+    public int? MaxYear { get; set; }
+    public AbpDatePickerWeekNumbers WeekNumbers { get; set; } = AbpDatePickerWeekNumbers.None;
+    public bool? TimePicker { get; set; }
+    public int? TimePickerIncrement { get; set; }
+    public bool? TimePicker24Hour { get; set; }
+    public bool? TimePickerSeconds { get; set; }
+    public List<AbpDatePickerRange> Ranges { get; set; }
+    public bool? ShowCustomRangeLabel { get; set; }
+    public bool? AlwaysShowCalendars { get; set; }
+    public AbpDatePickerOpens Opens { get; set; } = AbpDatePickerOpens.Center;
+    public AbpDatePickerDrops Drops { get; set; } = AbpDatePickerDrops.Down;
+    public string ButtonClasses { get; set; }
+    public string ApplyButtonClasses { get; set; }
+    public string CancelButtonClasses { get; set; }
+    public object Locale { get; set; }
+    public bool? AutoApply { get; set; }
+    public bool? LinkedCalendars { get; set; }
+    public bool? AutoUpdateInput { get; set; }
+    public string ParentEl { get; set; }
+    public string DateFormat { get; set; }
+    public bool OpenButton { get; set; } = true;
+    public bool ClearButton { get; set; } = true;
+    public bool? IsUtc { get; set; }
+    public bool? IsIso { get; set; }
+    public object Options { get; set; }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerRange.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerRange.cs

@@ -1,7 +1,7 @@
 using System;
 using System.Collections.Generic;
 
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
 
 public class AbpDatePickerRange
 {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerTagHelper.cs

@@ -0,0 +1,16 @@
+using JetBrains.Annotations;
+using Microsoft.AspNetCore.Mvc.ViewFeatures;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+[HtmlTargetElement("abp-date-picker", TagStructure = TagStructure.NormalOrSelfClosing)]
+public class AbpDatePickerTagHelper : AbpDatePickerBaseTagHelper<AbpDatePickerTagHelper>
+{
+    [CanBeNull] 
+    public ModelExpression AspFor { get; set; }
+    
+    public AbpDatePickerTagHelper(AbpDatePickerTagHelperService service) : base(service)
+    {
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDatePickerTag.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerTagHelperService.cs

@@ -10,20 +10,7 @@ using Microsoft.Extensions.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Extensions;
 using Volo.Abp.Json;
 
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-[HtmlTargetElement("abp-date-picker", TagStructure = TagStructure.NormalOrSelfClosing)]
-public class AbpDatePickerTagHelper : AbpDatePickerBaseTagHelper<AbpDatePickerTagHelper>
-{
-    [CanBeNull] 
-    public ModelExpression AspFor { get; set; }
-    
-    public AbpDatePickerTagHelper(AbpDatePickerTagHelperService service) : base(service)
-    {
-    }
-}
-
-
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
 
 public class AbpDatePickerTagHelperService : AbpDatePickerBaseTagHelperService<AbpDatePickerTagHelper>
 {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDatePickerWeekNumbers.cs

@@ -0,0 +1,8 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public enum AbpDatePickerWeekNumbers
+{
+    None,
+    Normal,
+    Iso
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDateRangePickerTagHelper.cs

@@ -0,0 +1,21 @@
+using JetBrains.Annotations;
+using Microsoft.AspNetCore.Mvc.ViewFeatures;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+[HtmlTargetElement("abp-date-range-picker", TagStructure = TagStructure.NormalOrSelfClosing)]
+public class AbpDateRangePickerTagHelper : AbpDatePickerBaseTagHelper<AbpDateRangePickerTagHelper>
+{
+    // Start date
+    [CanBeNull] 
+    public ModelExpression AspForStart { get; set; }
+
+    // End date
+    [CanBeNull] 
+    public ModelExpression AspForEnd { get; set; }
+
+    public AbpDateRangePickerTagHelper(AbpDateRangePickerTagHelperService tagHelperService) : base(tagHelperService)
+    {
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/DatePicker/AbpDateRangePicker.cs → framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/AbpDateRangePickerTagHelperService.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Linq;
-using System.Text;
 using System.Text.Encodings.Web;
 using System.Threading.Tasks;
 using JetBrains.Annotations;
@@ -12,23 +11,7 @@ using Microsoft.Extensions.Localization;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Extensions;
 using Volo.Abp.Json;
 
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.DatePicker;
-
-[HtmlTargetElement("abp-date-range-picker", TagStructure = TagStructure.NormalOrSelfClosing)]
-public class AbpDateRangePickerTagHelper : AbpDatePickerBaseTagHelper<AbpDateRangePickerTagHelper>
-{
-    // Start date
-    [CanBeNull] 
-    public ModelExpression AspForStart { get; set; }
-
-    // End date
-    [CanBeNull] 
-    public ModelExpression AspForEnd { get; set; }
-
-    public AbpDateRangePickerTagHelper(AbpDateRangePickerTagHelperService tagHelperService) : base(tagHelperService)
-    {
-    }
-}
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
 
 public class AbpDateRangePickerTagHelperService : AbpDatePickerBaseTagHelperService<AbpDateRangePickerTagHelper>
 {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/DatePickerAttribute.cs

@@ -0,0 +1,8 @@
+using System;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+[AttributeUsage(AttributeTargets.Property)]
+public class DatePickerAttribute : Attribute
+{
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/DatePickerOptionsAttribute.cs

@@ -0,0 +1,169 @@
+using System;
+using System.Collections.Generic;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public class DatePickerOptionsAttribute : Attribute, IAbpDatePickerOptions
+{
+    private IAbpDatePickerOptions _abpDatePickerOptionsImplementation;
+
+    public DatePickerOptionsAttribute()
+    {
+        _abpDatePickerOptionsImplementation = new AbpDatePickerOptions();
+    }
+
+    public string PickerId {
+        get => _abpDatePickerOptionsImplementation.PickerId;
+        set => _abpDatePickerOptionsImplementation.PickerId = value;
+    }
+
+    public DateTime? MinDate {
+        get => _abpDatePickerOptionsImplementation.MinDate;
+        set => _abpDatePickerOptionsImplementation.MinDate = value;
+    }
+
+    public DateTime? MaxDate {
+        get => _abpDatePickerOptionsImplementation.MaxDate;
+        set => _abpDatePickerOptionsImplementation.MaxDate = value;
+    }
+
+    public object MaxSpan {
+        get => _abpDatePickerOptionsImplementation.MaxSpan;
+        set => _abpDatePickerOptionsImplementation.MaxSpan = value;
+    }
+
+    public bool? ShowDropdowns {
+        get => _abpDatePickerOptionsImplementation.ShowDropdowns;
+        set => _abpDatePickerOptionsImplementation.ShowDropdowns = value;
+    }
+
+    public int? MinYear {
+        get => _abpDatePickerOptionsImplementation.MinYear;
+        set => _abpDatePickerOptionsImplementation.MinYear = value;
+    }
+
+    public int? MaxYear {
+        get => _abpDatePickerOptionsImplementation.MaxYear;
+        set => _abpDatePickerOptionsImplementation.MaxYear = value;
+    }
+
+    public AbpDatePickerWeekNumbers WeekNumbers {
+        get => _abpDatePickerOptionsImplementation.WeekNumbers;
+        set => _abpDatePickerOptionsImplementation.WeekNumbers = value;
+    }
+
+    public bool? TimePicker {
+        get => _abpDatePickerOptionsImplementation.TimePicker;
+        set => _abpDatePickerOptionsImplementation.TimePicker = value;
+    }
+
+    public int? TimePickerIncrement {
+        get => _abpDatePickerOptionsImplementation.TimePickerIncrement;
+        set => _abpDatePickerOptionsImplementation.TimePickerIncrement = value;
+    }
+
+    public bool? TimePicker24Hour {
+        get => _abpDatePickerOptionsImplementation.TimePicker24Hour;
+        set => _abpDatePickerOptionsImplementation.TimePicker24Hour = value;
+    }
+
+    public bool? TimePickerSeconds {
+        get => _abpDatePickerOptionsImplementation.TimePickerSeconds;
+        set => _abpDatePickerOptionsImplementation.TimePickerSeconds = value;
+    }
+
+    public List<AbpDatePickerRange> Ranges {
+        get => _abpDatePickerOptionsImplementation.Ranges;
+        set => _abpDatePickerOptionsImplementation.Ranges = value;
+    }
+
+    public bool? ShowCustomRangeLabel {
+        get => _abpDatePickerOptionsImplementation.ShowCustomRangeLabel;
+        set => _abpDatePickerOptionsImplementation.ShowCustomRangeLabel = value;
+    }
+
+    public bool? AlwaysShowCalendars {
+        get => _abpDatePickerOptionsImplementation.AlwaysShowCalendars;
+        set => _abpDatePickerOptionsImplementation.AlwaysShowCalendars = value;
+    }
+
+    public AbpDatePickerOpens Opens {
+        get => _abpDatePickerOptionsImplementation.Opens;
+        set => _abpDatePickerOptionsImplementation.Opens = value;
+    }
+
+    public AbpDatePickerDrops Drops {
+        get => _abpDatePickerOptionsImplementation.Drops;
+        set => _abpDatePickerOptionsImplementation.Drops = value;
+    }
+
+    public string ButtonClasses {
+        get => _abpDatePickerOptionsImplementation.ButtonClasses;
+        set => _abpDatePickerOptionsImplementation.ButtonClasses = value;
+    }
+
+    public string ApplyButtonClasses {
+        get => _abpDatePickerOptionsImplementation.ApplyButtonClasses;
+        set => _abpDatePickerOptionsImplementation.ApplyButtonClasses = value;
+    }
+
+    public string CancelButtonClasses {
+        get => _abpDatePickerOptionsImplementation.CancelButtonClasses;
+        set => _abpDatePickerOptionsImplementation.CancelButtonClasses = value;
+    }
+
+    public object Locale {
+        get => _abpDatePickerOptionsImplementation.Locale;
+        set => _abpDatePickerOptionsImplementation.Locale = value;
+    }
+
+    public bool? AutoApply {
+        get => _abpDatePickerOptionsImplementation.AutoApply;
+        set => _abpDatePickerOptionsImplementation.AutoApply = value;
+    }
+
+    public bool? LinkedCalendars {
+        get => _abpDatePickerOptionsImplementation.LinkedCalendars;
+        set => _abpDatePickerOptionsImplementation.LinkedCalendars = value;
+    }
+
+    public bool? AutoUpdateInput {
+        get => _abpDatePickerOptionsImplementation.AutoUpdateInput;
+        set => _abpDatePickerOptionsImplementation.AutoUpdateInput = value;
+    }
+
+    public string ParentEl {
+        get => _abpDatePickerOptionsImplementation.ParentEl;
+        set => _abpDatePickerOptionsImplementation.ParentEl = value;
+    }
+
+    public string DateFormat {
+        get => _abpDatePickerOptionsImplementation.DateFormat;
+        set => _abpDatePickerOptionsImplementation.DateFormat = value;
+    }
+
+    public bool OpenButton {
+        get => _abpDatePickerOptionsImplementation.OpenButton;
+        set => _abpDatePickerOptionsImplementation.OpenButton = value;
+    }
+
+    public bool ClearButton {
+        get => _abpDatePickerOptionsImplementation.ClearButton;
+        set => _abpDatePickerOptionsImplementation.ClearButton = value;
+    }
+
+    public bool? IsUtc {
+        get => _abpDatePickerOptionsImplementation.IsUtc;
+        set => _abpDatePickerOptionsImplementation.IsUtc = value;
+    }
+
+    public bool? IsIso {
+        get => _abpDatePickerOptionsImplementation.IsIso;
+        set => _abpDatePickerOptionsImplementation.IsIso = value;
+    }
+
+    public object Options {
+        get => _abpDatePickerOptionsImplementation.Options;
+        set => _abpDatePickerOptionsImplementation.Options = value;
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/DateRangePickerAttribute.cs

@@ -0,0 +1,16 @@
+using System;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+[AttributeUsage(AttributeTargets.Property)]
+public class DateRangePickerAttribute : Attribute
+{
+    public string PickerId { get; set; }
+    public bool IsStart { get; set; }
+    
+    public DateRangePickerAttribute(string pickerId, bool isStart = false)
+    {
+        PickerId = pickerId;
+        IsStart = isStart;
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/DatePicker/IAbpDatePickerOptions.cs

@@ -0,0 +1,100 @@
+using System;
+using System.Collections.Generic;
+using JetBrains.Annotations;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
+
+public interface IAbpDatePickerOptions
+{
+    public string PickerId { get; set; }
+    // Min and Max date
+    DateTime? MinDate { get; set; }
+
+    DateTime? MaxDate { get; set; }
+
+    // Max span between start and end date
+    object? MaxSpan { get; set; }
+
+    // Show dropdowns
+    bool? ShowDropdowns { get; set; }
+
+    // Min and Max year
+    int? MinYear { get; set; }
+
+    int? MaxYear { get; set; }
+
+    // Show week numbers
+    AbpDatePickerWeekNumbers WeekNumbers { get; set; }
+
+    // Time picker
+    bool? TimePicker { get; set; }
+
+    // Time picker increment
+    int? TimePickerIncrement { get; set; }
+
+    // Time picker 24 hour
+    bool? TimePicker24Hour { get; set; }
+
+    // Time picker seconds
+    bool? TimePickerSeconds { get; set; }
+
+    // Ranges object
+    List<AbpDatePickerRange> Ranges { get; set; }
+    
+    // Show custom range label
+    bool? ShowCustomRangeLabel { get; set; }
+    
+    // Always show calendar
+    bool? AlwaysShowCalendars { get; set; }
+
+    // Opens date picker on left or right or center of the input
+    AbpDatePickerOpens Opens { get; set; }
+
+    // Drops down or up or auto
+    AbpDatePickerDrops Drops { get; set; }
+
+    // Button classes
+    [CanBeNull] 
+    string ButtonClasses { get; set; }
+
+    // Apply class to all buttons
+    [CanBeNull] 
+    string ApplyButtonClasses { get; set; }
+
+    // Cancel class to all buttons
+    [CanBeNull] 
+    string CancelButtonClasses { get; set; }
+
+    // Locale
+    [CanBeNull] 
+    object Locale { get; set; }
+
+    // Auto apply
+    bool? AutoApply { get; set; }
+
+    // Linked calendars
+    bool? LinkedCalendars { get; set; }
+
+    // Auto update input
+    bool? AutoUpdateInput { get; set; }
+
+    // Parent element
+    [CanBeNull] 
+    string ParentEl { get; set; }
+
+    // DatePickerType Type { get; set; } = DatePickerType.Date;
+
+    [CanBeNull] 
+    string DateFormat { get; set; }
+
+    bool OpenButton { get; set; }
+
+    bool ClearButton { get; set; }
+
+    bool? IsUtc { get; set; }
+    
+    bool? IsIso { get; set; }
+    
+    [CanBeNull] 
+    object Options { get; set; }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js

@@ -288,9 +288,6 @@
             }
 
             $container.data('options', options);
-            if($container.data('options', options)){
-                debugger;
-            }
             abp.dom.initializers.initializeDateRangePickers($container);
             return $container;
         }
@@ -310,23 +307,29 @@
                 var $clearButton = $(this).find('button[data-type="clear"]')
                 var singleDatePicker = $this.is('abp-date-picker')
                 var options = {};
+                options.singleDatePicker = singleDatePicker;
 
                 var defaultOptions = {
                     showDropdowns: true,
                     opens: "center",
                     drops: "down",
                     autoApply: true,
-                    autoUpdateInput: false
+                    autoUpdateInput: false,
+                    minYear: parseInt(moment().subtract(100, 'year').locale('en').format('YYYY')),
+                    maxYear: parseInt(moment().add(100, 'year').locale('en').format('YYYY')),
+                    locale: {
+                        direction: abp.localization.currentCulture.isRightToLeft ? 'rtl' : 'ltr',
+                    },
                 };
                 
                 $.extend(options, defaultOptions);
                 $.extend(options, $this.data());
-                if($this.data("options")){
-                    debugger;
-                    $.extend(options, $this.data("options"));
-                }
                 $.extend(options, $this.data("options"));
 
+                if(options.timePicker && options.timePicker24Hour === undefined){
+                    options.timePicker24Hour = moment.localeData().longDateFormat('LT').indexOf('A') < 1;
+                }
+
                 var isUtc = options.isUtc;
                 var isIso = options.isIso;
                 var timePicker = options.timePicker;
@@ -334,6 +337,7 @@
                 var timePickerSeconds = options.timePickerSeconds;
                 var dateFormat = options.dateFormat;
                 var separator = options.separator;
+                var defaultDateFormat = "YYYY-MM-DD";
                 const getMoment = function (date) {
                     if(!date){
                         return isUtc ? moment.utc() : moment();
@@ -404,27 +408,30 @@
                     $dateRangePicker.toggle();
                 });
                 
-                
-                if(!dateFormat) {
+                const extendDateFormat = function (format) {
                     if(timePicker){
                         if(timePicker24Hour){
                             if(timePickerSeconds){
-                                dateFormat = moment.localeData().longDateFormat('L') + " HH:mm:ss";
+                                format += " HH:mm:ss";
                             }else{
-                                dateFormat = moment.localeData().longDateFormat('L') + " HH:mm";
+                                format += " HH:mm";
                             }
                         }else {
                             if (timePickerSeconds) {
-                                dateFormat = moment.localeData().longDateFormat('L') + ' ' + " hh:mm:ss A"
+                                format += ' ' + " hh:mm:ss A"
                             } else {
-                                dateFormat = moment.localeData().longDateFormat('L') + " hh:mm A";
+                                format += " hh:mm A";
                             }
                         }
-                    }else{
-                        dateFormat = moment.localeData().longDateFormat('L');
                     }
+                    return format;
                 }
                 
+                defaultDateFormat = extendDateFormat(defaultDateFormat);
+
+                if(!dateFormat) {
+                    dateFormat = extendDateFormat(moment.localeData().longDateFormat('L'))
+                }
                 
                 if(!separator) {
                     separator = $dateRangePicker.locale.separator;
@@ -524,11 +531,10 @@
                 
                 function formatDate(date){
                     if(date){
-                        debugger;
                         if(isIso){
-                            return date.format();
+                            return date.locale('en').format();
                         }
-                        return date.format(dateFormat)
+                        return date.locale('en').format(defaultDateFormat)
                     }
                     return null;
                 }
@@ -560,6 +566,8 @@
                     $input[0].getFormattedStartDate = getFormattedStartDate;
                     $input[0].getFormattedEndDate = getFormattedEndDate;
                 }
+
+                $input.trigger('change');
             });
     }