Merge pull request #519 from arknu/datepicker-locale2

U4-5520: Localize date/time picker (2nd try)

src/Umbraco.Web.UI.Client/lib/datetimepicker/langs/datetimepicker.pt-BR.js

@@ -1,14 +0,0 @@
-/**
- * Brazilian translation for bootstrap-datetimepicker
- * Cauan Cabral <cauan@radig.com.br>
- */
-; (function ($) {
-    $.fn.datetimepicker.dates['pt-BR'] = {
-        days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
-        daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
-        daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],
-        months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
-        monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
-        today: "Hoje"
-    };
-}(jQuery));

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -496,3 +496,9 @@ ul.color-picker li a  {
 .umb-tags .tag i{padding: 2px;}
 .umb-tags input{border: none; background: white}
 
+//
+// Date/time picker
+// --------------------------------------------------
+.bootstrap-datetimepicker-widget .btn{padding: 0;}
+.bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
+.umb-datepicker .input-append .add-on{cursor: pointer;}

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js

@@ -1,14 +1,18 @@
 function dateTimePickerController($scope, notificationsService, assetsService, angularHelper, userService, $element) {
 
-    //lists the custom language files that we currently support
-    var customLangs = ["pt-BR"];
-
     //setup the default config
     var config = {
         pickDate: true,
         pickTime: true,
-        pick12HourFormat: false,
-        format: "yyyy-MM-dd hh:mm:ss"
+		useSeconds: true,
+        format: "YYYY-MM-DD HH:mm:ss",
+		icons: {
+                    time: "icon-time",
+                    date: "icon-calendar",
+                    up: "icon-chevron-up",
+                    down: "icon-chevron-down"
+                }
+
     };
 
     //map the user config
@@ -24,12 +28,12 @@ function dateTimePickerController($scope, notificationsService, assetsService, a
     function applyDate(e) {
         angularHelper.safeApply($scope, function() {
             // when a date is changed, update the model
-            if (e.localDate) {
-                if ($scope.model.config.format == "yyyy-MM-dd hh:mm:ss") {
-                    $scope.model.value = e.localDate.toIsoDateTimeString();
+            if (e.date) {
+                if ($scope.model.config.pickTime) {
+                    $scope.model.value = e.date.format("YYYY-MM-DD HH:mm:ss");
                 }
                 else {
-                    $scope.model.value = e.localDate.toIsoDateString();
+                    $scope.model.value = e.date.format("YYYY-MM-DD");
                 }
             }
             
@@ -43,34 +47,34 @@ function dateTimePickerController($scope, notificationsService, assetsService, a
     userService.getCurrentUser().then(function (user) {
 
         assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css').then(function() {
-            var filesToLoad = ["lib/datetimepicker/bootstrap-datetimepicker.js"];
 
-            //if we support this custom culture, set it, then we'll need to load in that lang file
-            if (_.contains(customLangs, user.locale)) {
-                $scope.model.config.language = user.locale;
-                filesToLoad.push("lib/datetimepicker/langs/datetimepicker." + user.locale + ".js");
-            }
+        var filesToLoad = ["lib/datetimepicker/moment-with-locales.js",
+						   "lib/datetimepicker/bootstrap-datetimepicker.js"];
 
-            assetsService.load(filesToLoad).then(
-                function () {
-                    //The Datepicker js and css files are available and all components are ready to use.
+            
+		$scope.model.config.language = user.locale;
+		
 
-                    // Get the id of the datepicker button that was clicked
-                    var pickerId = $scope.model.alias;
+		assetsService.load(filesToLoad).then(
+			function () {
+				//The Datepicker js and css files are available and all components are ready to use.
 
-                    // Open the datepicker and add a changeDate eventlistener
-                    $element.find("div:first")
-                        .datetimepicker($scope.model.config)
-                        .on("changeDate", applyDate);
+				// Get the id of the datepicker button that was clicked
+				var pickerId = $scope.model.alias;
 
-                    //manually assign the date to the plugin
-                    $element.find("div:first").datetimepicker("setValue", $scope.model.value ? $scope.model.value : null);
+				// Open the datepicker and add a changeDate eventlistener
+				$element.find("div:first")
+					.datetimepicker($scope.model.config)
+					.on("dp.change", applyDate);
 
-                    //Ensure to remove the event handler when this instance is destroyted
-                    $scope.$on('$destroy', function () {
-                        $element.find("div:first").datetimepicker("destroy");
-                    });
-                });
+				//manually assign the date to the plugin
+				$element.find("div:first").datetimepicker("setValue", $scope.model.value ? $scope.model.value : null);
+
+				//Ensure to remove the event handler when this instance is destroyted
+				$scope.$on('$destroy', function () {
+					$element.find("div:first").datetimepicker("destroy");
+				});
+			});
         });
 
         

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html

@@ -5,7 +5,7 @@
                 ng-required="model.validation.mandatory"   
                 val-server="value" />
         <span class="add-on">
-            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
+            <i class="icon-calendar"></i>
         </span>        
     </div>
 

src/Umbraco.Web/PropertyEditors/DatePropertyEditor.cs

@@ -16,7 +16,7 @@ namespace Umbraco.Web.PropertyEditors
         {
             _defaultPreVals = new Dictionary<string, object>
                 {
-                    {"format", "yyyy-MM-dd"},
+                    {"format", "YYYY-MM-DD"},
                     {"pickTime", false}
                 };
         }

src/Umbraco.Web/PropertyEditors/DateTimePropertyEditor.cs

@@ -14,7 +14,7 @@ namespace Umbraco.Web.PropertyEditors
                 {
                     //NOTE: This is very important that we do not use .Net format's there, this format
                     // is the correct format for the JS picker we are using so you cannot capitalize the HH, they need to be 'hh'
-                    {"format", "yyyy-MM-dd hh:mm:ss"}
+                    {"format", "YYYY-MM-DD HH:mm:ss"}
                 };
         }