🌸 🆘 🏂🏿 PickMeUp - अच्छा jQuery का डेटपिकर प्लगइन 📈 🚣 👩🏿‍💻

समस्या

अगली साइट पर काम शुरू करने के लिए, एक तारीख की आवश्यकता थी। इस तरह की सबसे प्रसिद्ध तारीख़ jQuery UI में है, लेकिन चूंकि jQuery UI परियोजना में उपयोग नहीं किया गया था, इसलिए मैं इसका एक हिस्सा भी नहीं खींचना चाहता, एक योग्य विकल्प की खोज के बारे में सेट करें।

आवश्यकताएं इस प्रकार हैं:

तिथि, एकाधिक दिनांक, अंतराल का चयन करें
उपस्थिति को अनुकूलित करने के लिए आसान है
अधिमानतः jQuery के अलावा किसी भी निर्भरता के बिना

आवश्यकताएं काफी तार्किक हैं, प्राकृतिक से परे कुछ भी नहीं।
एक दर्जन प्लग-इन देखने के बाद मुझे क्या आश्चर्य हुआ, मुझे एक उपयुक्त नहीं मिला।

जिज्ञासु के लिए, परिणाम के रूप में क्या हुआ, इसका सिर्फ एक डेमो ।

आवश्यकताओं के सबसे करीब DatePicker था।
लेकिन उनकी कई कमियां थीं:

अत्यधिक तालिका लेआउट
पुरानी शैली की छवि डिजाइन
2009 से ही विकसित नहीं किया गया है
कुछ कष्टप्रद कीड़े

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

बाइक इतनी बाइक

पहली चीज जिसे मैं बदलना चाहता था, वह किनारों को गोल करने के लिए चित्रों को निकालना था। लेकिन चित्र तालिका कोशिकाओं में हैं। उसने कोशिकाओं को हटा दिया - लगभग सभी कार्यक्षमता बंद हो गई ... लेकिन पीछे मुड़ना नहीं है!

फिर वह कुछ चीजों को रिफ़्लेक्ट करते हुए, बग्स को ठीक करते हुए, छोटे फीचर्स को जोड़ते हुए, बग्स को फिर से ठीक करते हुए और इसी तरह आगे बढ़ते गए।
इसमें लगभग पूरे दो दिन लगे, और यह इसके लायक था।

क्या हुआ?

एक उदाहरण के रूप में, मैं मूल DatePicker द्वारा उत्पन्न कोड देता हूं:

छिपा हुआ पाठ

