jquery - Umbraco7 new backoffice section, edit date field, AngularJS -

i'm trying create edit screen new section in office. i've followed various tutorials on how go , working fine normal text fields.

however, model has 2 date fields part of , put in date pickers them. cannot life of me them work. i've tried hooking bootstrap , using bootstrap-datepicker turn text input's date time pickers no avail.

what's more annoying if use input types of date, create screen works no problem, date pickers. due version of angularjs within umbraco, edit screen not bind correctly hence trying find way around it.

i using angularjs approach creating view.

any on how can achieve appreciated.

links:

main tutorial

bootstrap-datepicker documents

---- above question posted on our.umbraco.org forum has not had response thought ask helpful folk here. ----

further information,

i've tried this:

plunker example of possible work around

however, doesn't seem work when implemented in umbraco. getting error saying moment not found yet when examine page can see following line exists in it:

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

i paste entire plunker example here example works fine. doesn't work when use within umbraco plugin code.

i'm @ complete loss right now. ideally sort of artificial "date picker" doesn't seem feasible option plunker approach next thought.

thanks in advance

nik

i came across issue while ago , resorted creating custom angular controller copy of default umbraco umbraco.propertyeditors.datepickercontroller umbraco.controllers.js.

create new file called datepicker.controller.js in plugin folder , paste in following code:

angular.module("umbraco").controller("custom.datepickercontroller",     function ($scope, notificationsservice, assetsservice, angularhelper, userservice, $element) {          //lists custom language files support         var customlangs = ["pt-br"];          //setup default config         var config = {             pickdate: true,             picktime: false,             pick12hourformat: false,             format: "dd/mm/yyyy"         };          //handles date changing via api         function applydate(e) {             angularhelper.safeapply($scope, function () {                 // when date changed, update 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 current user see if can localize 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 support custom culture, set it, we'll need load in 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 , css files available , components ready use.                          // open datepicker , add changedate eventlistener                         $element.find("div:first")                             .datetimepicker(config)                             .on("changedate", applydate);                          if ($scope.criteria[$element.attr('id')]) {                             //manually assign date plugin                             $element.find("div:first").datetimepicker("setvalue", $scope.criteria[$element.attr('id')]);                         }                          //ensure remove event handler when instance destroyted                         $scope.$on('$destroy', function () {                             $element.find("div:first").datetimepicker("destroy");                         });                     });             });         });     }); 

include reference new file in package.manifest follows:

{     javascript: [         '~/app_plugins/custom/datepicker.controller.js'     ] } 

then add input view , decorate containing div ng-controller attribute referencing new controller (custom.datepickercontroller in 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 few customisations controller because wanted bind form criteria object. might want change few things in order working in way want should @ least give starting point.