วิธีรับประเภทอินพุต HTML 5 =“ date” ทำงานใน Firefox และ / หรือ IE 10


191

ฉันคิดว่ามันแปลกที่input type="date"ยังไม่รองรับใน Firefox หลังจากเวลานี้ทั้งหมด ที่จริงแล้วฉันไม่คิดว่าพวกเขาจะเพิ่มประเภทใหม่ ๆ ของ HTML 5 ในองค์ประกอบอินพุต ไม่แปลกใจที่ไม่รองรับ IE10 ดังนั้นคำถามของฉันคือ ...

วิธีการที่จะได้รับtype="date"ในinputการทำงานโดยไม่ต้องเพิ่มองค์ประกอบยังอีก .js ไฟล์ (คือjQueryUIDatePicker Widget) เพียงเพื่อให้ได้ปฏิทิน / วันเพียง IE และ Firefox เบราว์เซอร์? มีบางอย่างที่สามารถนำไปใช้ที่ไหนสักแห่ง (อาจจะ CDN?) ที่จะทำให้ฟังก์ชั่นนี้ใช้งานได้ตามค่าเริ่มต้นใน Firefox และ / หรือเบราว์เซอร์ IE? การพยายามกำหนดเป้าหมายเบราว์เซอร์ IE 8+ และสำหรับ Firefox ไม่สำคัญรุ่นใหม่ล่าสุด (28.0) จะไม่เป็นไร

อัปเดต: Firefox 57+ รองรับประเภทอินพุต = วันที่


29
ดูเหมือนว่าไร้สาระสำหรับฉันที่ Firefox ยังไม่สนับสนุนสิ่งนี้ ฉันเปลี่ยนจาก Chrome เป็น Firefox วันนี้เพียงแค่วัน / สัปดาห์เพื่อดูว่าอะไรคือสิ่งที่วันนี้และฉันต้องการเปลี่ยนทันที!
Codemonkey

19
มันเป็นเรื่องตลก FF ที่ไม่ออกเดท
SuperUberDuper

6
นี่คือเหตุผลที่ฉันรู้สึกเสียใจเมื่อมีคนพูดว่า Firefox เป็นเบราว์เซอร์ที่ดีที่สุด
Martin Braun

1
ในขณะที่ไม่ได้เป็น polyfill ฉันก็ลงเอยด้วยการใช้pickadayซึ่งเป็น lib js ธรรมดาที่ไม่มี jquery หรือการพึ่งพาอื่น ๆ ...
mb21

2
ดูเหมือนว่าจะทำงานโดยค่าเริ่มต้นใน Firefox 57 ยัง!
แอนทอน Pinsard

คำตอบ:


138

คุณสามารถลองใช้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

หมายเหตุ: ในขณะที่อาจมีการแก้ไขข้อผิดพลาดใหม่สำหรับ webshim ในอนาคต จะไม่มีการเผยแพร่ที่สำคัญอีกต่อไป ซึ่งรวมถึงการสนับสนุน jQuery 3.0 หรือคุณสมบัติใหม่ใด ๆ


นี่เป็นทางออกที่ดีการตั้งค่าสมบูรณ์ แต่ฉันไม่สามารถหารูปแบบวันที่ได้เช่น "YYYY / MM / DD"
Pavel Niedoba

14
ฉันได้รับข้อผิดพลาด "การเข้าถึงถูกปฏิเสธ" เมื่อฉันพยายามเรียกใช้ jsfiddle นี้ใน IE 11 และตัวใช้เลือกวันที่ไม่ทำงาน
Shavais

4
ไม่ทำงานบน IE10 ... ฉันได้รับข้อผิดพลาดเดียวกับที่ @Shavais ... ได้รับเพื่อให้มันทำงานได้อัพเกรด jquery version เป็น 1.11 ขึ้นไป .. ลองลิงค์
Nitin

2
โชคไม่ดีที่ webshims รองรับ Jquery 3 ที่กำลังจะมาถึงจะไม่เกิดขึ้นตามที่แจ้งไว้ในเว็บไซต์ของผู้เขียน เมื่อเป็นเช่นนั้นฉันจะพึ่งพา Jquery UI ที่ดีและเก่า
marionmaiden

1
วิธีนี้ใช้ได้กับ Firefox แต่ไม่ได้ทำงานใน IE
Varuni NR

27

อยู่ใน Firefox ตั้งแต่รุ่น 51 (26 มกราคม 2017) แต่จะไม่เปิดใช้งานตามค่าเริ่มต้น (ยัง)

