मेरे पास एक फॉर्म के अंदर दो डेटपिकर हैं। जब उपयोगकर्ता पहली तारीख का चयन करता है, तो दूसरे डेटपिकर की न्यूनतम और अधिकतम तिथि अपडेट की जानी चाहिए (चयन से एक वर्ष)। लेकिन मेरे मामले में न्यूनतम और अधिकतम तिथि केवल एक बार अपडेट होती है, जब मैं पहली बार पहली डेटपिकर में तारीख का चयन करता हूं। लेकिन अगर मैं चयन बदलता हूं, तो दूसरा डेटपिकर बदले गए मूल्य के साथ संशोधित नहीं होता है।
एचटीएमएल:
<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
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
$element.datepicker...
को$scope.$evalAsync(function(){ //date picker });
में लपेटें