2009-07-15 5 views
5

मैं जावास्क्रिप्ट/सीएसएस/jQuery में टाइमरेंज विजेट के किसी प्रकार की तलाश में हूं। मैं एक समय/तारीख पिकर की तलाश नहीं कर रहा हूं, जो व्यापक रूप से उपलब्ध हैं।मुझे जावास्क्रिप्ट/jQuery में समय सीमा विजेट कहां मिल सकता है?

मुझे इसकी वेबसाइट की आवश्यकता है ताकि वे व्यवसायों को अपने शुरुआती घंटों को चुनने और घंटों के दौरान घूमने के लिए चुन सकें।

+-----------------------------+ 
| 0h 0h15m 0h30m ... 23:45 | 
+-----------------------------+ 

किसी ने भी इतना अच्छा दिखने योग्य अनुकूलन टाइमरेंज चयनकर्ता विजेट देखा है?

चीयर्स

उत्तर

1

मैं एक स्लाइडर विजेट के लिए देखो चाहते हैं .. तो बार आप अंतराल के रूप में की जरूरत है निर्धारित किया है।

jQuery UI में एक है: jQuery UI Slider

अद्यतन: के बारे में (एकल बनाम डबल स्लाइडर) नीचे टिप्पणी के आधार पर ...

1.) एक 2 handled slider using the jQuery UI slider here बनाने के बारे में एक पोस्ट पहले से ही (सिर्फ पाया जाता है) Theres।

या यदि आपके पास 2 स्लाइडर हैं ... एक समय खोलने के लिए और एक बंद करने के लिए ... जहां प्रत्येक 15min सेगमेंट में टूट जाता है, लेकिन केवल आधा दिन प्रत्येक के लिए, क्या यह काम करेगा?

उदा। (ASCII-ग्राफिक uglyness उपेक्षा)

Open Time (AM): 12 1 2 3 4 5 6 7 8 | 9 10 11 12 
                 ^8:15am 

Close Time (PM): 12 1 2 3 4 5 6 | 7 8 9 10 11 12 
                ^6:30pm 

इसके अलावा, अगर यह "विशिष्ट" व्यवसायों के लिए है ... आप की संभावना 11:00 < से काट सकता है -> स्लाइडर्स से 05:00।

या,

मैं scriptaculous का एक बड़ा प्रशंसक नहीं हूँ, लेकिन वे एक double slider है लगता है:

+0

मैंने इसके बारे में भी सोचा, लेकिन यह वास्तव में काम नहीं करेगा क्योंकि हम नहीं जानते कि शुरुआत से कितने क्षेत्र हैं। उदाहरण के लिए। एक व्यवसाय 8 पूर्वाह्न 10, 12-14 बजे और 18-20 बजे से खुला हो सकता है। इसके अलावा, जैसा कि मैं प्रलेखन से समझता हूं, ऐसा लगता है कि स्लाइडर प्रति अधिकतम एक रेंज है। यह एक उदाहरण है जो मुझे टिकों के साथ मिला: http://jsbin.com/iwime – javacoder

+0

धन्यवाद स्कुनलिफ़, मैं इस विजेट को उभरने तक इस गैर-लचीला समाधान का सहारा ले रहा हूं! – javacoder

2

गूगल कैलेंडर अच्छा एक (आप इसे देख सकते हैं जब आप क्लिक घटना का विवरण फार्म पर "अतिथि और संसाधन उपलब्धता की जांच करें") है। लेकिन मैं कल्पना कर सकता हूं कि क्लोन करना मुश्किल होगा।

Google Calendar Time Ranage http://stuff.rajchel.pl/stackoverflow/GoogleCalendarTimeRange.jpg

+0

स्क्रीनशॉट के लिए धन्यवाद! यह वही है जो मैं खोज रहा हूं, एक अधिक कॉम्पैक्ट रूप में। मैं छवि नहीं कर सकता यह पहले से मौजूद नहीं है, उदाहरण के लिए। एक प्लग करने योग्य jQuery विजेट के रूप में। – javacoder

0

http://ghusse.github.io/jQRangeSlider/index.html

प्रदर्शन यहाँ jQRangeSlider और यहाँ Technical demo

jQRangeSlider दोहरी लाइसेंस GPL और एमआईटी के तहत प्रकाशित किया खुला स्रोत है। आप इसे ओपन सोर्स और वाणिज्यिक सॉफ़्टवेयर दोनों में उपयोग कर सकते हैं।

Prerequisites: 
    jQuery 
    jQuery UI Core 
    jQuery UI Widget 
    jQuery mousewheel plugin (optional) 
संबंधित मुद्दे