วิธีเปิดใช้งาน:

เกี่ยวกับ config

dom.forms.datetime -> ตั้งค่าเป็นจริง

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


ดีใจที่ได้ยินเช่นนี้ ควรเปิดตามค่าเริ่มต้น imo แต่นี่เป็นสิ่งที่ดีที่จะรู้
โซโลมอน Closson

ฉันใช้ FF 64.0.2 แต่ถึงแม้ว่าตัวเลือกนี้จะเป็น "จริง" (บน) แต่ก็ใช้งานไม่ได้กล่อง datetime ยังคงเป็นข้อความเท่านั้น ฉันพยายามเปิดใช้งาน "timepicker" โดยไม่ประสบความสำเร็จ
Wasted_Coder

20

มีวิธีง่ายๆในการกำจัดข้อ จำกัด นี้โดยใช้ส่วนประกอบdatePicker ที่จัดทำโดย jQuery

  1. รวมไลบรารี jQuery และ jQuery UI (ฉันยังคงใช้อันเก่าอยู่)

    • src = "js / jQuery-1.7.2.js"
    • src = "js / jQuery-UI-1.7.2.js"
  2. ใช้ snip ต่อไปนี้

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

ดูjQuery UI DatePicker - เปลี่ยนรูปแบบวันที่หากจำเป็น


8
OP บอกว่า "ทำงานโดยไม่เพิ่มอีกไฟล์. js (คือ jQueryUI DatePicker Widget)" ... แต่คำถามนี้เป็นคำถามยอดฮิตของ google ดังนั้นคำตอบของคุณยังคงมีประโยชน์มากแม้ว่ามันจะไม่ตอบคำถาม ฉันหวังว่าฉันไม่ต้องรู้สึกแย่กับการถอนโพสต์ของคุณตอนนี้
phil294

2
คุณต้องรวม jQuery UI CSS และแสดงปฏิทินอย่างถูกต้อง <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai

16

type = "date" ไม่ใช่ข้อมูลจำเพาะจริง ณ จุดนี้ มันเป็นแนวคิดที่ Google สร้างขึ้นมาและมีคุณสมบัติตามข้อกำหนดของ Google (ไม่ใช่เป็นทางการ) และได้รับการสนับสนุนโดย Chrome เพียงบางส่วนเท่านั้น

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

ฉันจะไม่พึ่งพาประเภทอินพุตนี้ ณ จุดนี้ มันคงจะดีถ้าฉันมี แต่ฉันไม่คาดหวังว่าคนนี้จะสร้างมันขึ้นมา เหตุผล # 1 มันทำให้ภาระมากเกินไปในเบราว์เซอร์เพื่อกำหนด UI ที่ดีที่สุดสำหรับการป้อนข้อมูลที่ค่อนข้างซับซ้อน ลองคิดดูจากมุมมองที่ตอบสนองผู้ขายรายใดจะทราบว่า UI ของคุณจะทำงานได้ดีที่สุดอย่างไรที่ 400 พิกเซล, 800 พิกเซลและกว้าง 1,200 พิกเซล


138
ฉันไม่เห็นด้วยเบราว์เซอร์ควรฉลาดพอที่จะเข้าใจเรื่องนี้ ฉันเหนื่อยมากกับการใช้ตัวเลือกวันที่ออกไปและต้องอัปเดตพวกเขาต่อไป
SuperUberDuper

49
การใช้เหตุผลแปลก ๆ ภาระมากเกินไปสำหรับเบราว์เซอร์ แต่ไม่ใช่สำหรับนักพัฒนาเว็บ joe?!?
jeroenh

35
ตอนนี้เป็นส่วนหนึ่งของร่างการทำงาน HTML 5: w3.org/html/wg/drafts/html/master/…
Chris

7
ฉันก็ดีใจที่ได้ป้อนประเภทใหม่ทุกประเภท พวกเขามีความหมายที่ดีขึ้นและพื้นเมืองซึ่งมักจะหมายถึงรวดเร็ว
Tomáš Zato - Reinstate Monica

5
@MM ขอบคุณ HTML 5 ได้รับการอัพเกรดเป็นคำแนะนำอย่างเป็นทางการของ W3C ลิงค์ใหม่คือw3.org/TR/2014/REC-html5-20141028/ …
Chris

9

นี่คือตัวอย่างเต็มรูปแบบที่มีวันที่จัดรูปแบบใน 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" />

1
ไม่มีใครรู้ว่าสิ่งนี้ช่วยให้ตัวเลือกในการเพิ่มตัวเลือกเวลาเช่นกัน?
drooh