<div class="datepicker" id="datepicker_828" style="display: block; position: relative; width: 196px; height: 148px;"> <div class="datepickerBorderT"></div> <div class="datepickerBorderB"></div> <div class="datepickerBorderL"></div> <div class="datepickerBorderR"></div> <div class="datepickerBorderTL"></div> <div class="datepickerBorderTR"></div> <div class="datepickerBorderBL"></div> <div class="datepickerBorderBR"></div> <div class="datepickerContainer" style="width: 176px; height: 128px;"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td> <table cellspacing="0" cellpadding="0" class="datepickerViewYears"> <thead> <tr> <th class="datepickerGoPrev"> <a href="#"> <span></span> </a> </th> <th colspan="6" class="datepickerMonth"> <a href="#"> <span>2002 - 2013</span> </a> </th> <th class="datepickerGoNext"> <a href="#"> <span></span> </a> </th> </tr> <tr class="datepickerDoW"> <th> <span>wk</span> </th> <th> <span>Mo</span> </th> <th> <span>Tu</span> </th> <th> <span>We</span> </th> <th> <span>Th</span> </th> <th> <span>Fr</span> </th> <th> <span>Sa</span> </th> <th> <span>Su</span> </th> </tr> </thead> <tbody class="datepickerMonths"> <tr> <td colspan="2"> <a href="#"> <span>Jan</span> </a> </td> <td colspan="2"> <a href="#"> <span>Feb</span> </a> </td> <td colspan="2"> <a href="#"> <span>Mar</span> </a> </td> <td colspan="2"> <a href="#"> <span>Apr</span> </a> </td> </tr> <tr> <td colspan="2"> <a href="#"> <span>May</span> </a> </td> <td colspan="2"> <a href="#"> <span>Jun</span> </a> </td> <td colspan="2"> <a href="#"> <span>Jul</span> </a> </td> <td colspan="2"> <a href="#"> <span>Aug</span> </a> </td> </tr> <tr> <td colspan="2"> <a href="#"> <span>Sep</span> </a> </td> <td colspan="2"> <a href="#"> <span>Oct</span> </a> </td> <td colspan="2"> <a href="#"> <span>Nov</span> </a> </td> <td colspan="2"> <a href="#"> <span>Dec</span> </a> </td> </tr> </tbody> <tbody class="datepickerDays"> <tr> <th class="datepickerWeek"> <a href="#"> <span>27</span> </a> </th> <td class="datepickerNotInMonth"> <a href="#"> <span>30</span> </a> </td> <td class=""> <a href="#"> <span>1</span> </a> </td> <td class=""> <a href="#"> <span>2</span> </a> </td> <td class=""> <a href="#"> <span>3</span> </a> </td> <td class=""> <a href="#"> <span>4</span> </a> </td> <td class="datepickerSaturday"> <a href="#"> <span>5</span> </a> </td> <td class="datepickerSunday"> <a href="#"> <span>6</span> </a> </td> </tr> <tr> <th class="datepickerWeek"> <a href="#"> <span>28</span> </a> </th> <td class=""> <a href="#"> <span>7</span> </a> </td> <td class=""> <a href="#"> <span>8</span> </a> </td> <td class=""> <a href="#"> <span>9</span> </a> </td> <td class=""> <a href="#"> <span>10</span> </a> </td> <td class=""> <a href="#"> <span>11</span> </a> </td> <td class="datepickerSaturday"> <a href="#"> <span>12</span> </a> </td> <td class="datepickerSunday"> <a href="#"> <span>13</span> </a> </td> </tr> <tr> <th class="datepickerWeek"> <a href="#"> <span>29</span> </a> </th> <td class=""> <a href="#"> <span>14</span> </a> </td> <td class=""> <a href="#"> <span>15</span> </a> </td> <td class=""> <a href="#"> <span>16</span> </a> </td> <td class=""> <a href="#"> <span>17</span> </a> </td> <td class=""> <a href="#"> <span>18</span> </a> </td> <td class="datepickerSaturday"> <a href="#"> <span>19</span> </a> </td> <td class="datepickerSunday"> <a href="#"> <span>20</span> </a> </td> </tr> <tr> <th class="datepickerWeek"> <a href="#"> <span>30</span> </a> </th> <td class=""> <a href="#"> <span>21</span> </a> </td> <td class=""> <a href="#"> <span>22</span> </a> </td> <td class=""> <a href="#"> <span>23</span> </a> </td> <td class=""> <a href="#"> <span>24</span> </a> </td> <td class=""> <a href="#"> <span>25</span> </a> </td> <td class="datepickerSaturday"> <a href="#"> <span>26</span> </a> </td> <td class="datepickerSunday"> <a href="#"> <span>27</span> </a> </td> </tr> <tr> <th class="datepickerWeek"> <a href="#"> <span>31</span> </a> </th> <td class=""> <a href="#"> <span>28</span> </a> </td> <td class=""> <a href="#"> <span>29</span> </a> </td> <td class=""> <a href="#"> <span>30</span> </a> </td> <td class="datepickerSelected"> <a href="#"> <span>31</span> </a> </td> <td class="datepickerNotInMonth"> <a href="#"> <span>1</span> </a> </td> <td class="datepickerNotInMonth datepickerSaturday"> <a href="#"> <span>2</span> </a> </td> <td class="datepickerNotInMonth datepickerSunday"> <a href="#"> <span>3</span> </a> </td> </tr> <tr> <th class="datepickerWeek"> <a href="#"> <span>32</span> </a> </th> <td class="datepickerNotInMonth"> <a href="#"> <span>4</span> </a> </td> <td class="datepickerNotInMonth"> <a href="#"> <span>5</span> </a> </td> <td class="datepickerNotInMonth"> <a href="#"> <span>6</span> </a> </td> <td class="datepickerNotInMonth"> <a href="#"> <span>7</span> </a> </td> <td class="datepickerNotInMonth"> <a href="#"> <span>8</span> </a> </td> <td class="datepickerNotInMonth datepickerSaturday"> <a href="#"> <span>9</span> </a> </td> <td class="datepickerNotInMonth datepickerSunday"> <a href="#"> <span>10</span> </a> </td> </tr> </tbody> <tbody class="datepickerYears"> <tr> <td colspan="2"> <a href="#"> <span>2002</span> </a> </td> <td colspan="2"> <a href="#"> <span>2003</span> </a> </td> <td colspan="2"> <a href="#"> <span>2004</span> </a> </td> <td colspan="2"> <a href="#"> <span>2005</span> </a> </td> </tr> <tr> <td colspan="2"> <a href="#"> <span>2006</span> </a> </td> <td colspan="2"> <a href="#"> <span>2007</span> </a> </td> <td colspan="2"> <a href="#"> <span>2008</span> </a> </td> <td colspan="2"> <a href="#"> <span>2009</span> </a> </td> </tr> <tr> <td colspan="2"> <a href="#"> <span>2010</span> </a> </td> <td colspan="2"> <a href="#"> <span>2011</span> </a> </td> <td colspan="2"> <a href="#"> <span>2012</span> </a> </td> <td colspan="2"> <a href="#"> <span>2013</span> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div>

