मेरे पास एक फॉर्म के अंदर दो डेटपिकर हैं। जब उपयोगकर्ता पहली तारीख का चयन करता है, तो दूसरे डेटपिकर की न्यूनतम और अधिकतम तिथि अपडेट की जानी चाहिए (चयन से एक वर्ष)। लेकिन मेरे मामले में न्यूनतम और अधिकतम तिथि केवल एक बार अपडेट होती है, जब मैं पहली बार पहली डेटपिकर में तारीख का चयन करता हूं। लेकिन अगर मैं चयन बदलता हूं, तो दूसरा डेटपिकर बदले गए मूल्य के साथ संशोधित नहीं होता है।

एचटीएमएल:

<div class="form-group">
        <label>Model Production Date</label>
        <input date-picker1 type="text" class="form-control" placeholder="Production Date" ng-model="productionDate">
      </div>
      <div class="form-group">
        <label>Next Review Date</label>
        <input date-picker2 type="text" class="form-control" placeholder="Next Review Date" ng-model="nextReviewDate">
      </div>

जेएस:

.directive('datePicker1', function () {

return function (scope, element, attrs) {

    element.datepicker({
        format: "yyyy/mm/dd",
        todayHighlight: true,
        //startDate: stDate || new Date(),
        //endDate:enDate || new Date(),
        autoclose: true 
    }); 
    scope.$watch('productionDate', function (newVal, oldVal) {

        if(newVal){
            scope['productionDate'] = newVal;
        }
        else{
            return;
        }
    });         
};

})  



.directive('datePicker2', function () {

return {
    restrict: 'A',
    link: linker,

}

function linker(scope, $element, attrs) {


    scope.$watch('productionDate', function (newVal, oldVal) {
        console.log('productionDate===='+scope.productionDate);
        splittedDateString = scope.productionDate.split('/');
        stDate = new Date(splittedDateString[0], splittedDateString[1]-1, splittedDateString[2]);
        enDate = new Date(stDate.getFullYear()+1, splittedDateString[1]-1, splittedDateString[2]);
        console.log("Start Date = "+stDate);
        console.log("End Date = "+enDate);
        $element.datepicker({
            format: "yyyy/mm/dd",
            todayHighlight: true,
            startDate: stDate || new Date(),
            endDate:enDate || new Date(),
            autoclose: true 
        }); 

    });         
};

})

हर बार मैं देख सकता हूं कि stDate और enDate का मान बदल गया है, लेकिन दूसरी तारीख चुनने की तारीख और खत्म होने की तारीख अपडेट नहीं हो रही है। मैं 2 दिनों से अटका हुआ हूं। कृपया सहायता कीजिए

0
sankycse 7 फरवरी 2017, 16:43
नमस्ते, आप अपने डेटपिकर को प्रस्तुत करने के लिए किस स्क्रिप्ट का उपयोग करते हैं?
 – 
Jaay
7 फरवरी 2017, 16:54
1
क्या आप एक बेला प्रदान करना चाहेंगे?
 – 
Vilas Kumkar
7 फरवरी 2017, 16:55
अपने $element.datepicker... को $scope.$evalAsync(function(){ //date picker }); में लपेटें
 – 
Gangadhar JANNU
7 फरवरी 2017, 16:55
मैंने अभी कोशिश की है, लेकिन अभी भी अपडेट नहीं हो रहा है।
 – 
sankycse
7 फरवरी 2017, 17:01
1
क्या आप अपने कोड के साथ एक पहेली प्रदान कर सकते हैं, इससे बहुत मदद मिलेगी।
 – 
Jaay
7 फरवरी 2017, 17:12

1 उत्तर

सबसे बढ़िया उत्तर

कुछ बदलाव की जरूरत है।

 angular.module("myApp", []);
  angular
    .module("myApp")
    .directive('datePicker1', function() {
      return function(scope, element, attrs) {
        element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        scope.$evalAsync(function() {
          scope['productionDate'] = element.val();
        });
      };
    })
    .directive('datePicker2', function() {
      return {
        restrict: 'A',
        link: linker,
      }

      function linker(scope, $element, attrs) {
        // yyyy/mm/dd 2017/02/07
        var dateRegex = /^(\d{4})\/(\d{2})\/(\d{2})$/i,
          matchArr;
        var oneYearFromNow = null;
        $element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        scope.$watch('productionDate', function(newVal, oldVal) {
          if (newVal) {
            matchArr = newVal.match(dateRegex);
            // (parseInt(newVal.split("/")[0], 10) + 1) + newVal.slice(4);
            oneYearFromNow = (parseInt(matchArr[1], 10) + 1) + newVal.slice(4);
            $element.datepicker('setStartDate', newVal);
            $element.datepicker('setEndDate', oneYearFromNow);
            $element.datepicker('update');
          }
        });
      };
    });

यह काम कर रहा है। fiddle पर एक नज़र डालें


मैं कोड स्पष्टीकरण के साथ अपना उत्तर अपडेट करूंगा

1
Gangadhar JANNU 7 फरवरी 2017, 19:04
बहुत खूब!!! यह बिल्कुल अद्भुत काम करता है। कृपया कुछ स्पष्टीकरण प्रदान करें, मैं कोणीय के लिए नया हूँ। और आपका बहुत शुक्रिया।
 – 
sankycse
7 फरवरी 2017, 20:22