ฉันลองใช้สคริปต์ของคุณใน JSFiddle @Drooh แต่มันไม่ทำงาน ทุกครั้งที่ฉันเลือกวันที่มันจะปรากฏขึ้นเช่นมิลลิวินาทีในช่องใส่แล้วหายไป ใครสามารถให้ซอฟต์แวร์เวอร์ชั่นทำงานได้โดยใช้การกำหนดวันที่ dd / mm / yyyy
Ryan Coolwebs

หมายเหตุ ณ เดือนสิงหาคม 2559 webshim ไม่ทำงานกับ jQuery 3 และในการทดสอบของฉันมันไม่ทำงานกับ 2.2.4 เช่นกัน
drooh

ฉันพบสิ่งนี้จะเป็นทางออกที่ดีที่สุดจนกว่า firefox จะเพิ่มวันที่ป้อนstackoverflow.com/questions/2528706/ …
drooh

4

แม้ว่าสิ่งนี้จะไม่อนุญาตให้คุณใช้ Datepicker UI แต่ 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 ใน Mozilla ที่เป็นวิธีที่อยู่เบื้องหลังในการรวมกำเนิดนี้


1
มีรุ่นสำหรับ "เวลา" หรือไม่
Malcolm Salvador

1
โปรดขยายตัวอย่างนี้ นี่เป็นแอตทริบิวต์ html สำหรับอินพุตหรือไม่
Wasted_Coder

3

นี่เป็นเพียงข้อเสนอแนะที่ตามหลังคำตอบของ Dax (ฉันจะใส่ไว้ในความคิดเห็นที่คำตอบนั้น แต่ฉันยังไม่มีชื่อเสียงเพียงพอที่จะแสดงความคิดเห็นในคำถามอื่น ๆ )

รหัสควรไม่ซ้ำกันสำหรับทุกฟิลด์ดังนั้นหากคุณมีหลายฟิลด์ในฟอร์มของคุณ (หรือแบบฟอร์ม) คุณสามารถใช้องค์ประกอบคลาสแทนรหัส:

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

และการป้อนข้อมูลของคุณเป็น:

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

ตอนนี้ทุกครั้งที่คุณต้องการเครื่องมือเลือกวันที่เพียงเพิ่มคลาสนั้น PS ฉันรู้ว่าคุณยังคงต้องใช้ js :( แต่อย่างน้อยคุณก็ตั้งค่าไว้สำหรับเว็บไซต์ของคุณ 2 เซนต์ของฉัน ...


3

เวอร์ชั่นล่าสุดของ firefox the firefox 57 (Quantum) รองรับวันที่และคุณสมบัติอื่น ๆ ที่เผยแพร่เมื่อวันที่ 14 พฤศจิกายน 2017 คุณสามารถดาวน์โหลดได้โดยคลิกที่ลิงค์นี้


0

ขอบคุณอเล็กซานเดฉันพบวิธีการปรับเปลี่ยนรูปแบบสำหรับ en lang (ไม่ทราบว่า lang ใช้รูปแบบดังกล่าว)

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

 $.webshims.activeLang('en');

ฉันคิดว่าประเทศเดียวที่ใช้รูปแบบนั้นคือแคนาดา ไม่ว่าในกรณีใด 'en' นั้นคลุมเครือเพราะมันรวมถึงสหรัฐอเมริกาซึ่งมีรูปแบบวันที่ 'พิเศษ' ของตัวเอง
Michael Scheper

ในกรณีของฉันมันเกี่ยวกับรูปแบบการแทนที่วันที่สำหรับสถานที่ของลูกค้าซึ่งอาจแตกต่างกันไปตามเวิร์กสเตชันของลูกค้า อย่างไรก็ตามในหน้าใดหน้าหนึ่งโดยเฉพาะฉันต้องการใช้รูปแบบวันที่นี้ มันเป็นความคิดเห็นเพิ่มเติมสำหรับคำตอบของ Alexander Farkas แต่ฉันใส่คำตอบแยกต่างหากเพราะฉันไม่สามารถวางรหัสในความคิดเห็นได้ ฉันใช้สิ่งนี้ในสภาพแวดล้อมการผลิตมานานกว่าหนึ่งปี
Pavel Niedoba

ระวัง. หาก Webshims อาศัยการตีความเบราว์เซอร์ของสถานที่เกิดเหตุคุณอาจมีผลลัพธ์ที่ไม่สามารถคาดการณ์ได้ 'en' อาจไม่ได้หมายถึงรูปแบบเดียวกันในแพลตฟอร์มที่แตกต่างกัน (ขึ้นอยู่กับตำแหน่งที่ตั้งของระบบ) หรือแม้แต่ในเบราว์เซอร์ที่แตกต่างกัน มันอาจถูกตีความว่าเป็น 'en-ca' โดยเบราว์เซอร์ในแคนาดา (ซึ่งน่าจะเป็น yyyy-mm-dd แต่อาจไม่สอดคล้องกัน) แต่เบราว์เซอร์ในอินเดีย 'en-in' (ซึ่งเหมือนกับส่วนใหญ่ของโลก) จะสร้าง dd-mm-yyyy) เพียงเพราะอยู่ในรหัสการผลิตไม่ได้หมายความว่าได้รับการทดสอบอย่างถูกต้องมีข้อบกพร่องของ i18n จำนวนมากที่มีอยู่ในรหัสการผลิตแม้แต่ในเว็บไซต์ขนาดใหญ่
Michael Scheper

