it-swarm.asia

كيفية الحصول على نوع إدخال HTML 5 = "date" يعمل في Firefox و/أو IE 10

أجد أنه من الغريب أن input type="date" لا يزال غير مدعوم في Firefox بعد كل هذا الوقت. في الواقع ، لا أعتقد أنهم أضافوا الكثير (إن وجد) من أنواع HTML 5 الجديدة على عنصر الإدخال. لم يفاجأ أنه غير معتمد في IE10. لذلك ، سؤالي هو ...

كيفية الحصول على type="date" في عنصر input يعمل دون إضافة ملف js. آخر ، أي jQueryUI DatePicker Widget) فقط للحصول على تقويم/تاريخ فقط لمتصفحي IE و Firefox؟ هل هناك شيء ما يمكن تطبيقه في مكان ما (ربما CDN؟) من شأنه أن يجعل هذه الوظيفة تعمل بشكل افتراضي في Firefox و/أو IE المتصفحات؟ محاولة استهداف IE 8+ للمتصفحات وفايرفوكس ، لا يهم ، سيكون الإصدار الأحدث (28.0) جيدًا.

استكمال: يدعم Firefox 57+ نوع الإدخال = التاريخ

185
Solomon Closson

يمكنك تجربة webshims ، والذي يتوفر على cdn + فقط بتحميل polyfill ، إذا لزم الأمر.

إليك عرض توضيحي باستخدام CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

في حالة عدم تلبية التكوين الافتراضي ، هناك العديد من الطرق لتكوين عليه. هنا تجد datepicker configurator .

ملاحظة: في حين قد يكون هناك إصدارات bugfix جديدة ل webshim في المستقبل. لن يكون هناك أي الإصدارات الرئيسية بعد الآن. ويشمل ذلك دعم jQuery 3.0 أو أي ميزات جديدة.

134
alexander farkas

إنه موجود في Firefox منذ الإصدار 51 (26 يناير 2017) ، لكن لم يتم تنشيطه افتراضيًا (بعد)

لتنشيطه:

about: config

dom.forms.datetime -> تعيين إلى صواب

https://developer.mozilla.org/en-US/Firefox/Experimental_features

26
Jonathan Vanasse

هناك طريقة بسيطة للتخلص من هذا التقييد باستخدام datePicker المكون الذي توفره jQuery.

  1. تضمين مكتبات jQuery و jQuery UI (ما زلت أستخدم مكتبة قديمة)

    • sRC = "شبيبة/مسج-1.7.2.js"
    • sRC = "شبيبة/مسج-UI-1.7.2.js"
  2. استخدم القصاصة التالية

    $(function() {
         $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
    });
    

راجع jQuery UI DatePicker - تغيير تنسيق التاريخ إذا لزم الأمر.

20
Dax

النوع = "التاريخ" ليس مواصفة فعلية في هذه المرحلة. إنه مفهوم توصلت إليه Google وهو في مواصفات whatwg (غير رسمي) وهو مدعوم جزئيًا من Chrome فقط.

http://caniuse.com/#search=date

لن أعتمد على هذا النوع من المدخلات في هذه المرحلة. سيكون من الجميل أن يكون لديّ ، لكنني لا أتوقع هذا الأمر. السبب الأول هو أنه يضع عبءًا كبيرًا على المتصفح لتحديد أفضل واجهة مستخدم لإدخال معقد إلى حد ما. فكر في الأمر من منظور استجابة ، كيف يمكن لأي من البائعين معرفة ما سيكون أفضل مع واجهة المستخدم الخاصة بك في 400 بكسل و 800 بكسل و 1200 بكسل واسعة؟

17
Chris Love

هنا مثال كامل مع التاريخ المنسق في YYYY-MM-DD

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />
9
drooh

على الرغم من أن هذا لا يسمح لك بالحصول على واجهة مستخدم لـ datepicker ، فإن Mozilla تسمح باستخدام النمط ، بحيث يمكنك على الأقل الحصول على التحقق من صحة التاريخ باستخدام شيء مثل هذا:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

في النهاية ، أنا أتفق معSuperUberDuper في أن موزيلا متخلفة عن تضمين هذا الأصلي.

4
ajax1515

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

يجب أن تكون المعرفات فريدة لكل حقل ، لذلك ، إذا كان لديك حقول تاريخ متعددة في النموذج (أو النماذج) ، فيمكنك استخدام عنصر الفصل بدلاً من المعرف:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

والمدخلات الخاصة بك على النحو التالي:

 <input type="text" class="datepicker" name="your-name" />

الآن ، في كل مرة تحتاج فيها إلى منتقي التاريخ ، ما عليك سوى إضافة هذه الفئة. ملاحظة: ما زلت بحاجة إلى استخدام js :( ، ولكن على الأقل أنت مضبوط على كل موقعك. 2 سنتي ...

3
codeispoetry

أحدث إصدار من فايرفوكس - يدعم فايرفوكس 57 (Quantum) التاريخ والميزات الأخرى التي تم إصدارها في 14 نوفمبر 2017. يمكنك تنزيله بالنقر فوق هذا الرابط

3
irfandar

هنا هو الحل المناسب. يجب عليك استخدام منتخب التاريخ في كل مكان

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

أدناه هو الرابط للحصول على رمز كامل

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

0
santosh devnath

في بعض الأحيان لا تريد استخدام Datepicker http://jqueryui.com/datepicker/ في مشروعك بسبب:

  • أنت لا تريد استخدام مسج
  • تعارض إصدارات jquery في مشروعك
  • اختيار السنة ليست مريحة. على سبيل المثال ، تحتاج إلى 120 نقرة على الزر السابق للانتقال إلى 10 سنوات مضت.

يرجى الاطلاع على بلدي رمز متصفح بسيط جدا لإدخال التاريخ. يتم تطبيق الكود الخاص بي فقط إذا كان متصفحك لا يدعم إدخال نوع التاريخ

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
        <!-- For compatibility of IE browser with audio element in the beep() function.
        https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        
        <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">           
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
        
</head>
<body>
        <h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>
0
Andrej

اضطررت إلى استخدام البرنامج المساعد bootstrap-datepicker للحصول على تقويم يعمل على Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

متوافق مع Bootstrap v2 و v3. لأنه يأتي مع ورقة أنماط مستقلة حتى لا تضطر إلى الاعتماد على Bootstrap.

الاستعمال:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
0
Santiago Trejo

شكرا ألكساندر ، لقد وجدت طريقة لتعديل التنسيق ل en lang. (لا أعرف أي لغة تستخدم هذا التنسيق)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
0
Pavel Niedoba