Automatically initialize datepicker.

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Packages/Volo/Abp/AspNetCore/Mvc/UI/Packages/BootstrapDatepicker/BootstrapDatepickerScriptContributor.cs

@@ -9,6 +9,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.BootstrapDatepicker
     [DependsOn(typeof(JQueryScriptContributor))]
     public class BootstrapDatepickerScriptContributor : BundleContributor
     {
+        public static readonly Dictionary<string, string> CultureMap = new Dictionary<string, string>
+        {
+            {"zh-Hans", "zh-CN"}
+        };
+    
         public override void ConfigureBundle(BundleConfigurationContext context)
         {
             context.Files.AddIfNotContains("/libs/bootstrap-datepicker/bootstrap-datepicker.min.js");
@@ -21,10 +26,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.BootstrapDatepicker
                 ? "en"
                 : CultureInfo.CurrentUICulture.Name;
 
-            if (TryAddCultureFile(context, MapCultureName(cultureName)))
-            {
-                return;
-            }
+            TryAddCultureFile(context, MapCultureName(cultureName));
         }
 
         protected virtual bool TryAddCultureFile(BundleConfigurationContext context, string cultureName)
@@ -42,7 +44,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.BootstrapDatepicker
         
         protected virtual string MapCultureName(string cultureName)
         {
-            return cultureName;
+            return CultureMap.GetOrDefault(cultureName) ??
+                   cultureName;
         }
     }
 }

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

@@ -1,6 +1,7 @@
 (function ($) {
 
     abp.dom = abp.dom || {};
+
     abp.dom.initializers = abp.dom.initializers || {};
 
     abp.dom.initializers.initializeForms = function ($forms, validate) {
@@ -70,10 +71,60 @@
         $timeagos.timeago();
     }
 
+    abp.libs = abp.libs = abp.libs || {};
+    abp.libs.bootstrapDatepicker = {
+        languageMap: {
+            'zh-Hans': 'zh-CN'
+        },
+        mapLanguageName: function (name) {
+            return abp.libs.bootstrapDatepicker.languageMap[abp.localization.currentCulture.name] || name;
+        },
+        isLanguageMapped: function (name) {
+            return abp.libs.bootstrapDatepicker.languageMap[abp.localization.currentCulture.name] !== undefined;
+        },
+        getCurrentLanguageConfig: function () {
+            var mappedName = abp.libs.bootstrapDatepicker.mapLanguageName(abp.localization.currentCulture.name);
+            return $.fn.datepicker.dates[mappedName];
+        },
+        normalizeLanguageConfig: function () {
+            var languageConfig = abp.libs.bootstrapDatepicker.getCurrentLanguageConfig();
+            if (languageConfig) {
+                if (!languageConfig.format || abp.libs.bootstrapDatepicker.isLanguageMapped(abp.localization.currentCulture.name)) {
+                    languageConfig.format = abp.localization.currentCulture.dateTimeFormat.shortDatePattern.toLowerCase();
+                }
+            }
+        },
+        getFormattedValue: function (isoFormattedValue) {
+            return luxon
+                .DateTime
+                .fromISO(isoFormattedValue, {
+                    locale: abp.localization.currentCulture.name
+                }).toLocaleString();
+        }
+    };
+
+    abp.dom.initializers.initializeDatepickers = function ($rootElement) {
+        $rootElement
+            .findWithSelf('input.datepicker,input[type=date]')
+            .each(function () {
+                var $input = $(this);
+                $input.attr('type', 'text');
+                $input.val(abp.libs.bootstrapDatepicker.getFormattedValue($input.val()))
+                $input.datepicker({
+                    todayBtn: "linked",
+                    autoclose: true,
+                    language: abp.libs.bootstrapDatepicker.mapLanguageName(abp.localization.currentCulture.cultureName)
+                }).on('hide', function (e) {
+                    e.stopPropagation();
+                });
+            });
+    }
+
     abp.dom.onNodeAdded(function (args) {
         abp.dom.initializers.initializeToolTips(args.$el.findWithSelf('[data-toggle="tooltip"]'));
         abp.dom.initializers.initializePopovers(args.$el.findWithSelf('[data-toggle="popover"]'));
         abp.dom.initializers.initializeTimeAgos(args.$el.findWithSelf('.timeago'));
+        abp.dom.initializers.initializeDatepickers(args.$el);
         abp.dom.initializers.initializeForms(args.$el.findWithSelf('form'), true);
         abp.dom.initializers.initializeScript(args.$el);
     });
@@ -84,10 +135,15 @@
         });
     });
 
+    abp.event.on('abp.configurationInitialized', function () {
+        abp.libs.bootstrapDatepicker.normalizeLanguageConfig();
+    });
+
     $(function () {
         abp.dom.initializers.initializeToolTips($('[data-toggle="tooltip"]'));
         abp.dom.initializers.initializePopovers($('[data-toggle="popover"]'));
         abp.dom.initializers.initializeTimeAgos($('.timeago'));
+        abp.dom.initializers.initializeDatepickers($(document));
         abp.dom.initializers.initializeForms($('form'));
         $('[data-auto-focus="true"]').first().findWithSelf('input,select').focus();
     });