DatePalette - एक ढांचा जो उपयोगकर्ता के लिए ब्राउज़र में तारीख के साथ काम करने के लिए UI बनाता है

UI बनाने के संदर्भ में कार्य करने के लिए दिनांक एक अत्यंत असुविधाजनक चीज़ है।

न केवल यह यौगिक (वर्ष, महीना, दिन) है, और इसके घटक आपस में एकाधिक नहीं हैं। तो यह भी काफी बड़ा है, लेकिन इसमें दिखावटी सटीकता की आवश्यकता होती है - ड्रॉप-डाउन सूची में जन्म के वर्ष में प्रवेश करना, यदि आप 8 वर्ष से अधिक उम्र के हैं, तो प्रशिक्षण इच्छाशक्ति का कार्य है।

मेरी (दूसरी) समस्या का समाधान (अपडेट)


सबसे अधीर के लिए - हाँ, एक कामकाजी डेमो है - jsfiddle.net/Meettya/aDAsa/embedded/result



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

डिस्क्लेमर - जबकि यह एक प्रोटोटाइप है। कोड में बहुत सारे मजेदार बाइक हैं, सीएसएस सराहनीय है, आपको निर्भरता के एक गुच्छा की अनुमति देने की आवश्यकता है, आदि। इसे सलीके से लें। और हाँ, यह केवल IE8 और इसके बाद के संस्करण पर काम करता है।

यह कैसे काम करता है - ठीक है, वास्तव में काफी जटिल है, लेकिन मैंने इंटरफ़ेस को यथासंभव सरल बनाने की कोशिश की।

उदाहरण के लिए, किसी वस्तु के लिए

<input id="date_palette_one" type="text" name="date_palette_one" readonly> 

हम सिर्फ इनिशियलाइज़र को पेंच करते हैं

  var DatePalette = require('datepalette'); DatePalette.init("#date_palette_one", function() { $("#date_palette_one").val(this.getResult()); return null; }); 

और हमें एक सुंदर पॉप-अप विंडो मिलती है, जैसा कि स्क्रीनशॉट में, एक क्लिक पर जिसमें हमारे इनपुट की तारीख का मूल्य मक्खी पर बदल जाता है।

लेकिन यह एक और डेटापैकर नहीं है, यह एक रूपरेखा है। पिकर का रूप, व्यवहार और विषयवस्तु विन्यास योग्य है। इसके अलावा, केवल आवश्यक तत्वों के समावेश के साथ कस्टम पिकर असेंबली बनाना संभव है।

यहां एक पिकर के लिए एक और विकल्प है जो इनलाइन है और इसमें केवल एक महीना और एक साल है, जो विभिन्न सेटिंग्स के साथ एक मानक ऑब्जेक्ट से प्राप्त होता है।



परिणामी उत्पाद के मुख्य लाभ:

• मॉड्यूलर वास्तुकला
• लगभग सब कुछ कॉन्फ़िगर किया गया है
• बहुभाषिकता मोमेंट.जैस द्वारा प्रदान की गई, एक दर्जन से अधिक भाषाएँ बॉक्स से बाहर हैं

कृपया परिणाम पर टिप्पणी करें। मैं विशेष रूप से आलोचना और सुझाव / इच्छाओं के लिए खुश हूं। प्रश्न चोट नहीं पहुंचाएंगे, उनके साथ एक साने रीडमे लिखना आसान होगा, जबकि यह मेरे लिए स्पष्ट नहीं है कि क्या समझ से बाहर हो सकता है।

स्रोत कोड github - github.com/Meettya/DatePalette पर पोस्ट किया गया है

सब कुछ एमआईटी लाइसेंस के तहत वितरित किया जाएगा।

पुनश्च। यदि कोई परियोजना में मदद करना चाहता है, तो दृश्य भाग के साथ मदद उपयोगी होगी - सीएसएस और लेआउट।

पुनश्च। पहला शर्मनाक विकल्प जिसने प्रशंसकों की खुशी का कारण बना, मैं कहानी के लिए छोड़ देता हूं