บรรทัดสุดท้าย $ .webshims.activeLang ('en'); ควรบังคับ lang (หรือ locale) ให้ webshims แทนที่การตั้งค่าเบราว์เซอร์ดังนั้นรูปแบบจึงเหมือนกันเสมอ
Pavel Niedoba

0

บางครั้งคุณไม่ต้องการใช้ Datepicker http://jqueryui.com/datepicker/ในโครงการของคุณเพราะ:

  • คุณไม่ต้องการใช้ jquery
  • ข้อขัดแย้งของรุ่น jquery ในโครงการของคุณ
  • ทางเลือกของปีไม่สะดวก ตัวอย่างเช่นคุณต้องคลิก 120 ครั้งที่ปุ่ม prev เพื่อย้ายไปยัง 10 ปีที่แล้ว

โปรดดูรหัสเบราว์เซอร์ข้ามง่าย ๆ ของฉันสำหรับการป้อนวันที่ รหัสของฉันจะใช้ได้เฉพาะเมื่อเบราว์เซอร์ของคุณไม่รองรับอินพุตประเภทวัน

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<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>


3
รหัสนี้ล้มเหลวอย่างสมบูรณ์ ฉันไม่สามารถพิมพ์วันที่ได้เพราะฟิลด์เต็มไปด้วย "YYY-MM-DD" และถ้าฉันพยายามลบมันมันจะปรากฏขึ้นอีกครั้ง
สตีเฟ่นอาร์

โปรดอย่าลบเครื่องหมายขีดคั่น ฉันได้ทำการทดสอบสำเร็จใน Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11. โปรดบอกอุปกรณ์ของคุณระบบปฏิบัติการและเบราว์เซอร์
Andrej

ฉันแค่กดลิงค์ "เรียกใช้ข้อมูลโค้ด" ใต้ความคิดเห็นของคุณ ฉันพิมพ์วันที่ไม่ถูกต้องเพราะตัวยึด "YYYY-MM-DD" กำลังแข่งขันกับฉันแทนที่จะหายไปเมื่อฉันเริ่มพิมพ์ ฉันใช้ Firefox รุ่นล่าสุดบน Windows 10
Stephen R

1
ไม่ตอบคำถามเนื่องจากละเมิดเงื่อนไขในการไม่เพิ่มไฟล์ JS ภายนอกและจริงๆแล้วรหัสนั้นไม่ได้ใช้งานง่ายนัก บังคับรูปแบบ ISO ให้กับผู้ใช้แม้ว่าจะไม่ใช่รูปแบบวันที่ดั้งเดิมไม่สามารถพิมพ์ในวันที่ใหม่ได้เนื่องจากรูปแบบการป้อนข้อมูลปรากฏขึ้นอีกครั้งไม่สามารถพิมพ์รูปแบบการป้อนข้อมูลมากกว่ารูปแบบที่ไม่ใช่รูปแบบ แต่เป็นข้อความจริงในกล่อง คุณพิมพ์ ไม่ได้อยู่ในดีกว่าอินพุตมาตรฐานที่มีการตรวจสอบ regex
MikeT


-1

นี่คือทางออกที่สมบูรณ์แบบ คุณควรใช้ JQuery datepicker กับวันที่ที่ผู้ใช้ป้อน มันใช้งานง่ายมากและมีคุณสมบัติมากมายที่ไม่มีวันที่ป้อน HTML

คลิกที่นี่เพื่อคัดลอกรหัส datepicker JQuery


-1

ฉันต้องใช้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'
});

-2
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.