Fixes the datepicker control, updates it so that it supports time and a format that is configurable (pre-values) fixes toIsoDateTimeString() method.

src/Umbraco.Web.UI.Client/lib/umbraco/Extensions.js

@@ -5,7 +5,7 @@
         /** Converts a Date object to a globally acceptable ISO string, NOTE: This is different from the built in 
             JavaScript toISOString method which returns date/time like "2013-08-07T02:04:11.487Z" but we want "yyyy-MM-dd HH:mm:ss" */
         Date.prototype.toIsoDateTimeString = function (str) {
-            var month = this.getMonth().toString();
+            var month = (this.getMonth() + 1).toString();
             if (month.length === 1) {
                 month = "0" + month;
             }

src/Umbraco.Web.UI.Client/src/common/mocks/resources/_utils.js

@@ -45,7 +45,7 @@ angular.module('umbraco.mocks').
                         label: "Sample Editor",
                         id: 3,
                         properties: [
-                            { alias: "datepicker", label: "Datepicker", view: "datepicker", config: { rows: 7 } },
+                            { alias: "datepicker", label: "Datepicker", view: "datepicker", config: { pickTime: false, format: "yyyy-MM-dd" } },
                             { alias: "tags", label: "Tags", view: "tags", value: "" }
                         ]
                     },

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/bootstrap.datepicker.css

@@ -1,18 +0,0 @@
-/* Show cursor when hovering dates and navigation arrows, to indicate they are clickable */
-.datepicker-days .day,
-.datepicker .add-on,
-.datepicker-days .icon-arrow-right {
-    cursor: pointer;
-}
-.datepicker-days .day:hover {
-    background: #f8f8f7;
-}
-/* Ensures that the "select" color is not shown when clicking arrows in the datepicker window */
-.datepicker-days .icon-arrow-right {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}

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

@@ -1,27 +1,41 @@
 angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
     function ($scope, notificationsService, assetsService) {
-    
-    assetsService.loadJs(
-            'views/propertyeditors/datepicker/bootstrap.datepicker.js'
-        ).then(
-        function () {
-            //The Datepicker js and css files are available and all components are ready to use.
 
-            // Get the id of the datepicker button that was clicked
-            var pickerId = $scope.model.alias;
+        //setup the default config
+        var config = {
+            pickDate: true,
+            pickTime: true,
+            format: "yyyy-MM-dd HH:mm:ss"
+        };
+        //map the user config
+        angular.extend(config, $scope.model.config);
+        //map back to the model
+        $scope.model.config = config;
 
-            // Open the datepicker and add a changeDate eventlistener
-            $("#" + pickerId).datepicker({
-                format: "dd/mm/yyyy",
-                autoclose: true
-            }).on("changeDate", function (e) {
-                // When a date is clicked the date is stored in model.value as a ISO 8601 date
-                $scope.model.value = e.date.toIsoDateTimeString();
+        assetsService.loadJs(
+                'views/propertyeditors/datepicker/bootstrap-datetimepicker.min.js'
+            ).then(
+            function () {
+                //The Datepicker js and css files are available and all components are ready to use.
+
+                // Get the id of the datepicker button that was clicked
+                var pickerId = $scope.model.alias;
+
+                // Open the datepicker and add a changeDate eventlistener
+                $("#" + pickerId).datetimepicker($scope.model.config).on("changeDate", function (e) {
+                    // when a date is changed, update the model
+                    if (e.localDate) {
+                        $scope.model.value = e.localDate.toIsoDateTimeString();
+                    }
+                    else {
+                        $scope.model.value = null;
+                    }
+
+                });
             });
-        });
 
 
-    assetsService.loadCss(
-            'views/propertyeditors/datepicker/bootstrap.datepicker.css'
-        );    
-});
+        assetsService.loadCss(
+                'views/propertyeditors/datepicker/bootstrap-datetimepicker.min.css'
+            );
+    });

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

@@ -1,6 +1,8 @@
 <div ng-controller="Umbraco.Editors.DatepickerController">
-	<div class="input-append date datepicker" id="{{model.alias}}">
-		<input data-format="dd/MM/yyyy" type="text" value="{{model.value | date:'dd/MM/yyyy'}}" />
-		<span class="add-on"> <i class="icon-calendar"></i></span>
-	</div>
-</div>
+    <div class="input-append date datepicker" id="{{model.alias}}">        
+        <input data-format="{{$scope.model.config.format}}" type="text" value="{{model.value}}" />
+        <span class="add-on">
+            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
+        </span>
+    </div>
+</div>