yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes date picker: U4-6715 i can't seem to remove a "publish-at" date? - date picker is more robust now and does proper validity checking/feedback

Browse Source
This commit is contained in:
Shannon
2015-07-08 11:12:19 +02:00
parent da7456fd2a
commit 45bec2a67d
3 changed files with 91 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -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;}

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

@@ -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();
});
}

34
src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
View File

@@ -1,14 +1,26 @@
<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="datetimePickerValue"
ng-required="model.validation.mandatory"
val-server="value" />
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>
<ng-form name="datePickerForm">
<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="datetimePickerValue"
ng-required="model.validation.mandatory"
val-server="value"
class="datepickerinput" />
<span class="help-inline" val-msg-for="datepicker" val-toggle-msg="required">Required</span>
<span class="help-inline" val-msg-for="datepicker" val-toggle-msg="valServer">{{propertyForm.datepicker.errorMsg}}</span>
<span class="add-on">
<i class="icon-calendar"></i>
</span>
</div>
<span class="help-inline" val-msg-for="datepicker" val-toggle-msg="required">Required</span>
<span class="help-inline" val-msg-for="datepicker" val-toggle-msg="valServer">{{datePickerForm.datepicker.errorMsg}}</span>
<span class="help-inline" val-msg-for="datepicker" val-toggle-msg="pickerError">Invalid date</span>
<p ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
<a href ng-click="clearDate()"><i class="icon-delete"></i><small><localize key="content_removeDate">Clear date</localize></small></a>
</p>
</ng-form>
</div>