2013-11-27 13 views
7

अक्षम कर रहा हूं मैं AngularUI डेटपिकर का उपयोग कर रहा हूं।कोणीययूआई डेटपिकर गतिशील दिनांक

मेरे पास दो डेटपिकर्स हैं जो एक दूसरे को प्रभावित करते हैं। एक उदाहरण के लिए "प्रारंभ तिथि" है और दूसरा एक "समाप्ति तिथि" है। दोनों डेटपिकर्स के लिए सत्यापन बनाने के बजाय, मैं अमान्य तिथियों (यानी प्रारंभ तिथि से पहले की समाप्ति तिथि और इसके विपरीत) के विकल्प को खत्म करना चाहता हूं।

क्या तारीख के चयन पर दिनांक-अक्षम विशेषता को पुन: ट्रिगर करने का कोई तरीका है? (अन्य डेटपिकर की तिथि-अक्षम को फिर से ट्रिगर करें)

मेरा प्लंकर: मेरे पास एक प्रारंभ और समाप्ति तिथि है, क्योंकि आप प्रत्येक दिनांक पिकर खोलते समय देख सकते हैं, आप अंतिम तिथि से अधिक प्रारंभ तिथि नहीं चुन सकते और इसके विपरीत। हालांकि अगर मैं अपनी प्रारंभ तिथि 11/21 पर बदलता हूं, तो मुझे अंतिम तिथि का डेटपिकर अपडेट करना है ताकि 11/20 अब क्लिक करने योग्य न हो। क्या इसे करने का कोई तरीका है?

http://plnkr.co/edit/TgisJnSwQItDeCuIReLL?p=preview

उत्तर

8

यह इस मिनट का उपयोग कर ऐसा करना संभव है और अधिकतम पिकर 'मूल्यों को देख के साथ संयोजन में जिम्मेदार बताते हैं। http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview

+0

मदद करता है जो पूरी तरह से काम करता है, धन्यवाद! – changus

+0

ग्रेट वर्क, धन्यवाद – jayM

+0

आपके प्लंकर से, मुझे एक दोष दिखाई देता है। अगर मैं पहली बार समाप्ति तिथि (10/2/2014) का चयन करता हूं और फिर प्रारंभ तिथि चुनने के लिए जाता हूं और आज (10/0/2014) क्लिक करता हूं। यह मुझे आज (10/8/2014) चुनने की तारीख के रूप में चुनने की अनुमति देता है जो अंतिम तिथि से अधिक है (10/2/2014) –

4

पर आपको वास्तव में सभी जावास्क्रिप्ट की आवश्यकता नहीं है। यहां पिछले समाधान का एक कांटा है।

http://plnkr.co/edit/kXkzCeBTlxOpOyZKfTiN

अगर आप दो आदानों ऐसे

  <input id="getTSStartDateInput" ng-model="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/> 
      <input id="getTSEndDateInput" ng-model="EndDate" min="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/> 

के रूप में यह स्वचालित रूप से काम करते हैं और किसी भी अंतिम तिथि प्रारंभ तिथि से पहले की नोटिस एनजी मॉडल = "EndDate" मिनट निष्क्रिय कर देगा है = "स्टार्टडेट", आपको बस इतना ही चाहिए।

0

मैंने स्टार्टडेट और एंडडेट दोनों में एनजी-चेंज जोड़ने का एक सरल समाधान उपयोग किया है। यदि स्टार्टडेट परिवर्तन बदलता है तो endDate के minDate को प्रारंभ करने के लिए सेट करें और उसी दिनांक के लिए चला जाता है। उम्मीद है कि

संबंधित मुद्दे