Umbraco7 nuova sezione backoffice, campo data di modifica, AngularJS

Question

Sto provando a creare una schermata di modifica per una nuova sezione nel back office. Ho seguito vari tutorial su come procedere e funziona bene per i normali campi di testo.

Tuttavia, il mio modello ha 2 campi data come parte di esso e vorrei inserire alcuni raccoglitori di date per loro. Non posso per la vita di me farli lavorare. Ho provato ad agganciarlo al bootstrap e ad usare Bootstrap-DatePicker per trasformare gli input di testo in raccoglitori di data, ma senza risultati.

La cosa più fastidiosa è che se uso i tipi di data di input, la schermata di creazione non ha alcun problema, con i selettori di date. Tuttavia, a causa della versione di AngularJs all'interno di Umbraco, la schermata di modifica non si collega correttamente, quindi cerca di aggirare il problema.

Sto utilizzando l'approccio AngularJS per creare la vista.

Qualsiasi aiuto su come ottenere questo risultato sarebbe molto apprezzato.

vicini:

Main tutorial

Bootstrap-DatePicker help documents

---- La domanda di cui sopra è stato postato sul forum our.Umbraco.org, ma non ha avuto una risposta così ho pensato di chiedervi gente utile qui. ----

Ulteriori informazioni,

Ho cercato di fare qualcosa di simile:

Plunker Example of a possible work around

Tuttavia, non sembra funzionare quando viene implementato in Umbraco. Sto ottenendo un errore che dice che non è ancora Moment trovato quando esamino pagina posso vedere la seguente riga esiste in esso:

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

vorrei incollare l'intero esempio Plunker qui, ma l'esempio in sé funziona benissimo. Semplicemente non funziona quando lo uso nel mio codice Umbraco Plugin.

Sono completamente perso adesso. Idealmente mi piacerebbe una sorta di "data picker" artificiale ma che attualmente non sembra essere un'opzione fattibile, quindi l'approccio Plunker è stato il mio prossimo pensiero.

Grazie in anticipo

Nik

Answer 1

mi sono imbattuto in questo problema qualche tempo fa e ho fatto ricorso alla creazione di un controller angolare personalizzato che è essenzialmente una copia del difetto Umbraco Umbraco.PropertyEditors.DatepickerController da umbraco.controllers.js.

Creare un nuovo file chiamato datepicker.controller.js nella cartella Plugin e incollare il seguente codice:

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"); 
         }); 
        }); 
      }); 
     }); 
    }); 

Includere un riferimento al nuovo file nel pacchetto .manifestarsi come segue:

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

Quindi aggiungere un ingresso alla vista e decorare contenimento div con un attributo ng-controller referenziare il nuovo controllore (Custom.DatepickerController in questo caso).

Ho apportato alcune personalizzazioni al controller perché volevo associare il mio modulo a un oggetto criteri. Potresti voler cambiare alcune cose per farlo funzionare nel modo che preferisci, ma questo dovrebbe almeno darti un punto di partenza.