diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index f34d45be63..e06a45771b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -522,3 +522,5 @@ ul.color-picker li a { .bootstrap-datetimepicker-widget .btn{padding: 0;} .bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;} .umb-datepicker .input-append .add-on{cursor: pointer;} +.umb-datepicker p {margin-top:10px;} +.umb-datepicker p a{color: @gray;} \ No newline at end of file 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 index eb49bc3b39..64a22d4c54 100644 --- 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,7 +18,8 @@ function dateTimePickerController($scope, notificationsService, assetsService, a //map the user config $scope.model.config = angular.extend(config, $scope.model.config); - $scope.datetimePickerValue = $scope.model.value; + $scope.hasDatetimePickerValue = $scope.model.value ? true : false; + $scope.datetimePickerValue = null; //hide picker if clicking on the document $scope.hidePicker = function () { @@ -35,14 +36,20 @@ function dateTimePickerController($scope, notificationsService, assetsService, a function applyDate(e) { angularHelper.safeApply($scope, function() { // when a date is changed, update the model - if (e.date) { - if ($scope.model.config.pickTime) { - $scope.model.value = e.date.format("YYYY-MM-DD HH:mm:ss"); + if (e.date && e.date.isValid()) { + $scope.datePickerForm.datepicker.$setValidity("pickerError", true); + $scope.hasDatetimePickerValue = true; + if (!$scope.model.config.format) { + $scope.datetimePickerValue = e.date; } else { - $scope.model.value = e.date.format("YYYY-MM-DD"); + $scope.datetimePickerValue = e.date.format($scope.model.config.format); } } + else { + $scope.hasDatetimePickerValue = false; + $scope.datetimePickerValue = null; + } if (!$scope.model.config.pickTime) { $element.find("div:first").datetimepicker("hide", 0); @@ -50,6 +57,15 @@ function dateTimePickerController($scope, notificationsService, assetsService, a }); } + var picker = null; + + $scope.clearDate = function() { + $scope.hasDatetimePickerValue = false; + $scope.datetimePickerValue = null; + $scope.model.value = null; + $scope.datePickerForm.datepicker.$setValidity("pickerError", true); + } + //get the current user to see if we can localize this picker userService.getCurrentUser().then(function (user) { @@ -69,25 +85,39 @@ function dateTimePickerController($scope, notificationsService, assetsService, a // Get the id of the datepicker button that was clicked var pickerId = $scope.model.alias; - // Open the datepicker and add a changeDate eventlistener - $element.find("div:first") - .datetimepicker($scope.model.config) - .on("dp.change", applyDate); + var element = $element.find("div:first"); - //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); - } - } + // Open the datepicker and add a changeDate eventlistener + element + .datetimepicker(angular.extend({ useCurrent: true }, $scope.model.config)) + .on("dp.change", applyDate) + .on("dp.error", function(a, b, c) { + $scope.hasDatetimePickerValue = false; + $scope.datePickerForm.datepicker.$setValidity("pickerError", false); + }); + + if ($scope.hasDatetimePickerValue) { + + //assign value to plugin/picker + element.datetimepicker("setValue", $scope.model.value ? new Date($scope.model.value) : moment()); + + if (!$scope.model.config.format) { + $scope.datetimePickerValue = moment($scope.model.value); + } + else { + $scope.datetimePickerValue = moment($scope.model.value).format($scope.model.config.format); + } + } + + element.find("input").bind("blur", function() { + //we need to force an apply here + $scope.$apply(); + }); //Ensure to remove the event handler when this instance is destroyted - $scope.$on('$destroy', function () { - $element.find("div:first").datetimepicker("destroy"); + $scope.$on('$destroy', function () { + element.find("input").unbind("blur"); + element.datetimepicker("destroy"); }); }); }); @@ -95,9 +125,24 @@ function dateTimePickerController($scope, notificationsService, assetsService, a }); + var unsubscribe = $scope.$on("formSubmitting", function (ev, args) { + if ($scope.hasDatetimePickerValue) { + if ($scope.model.config.pickTime) { + $scope.model.value = $element.find("div:first").data().DateTimePicker.getDate().format("YYYY-MM-DD HH:mm:ss"); + } + else { + $scope.model.value = $element.find("div:first").data().DateTimePicker.getDate().format("YYYY-MM-DD"); + } + } + else { + $scope.model.value = null; + } + }); + //unbind doc click event! $scope.$on('$destroy', function () { $(document).unbind("click", $scope.hidePicker); + unsubscribe(); }); } 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 index b3e503eb4a..898afe88a3 100644 --- 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,14 +1,26 @@
-
- - - - -
+ +
+ + - Required - {{propertyForm.datepicker.errorMsg}} + + + + +
+ + Required + {{datePickerForm.datepicker.errorMsg}} + Invalid date + +

+ Clear date +

+ +