Datepicker custom format

umbraco · May 18, 2015 · 43f99e1 · 43f99e1
1 parent 35cb4d5
commit 43f99e1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
@@ -18,9 +18,16 @@ function dateTimePickerController($scope, notificationsService, assetsService, a
     //map the user config
     $scope.model.config = angular.extend(config, $scope.model.config);
 
+    $scope.datetimePickerValue = $scope.model.value;
+
     //hide picker if clicking on the document 
     $scope.hidePicker = function () {
-        $element.find("div:first").datetimepicker("hide");
+        //$element.find("div:first").datetimepicker("hide");
+        // Sometimes the statement above fails and generates errors in the browser console. The following statements fix that.
+        var dtp = $element.find("div:first");
+        if (dtp && dtp.datetimepicker) {
+            dtp.datetimepicker("hide");
+        }
     };
     $(document).bind("click", $scope.hidePicker);
 
@@ -67,8 +74,16 @@ function dateTimePickerController($scope, notificationsService, assetsService, a
 					.datetimepicker($scope.model.config)
 					.on("dp.change", applyDate);
 
-				//manually assign the date to the plugin
-				$element.find("div:first").datetimepicker("setValue", $scope.model.value ? $scope.model.value : null);
+			    //manually assign the date to the plugin
+				if (!$scope.model.config.format) {
+				    $element.find("div:first").datetimepicker("setValue", $scope.model.value ? $scope.model.value : null);
+				}
+				else {
+				    $element.find("div:first").datetimepicker("setValue", $scope.model.value ? new Date($scope.model.value) : null);
+				    if ($scope.model.value && $scope.model.config.format) {
+				        $scope.datetimePickerValue = moment($scope.model.value).format($scope.model.config.format);
+				    }
+				}
 
 				//Ensure to remove the event handler when this instance is destroyted
 				$scope.$on('$destroy', function () {

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
@@ -1,7 +1,7 @@
 <div class="umb-editor umb-datepicker" ng-controller="Umbraco.PropertyEditors.DatepickerController">
     <div class="input-append date datepicker" style="position: relative;" id="datepicker{{model.alias}}">        
         <input  name="datepicker" data-format="{{model.config.format}}" type="text" 
-                ng-model="model.value"   
+                ng-model="datetimePickerValue"   
                 ng-required="model.validation.mandatory"   
                 val-server="value" />
         <span class="add-on">

diff --git a/src/Umbraco.Web/PropertyEditors/DatePropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/DatePropertyEditor.cs
@@ -23,9 +23,6 @@ public DatePropertyEditor()
 
         private IDictionary<string, object> _defaultPreVals;
 
-        /// <summary>
-        /// Overridden because we ONLY support Date (no time) format and we don't have pre-values in the db.
-        /// </summary>
         public override IDictionary<string, object> DefaultPreValues
         {
             get { return _defaultPreVals; }
@@ -60,5 +57,15 @@ public override object ConvertDbToEditor(Property property, PropertyType propert
             }
 
         }
+
+        protected override PreValueEditor CreatePreValueEditor()
+        {
+            return new DatePreValueEditor();
+        }
+
+        internal class DatePreValueEditor : PreValueEditor
+        {
+            public string DefaultValue { get; set; }
+        }
     }
 }