Umbraco7 नया बैकऑफिस अनुभाग, दिनांक फ़ील्ड संपादित करें, AngularJS

Question

मैं बैक ऑफिस में किसी नए अनुभाग के लिए एक संपादन स्क्रीन बनाने की कोशिश कर रहा हूं। मैंने इस बारे में विभिन्न ट्यूटोरियल्स का पालन किया है कि इस बारे में कैसे जाना है और यह सामान्य टेक्स्ट फ़ील्ड के लिए ठीक काम कर रहा है।

हालांकि, मेरे मॉडल के 2 भाग फ़ील्ड इसके हिस्से के रूप में हैं और मैं उनके लिए कुछ तारीख पिकर्स डालना चाहता हूं। मैं उनके जीवन के लिए काम नहीं कर सकता। मैंने बूटस्ट्रैप में हुकिंग करने और बूट इनपुट को डेट टाइम पिकर्स में बदलने के लिए बूटस्ट्रैप-डेटपिकर का उपयोग करने की कोशिश की है लेकिन इसका कोई फायदा नहीं हुआ है।

और अधिक परेशान करना यह है कि यदि मैं इनपुट प्रकार की तारीख का उपयोग करता हूं, तो निर्माण स्क्रीन दिनांक पिकर्स के साथ कोई समस्या नहीं करती है। हालांकि उम्ब्राको के भीतर एंगुलरजेस के संस्करण के कारण, संपादन स्क्रीन सही ढंग से बाध्य नहीं होती है इसलिए इसके चारों ओर एक रास्ता खोजने की कोशिश कर रहा है।

मैं दृश्य बनाने के लिए AngularJS दृष्टिकोण का उपयोग कर रहा हूं।

मैं इसे कैसे प्राप्त कर सकता हूं इस पर कोई मदद की सराहना की जाएगी।

लिंक:

Main tutorial

Bootstrap-DatePicker help documents

---- ऊपर सवाल our.Umbraco.org मंच पर पोस्ट किया गया था, लेकिन इसलिए मैंने सोचा कि मैं आप से पूछना होगा एक प्रतिक्रिया नहीं मिली है सहायक लोक यहाँ। ----

अधिक जानकारी,

मैं इस तरह कुछ करने के लिए कोशिश की है:

Plunker Example of a possible work around

हालांकि, यह जब Umbraco में लागू काम करने के लिए प्रतीत नहीं होता। मैं हो रही है कि पल कह एक त्रुटि अभी तक नहीं मिला है जब मैं जांच पेज मैं निम्न पंक्ति देख सकते हैं यह में मौजूद है:

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

मैं यहाँ पूरे Plunker उदाहरण पेस्ट, लेकिन उदाहरण के ही ठीक काम करता है। जब मैं अपने उम्ब्राको प्लगइन कोड में इसका उपयोग करता हूं तो यह काम नहीं करता है।

मैं अभी एक पूर्ण नुकसान पर हूं। आदर्श रूप में मैं कुछ प्रकार के कृत्रिम "डेट पिकर" चाहूंगा लेकिन वर्तमान में यह एक व्यवहार्य विकल्प प्रतीत नहीं होता है, इसलिए प्लंकर दृष्टिकोण मेरा अगला विचार था।

अग्रिम धन्यवाद

Nik

Answer 1

मैंने कुछ समय पहले इस मुद्दे में आए और मैं एक कस्टम कोणीय नियंत्रक अनिवार्य रूप से डिफ़ॉल्ट की एक प्रति Umbraco Umbraco.PropertyEditors.DatepickerControllerumbraco.controllers.js से है कि बनाने का सहारा।

अपने प्लगइन फ़ोल्डर में बुलाया datepicker.controller.js एक नई फ़ाइल बनाएं और निम्नलिखित कोड में पेस्ट:

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

अपने पैकेज में नई फ़ाइल के लिए एक संदर्भ को शामिल करें। प्रकट इस प्रकार है:

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

फिर एक ng-controller विशेषता अपने नए नियंत्रक (इस मामले में Custom.DatepickerController) को संदर्भित के साथ अपने दृश्य के लिए एक इनपुट जोड़ सकते हैं और सजाने युक्त div।

<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> 

मैंने नियंत्रक को कुछ अनुकूलन किए क्योंकि मैं अपने फॉर्म को मानदंड वस्तु से बांधना चाहता था। आप जिस तरह से काम करना चाहते हैं, उसे काम करने के लिए आप कुछ चीजें बदलना चाहेंगे लेकिन इससे आपको कम से कम एक प्रारंभिक बिंदु देना चाहिए।