javascript - example - jquery ui




jQuery date/time picker (8)

David ، شكرا على التوصية! fluid_chelsea ، لقد قمت للتو بإصدار إصدار Any + Time (TM) 3.x الذي يستخدم jQuery بدلاً من Prototype ويحتوي على واجهة محسنة كثيرًا ، لذا أتمنى أن يلبي الآن احتياجاتك:

http://www.ama3.com/anytime/

أي مشاكل ، واسمحوا لي أن أعرف عن طريق رابط التعليق على موقع الويب الخاص بي!

لقد كنت أبحث في جميع أنحاء للحصول على المساعد jQuery لائق يمكن التعامل مع كل التواريخ والأوقات. يعد واجهة المستخدم الأساسية لـ DatePicker رائعة ، ولكن للأسف ، أحتاج إلى أن أتمكن من DatePicker بعض الوقت أيضًا.

لقد عثرت على بعض الاختراقات لـ DatePicker كي يعمل مع الأوقات ، ولكن يبدو أنها جميعًا غير جميلة ، ولا تتحول Google إلى أي شيء لطيف.

هل هناك ملحق jQuery جيد لتحديد التواريخ والأوقات في عنصر تحكم واحد في واجهة المستخدم باستخدام واجهة قابلة للاستخدام؟


أفضل تجربة لي مع datepicker مع Anytime الذي يعتمد على النموذج الأولي. أعلم أن هذا ليس jQuery ، ولكن قد لا يزال يستحق الحل الوسط بالنسبة لك. لا أعرف على الإطلاق أي نموذج أولي ، ولا يزال من السهل العمل معه.

أحد التحذيرات التي وجدتها: إنه لا يتوافق مع بعض المتصفحات. بمعنى ، أنه لم يعمل مع إصدار أحدث من النموذج الأولي على Chrome.



إلى حد بعيد ، إن الخيار الأبسط والأكثر بساطة لمنتقي DateTime هو http://trentrichardson.com/examples/timepicker/ .

إنه امتداد لـ jQuery UI Datepicker لذا فإنه سيدعم نفس المواضيع بالإضافة إلى أنه يعمل بنفس الطريقة وبنظام مماثل ، إلخ. يجب أن يتم حزم هذا مع imo jQuery UI.


لقد بحثت هذا للتو في الآونة الأخيرة ، ولم أجد حتى الآن منتقي التاريخ اللائق الذي يتضمن أيضا منتقي الوقت المناسب. ما انتهى به الأمر كان تطبيق Datepicker الرائع من eyecon ، مع اثنين من القوائم المنسدلة البسيطة للوقت. لقد كان يميل إلى استخدام haineault.com/media/jquery/ui-timepickr/page رغم ذلك ، يبدو وكأنه نهج لطيف حقا.


لقد واجهت نفس المشكلة. لقد قمت بالفعل بتطوير برنامجي الخاص باستخدام الخادم ، لكنني أجريت بحثًا سريعًا لمحاولة مساعدتك في العثور عليها.

يبدو حسنًا ، لم ألق نظرة على المصدر كثيرًا ، ولكن يبدو أنه جافا سكريبت تمامًا.

إلقاء نظرة:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

هنا رابط صفحة العرض التوضيحي:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

حظا طيبا وفقك الله


من وجهة نظري ، يجب التعامل مع التواريخ والأوقات كمربعي إدخال منفصلين لتكون أكثر استخدامًا وفاعلية للمستخدم لإدخالها. اسمحوا للمستخدم إدخال شيء واحد في وقت واحد هو مبدأ جيد ، إيمهو.

يمكنني استخدام واجهة المستخدم الأساسية DatePicker ، ومنتقي الوقت التالي.

هذا مستوحى من تقويم Google واحد:

وقت jQueryPicker :
أمثلة: http://labs.perifer.se/timedatepicker/
مشروع على جيثب: https://github.com/perifer/timePicker

لقد وجدت أنها الأفضل بين جميع البدائل. يمكن للمستخدم إدخال سريع ، يبدو نظيفًا ، بسيطًا ، ويسمح للمستخدم بإدخال أوقات محددة إلى الدقيقة.

PS: من وجهة نظري: إن المنزلقات (التي يستخدمها بعض جامعي الوقت البديل) تأخذ عددًا كبيرًا جدًا من النقرات وتتطلب دقة الماوس من المستخدم (مما يجعل الإدخال أبطأ).


هذا هو بعض التعليمات البرمجية التي أستخدمها لاختيار مستخدم واحد من datetimepicker ، وتعيين التاريخ والوقت ، وإضافة datetimepicker أخرى دقيقة واحدة إلى ذلك الوقت.

كنت بحاجة لهذا من أجل مراقبة دوائية مخصصة

على أي حال ، أعتقد أنه قد يساعد شخصًا آخر لأنني لم أتمكن من العثور على الإجابة في أي مكان على الإنترنت ...

(على الأقل ليست إجابة كاملة)

ضع في اعتبارك أن 60000 أضاف ، يضيف دقيقة واحدة. (60 * 1000 ميلي ثانية)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });






datetimepicker