Umbraco7 new backoffice section, date editing field, AngularJS

Question

I am trying to create an editing screen for a new section in the back office. I followed various tutorials on how to do this, and it works great for regular text fields.

However, my model has 2 date fields as part of this, and I would like to add some date pickers for them. I cannot make them work in my life. I tried connecting to the download and using Bootstrap-DatePicker to enable text input in time collectors, but to no avail.

What is more annoying is that if I use date input types, then the create screen will not work with date selections. However, due to the version of AngularJs in Umbraco, the edit screen does not link correctly, so it tries to find a way around it.

I am using the AngularJS approach to create a view.

Any help on how I can achieve this would be greatly appreciated.

References:

Basic tutorial

Help documents Bootstrap-DatePicker

---- The above question was posted on our.Umbraco.org forum, but I didn’t have an answer, so I thought I would ask you to help you here. ----

Additional Information,

I tried to do something like this:

Plunker Example of Possible Work

However, it does not seem to work when implemented in Umbraco. I get a message that Moment has not yet been found when I look at a page on which I see that the following line exists in it:

<script src="http:////cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script> 

I would put in the whole Plunker example, but the example itself works fine. It just doesn't work when I use it in my Umbraco module code.

Now I have a complete loss. Ideally, I would like some kind of artificial “date picker,” but this is not currently possible, so Plunker's approach was my next thought.

Thank you in advance

Nick

Answer 1

I ran into this problem a while ago, and I resorted to creating a custom angular controller, which is essentially a copy of the default Umbraco Umbraco.PropertyEditors.DatepickerController from umbraco.controllers.js .

Create a new file called datepicker.controller.js in your plugin folder and paste the following code:

 angular.module("umbraco").controller("Custom.DatepickerController", function ($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: false, pick12HourFormat: false, format: "dd/MM/yyyy" }; //handles the date changing via the api function applyDate(e) { angularHelper.safeApply($scope, function () { // when a date is changed, update the model if (e.localDate) { if (config.format == "yyyy-MM-dd hh:mm:ss") { $scope.criteria[$element.attr('id')] = e.localDate.toIsoDateTimeString(); } else { $scope.criteria[$element.attr('id')] = e.localDate.toIsoDateString(); } } }); } //get the current user to see if we can localize this picker userService.getCurrentUser().then(function (user) { assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css').then(function () { var filesToLoad = ["lib/datetimepicker/bootstrap-datetimepicker.min.js"]; //if we support this custom culture, set it, then we'll need to load in that lang file if (_.contains(customLangs, user.locale)) { config.language = user.locale; filesToLoad.push("lib/datetimepicker/langs/datetimepicker." + user.locale + ".js"); } 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(config) .on("changeDate", applyDate); if ($scope.criteria[$element.attr('id')]) { //manually assign the date to the plugin $element.find("div:first").datetimepicker("setValue", $scope.criteria[$element.attr('id')]); } //Ensure to remove the event handler when this instance is destroyted $scope.$on('$destroy', function () { $element.find("div:first").datetimepicker("destroy"); }); }); }); }); }); 

Include the link to the new file in package.manifest as follows:

 { javascript: [ '~/App_Plugins/Custom/datepicker.controller.js' ] } 

Then add input to your view and decorate the ng-controller attribute containing the div , referencing your new controller ( Custom.DatepickerController in this case).

 <div class="control-group umb-control-group"> <div class="umb-el-wrap"> <label class="control-label">From date</label> <div class="controls controls-row"> <div class="umb-editor umb-datepicker" ng-controller="Custom.DatepickerController" id="from"> <div class="input-append date datepicker" style="position: relative;"> <input name="from" data-format="dd/MM/yyyy" type="text" ng-model="criteria.from" /> <span class="add-on"> <i data-date-icon="icon-calendar"></i> </span> </div> </div> </div> </div> </div> 

I made a few settings for the controller because I wanted to bind my form to the criteria object. You might want to change a few things to make it work the way you want, but that should at least give you a starting point.