और PickMeUp द्वारा उत्पन्न कोड:

छिपा हुआ पाठ

 <div class="pickmeup pmu-view-days" style="position: relative; display: inline-block;"> <div class="pmu-instance"> <nav> <div class="pmu-prev pmu-button"></div> <div class="pmu-month pmu-button">November, 2013</div> <div class="pmu-next pmu-button"></div> </nav> <nav class="pmu-day-of-week"> <div>Mo</div> <div>Tu</div> <div>We</div> <div>Th</div> <div>Fr</div> <div>Sa</div> <div>Su</div> </nav> <div class="pmu-months"> <div class="pmu-button">Jan</div> <div class="pmu-button">Feb</div> <div class="pmu-button">Mar</div> <div class="pmu-button">Apr</div> <div class="pmu-button">May</div> <div class="pmu-button">Jun</div> <div class="pmu-button">Jul</div> <div class="pmu-button">Aug</div> <div class="pmu-button">Sep</div> <div class="pmu-button">Oct</div> <div class="pmu-button">Nov</div> <div class="pmu-button">Dec</div> </div> <div class="pmu-days"> <div class="pmu-not-in-month pmu-button">28</div> <div class="pmu-not-in-month pmu-button">29</div> <div class="pmu-not-in-month pmu-button">30</div> <div class="pmu-not-in-month pmu-button">31</div> <div class=" pmu-button">1</div> <div class="pmu-saturday pmu-button">2</div> <div class="pmu-sunday pmu-button">3</div> <div class=" pmu-button">4</div> <div class=" pmu-button">5</div> <div class=" pmu-button">6</div> <div class=" pmu-button">7</div> <div class=" pmu-button">8</div> <div class="pmu-saturday pmu-button">9</div> <div class="pmu-sunday pmu-button">10</div> <div class=" pmu-button">11</div> <div class=" pmu-button">12</div> <div class=" pmu-button">13</div> <div class=" pmu-button">14</div> <div class=" pmu-button">15</div> <div class="pmu-saturday pmu-button">16</div> <div class="pmu-sunday pmu-button">17</div> <div class="pmu-selected pmu-button">18</div> <div class=" pmu-button">19</div> <div class=" pmu-button">20</div> <div class=" pmu-button">21</div> <div class=" pmu-button">22</div> <div class="pmu-saturday pmu-button">23</div> <div class="pmu-sunday pmu-button">24</div> <div class=" pmu-button">25</div> <div class=" pmu-button">26</div> <div class=" pmu-button">27</div> <div class=" pmu-button">28</div> <div class=" pmu-button">29</div> <div class="pmu-saturday pmu-button">30</div> <div class="pmu-not-in-month pmu-sunday pmu-button">1</div> <div class="pmu-not-in-month pmu-button">2</div> <div class="pmu-not-in-month pmu-button">3</div> <div class="pmu-not-in-month pmu-button">4</div> <div class="pmu-not-in-month pmu-button">5</div> <div class="pmu-not-in-month pmu-button">6</div> <div class="pmu-not-in-month pmu-saturday pmu-button">7</div> <div class="pmu-not-in-month pmu-sunday pmu-button">8</div> </div> <div class="pmu-years"> <div class="pmu-button">2007</div> <div class="pmu-button">2008</div> <div class="pmu-button">2009</div> <div class="pmu-button">2010</div> <div class="pmu-button">2011</div> <div class="pmu-button">2012</div> <div class="pmu-button">2013</div> <div class="pmu-button">2014</div> <div class="pmu-button">2015</div> <div class="pmu-button">2016</div> <div class="pmu-button">2017</div> <div class="pmu-button">2018</div> </div> </div> </div>

कोड सही नहीं है, लेकिन बहुत सरल और अधिक समझने योग्य है, जिसका अर्थ है कि इसे बनाना आसान है।

मूल की तुलना में नया क्या है:

डेटा विशेषताओं में कॉन्फ़िगरेशन विकल्पों को निर्दिष्ट करने के लिए समर्थन
वैश्विक प्लगइन विन्यास
प्रत्येक व्यक्तिगत कैलेंडर की भाषा स्वतंत्रता
कॉन्फ़िगरेशन चर के साथ एक छोटी सी सीएसएस फ़ाइल में शैलियाँ - यदि आपको केवल रंग बदलने की आवश्यकता है - एकदम सही
लेआउट रबर है, आकार मूल तत्व के फ़ॉन्ट आकार पर निर्भर करता है, यह किसी भी फ़ॉन्ट आकार में समान रूप से अच्छा लगता है
प्लगइन का आकार मूल से छोटा होता है
सभी वर्गों में pmu- उपसर्ग है, मूल तत्व में pickmeup वर्ग है
कुछ छोटी चीजें

यह वही है जो scss फ़ाइल की सामग्री जैसा दिखता है:

 $border-radius : .4em; $background : #000; $color : #eee; $color-hover : #88c5eb; $nav-color : $color; $nav-color-hover : $color-hover; $not-in-month : #666; $not-in-month-hover : #999; $disabled : #333; $selected-background : #136a9f; $not-in-month-selected-background : #17384d; $day-of-week : $not-in-month-hover; @mixin display-flex() { display : -ms-flexbox; display : -webkit-flex; display : flex; } .pickmeup { background : $background; border-radius : $border-radius; display : none; position : absolute; * { -moz-box-sizing : border-box; box-sizing : border-box; } .pmu-instance { display : inline-block; height : 13.8em; padding : .5em; text-align : center; width : 15em; .pmu-button { color : $color; cursor : pointer; outline : none; text-decoration : none; } .pmu-button:hover { color : $color-hover; } .pmu-not-in-month { color : $not-in-month; } .pmu-disabled, .pmu-disabled:hover { color : $disabled; cursor : default; } .pmu-selected { background : $selected-background; } .pmu-not-in-month.pmu-selected { background : $not-in-month-selected-background; } nav { @include display-flex(); color : $nav-color; line-height : 2em; *:hover { color : $nav-color-hover; } .pmu-prev, .pmu-next { height : 2em; width : 1em; } .pmu-month { width : 12em; } } .pmu-years, .pmu-months { * { display : inline-block; line-height : 3.6em; width : 3.5em; } } .pmu-day-of-week { color : $day-of-week; cursor : default; } .pmu-day-of-week, .pmu-days { * { display : inline-block; line-height : 1.5em; width : 2em; } } .pmu-day-of-week * { line-height : 1.8em; } } &:not(.pmu-view-days) .pmu-days, &:not(.pmu-view-days) .pmu-day-of-week, &:not(.pmu-view-months) .pmu-months, &:not(.pmu-view-years) .pmu-years { display : none; } }

परिणाम

छोटा प्लगइन का आकार:
* 14.8 KiB जावास्क्रिप्ट (4.2 KiB gzip)
* 1.8 KiB CSS (650 B gzip)

लेआउट को सरल बनाने के लिए, IE10 + का समर्थन किया गया है, और अन्य ब्राउज़र के वर्तमान संस्करण (यदि आप चाहें, तो आप IE9- समर्थन कर सकते हैं, लेकिन मुझे ऐसी कोई इच्छा नहीं है, मैंने इसे अपने लिए समान लिखा है)।

GitHub पर डेमो रिपॉजिटरी

मुझे पूरी उम्मीद है कि मेरे अलावा यह jQuery प्लगइन किसी और के काम आएगा, मुझे रचनात्मक आलोचना और अनुरोधों को पूरा करने में खुशी होगी।

निकट भविष्य में, आप अन्य स्थानीयकरणों को एम्बेड कर सकते हैं, बूटस्ट्रैप-डेटापिक रिपॉजिटरी में कई अलग - अलग हैं।

युपीडी
हम 30 लाइनों की कष्टप्रद परंपरा का समर्थन करते हैं।
https://gist.github.com/RubaXa/7547352 , धन्यवाद रुबाक्सा

युपीडी
संस्करण 2.0.1 में, बेहतर के लिए प्लगइन वास्तुकला बदल गया है।
टिप्पणियों में इच्छाओं के बारे में:
संस्करण 2.1.0 में, नए कॉन्फ़िगरेशन विकल्प जोड़े गए + कई फ़िक्सेस।

PickMeUp - अच्छा jQuery का डेटपिकर प्लगइन

समस्या

बाइक इतनी बाइक

क्या हुआ?

परिणाम

More articles: