มีตัวเลือกรูปแบบสำหรับเครื่องมือเลือกวันที่ HTML5 หรือไม่?

ฉันรู้สึกทึ่งมากเกี่ยวกับเครื่องมือเลือกวันที่ HTML5 เป็นเรื่องน่ายินดีที่ทราบว่าในที่สุด W3C ก็เก็บค่าความหย่อนยานบางส่วนดังนั้นเราจึงไม่จำเป็นต้องคิดค้นรูปแบบการป้อนข้อมูลทั่วไปขึ้นมาใหม่

ข้อแม้คือฉันไม่เห็นหรือคาดการณ์วิธีการใช้สีกับตัวเลือกมากนักซึ่งจะใช้ประโยชน์จาก datepicker ประเภทดีลเบรกเกอร์ในไซต์ส่วนใหญ่ ความ<select>ทุกข์ทรมานจากการแฮ็กเปลี่ยนจาวาสคริปต์ที่แพร่หลายด้วยเหตุผลง่ายๆที่ผู้คนไม่สามารถทำให้มันสวยได้ ฉันอยากรู้ว่ามีใครรู้บ้างว่าเกิดอะไรขึ้นในดินแดน W3C?

คำถามนี้ค่อนข้างจับคู่กับคำถามที่ใหญ่กว่าอีกคำถามหนึ่ง (ในกรณีที่คุณรู้คำตอบ): คุ้มค่ากับเวลาที่ฉันพยายามมีส่วนร่วมกับ W3C หรือ WHATWG เพื่อให้บางสิ่งเหล่านี้มองเห็นแสงสว่างของวันหรือไม่? ข้อมูลเชิงลึกทุกประเภทมีประโยชน์

องค์ประกอบหลอกแปดรายการต่อไปนี้มีให้โดย WebKit สำหรับการปรับแต่งช่องข้อความของอินพุตวันที่:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

ดังนั้นหากคุณคิดว่าการป้อนวันที่สามารถใช้ระยะห่างมากกว่าและรูปแบบสีที่ไร้สาระคุณสามารถเพิ่มสิ่งต่อไปนี้:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

ในปัจจุบันไม่มีเบราว์เซอร์ข้ามวิธีที่ไม่มีสคริปต์ในการจัดรูปแบบเครื่องมือเลือกวันที่ดั้งเดิม

สำหรับสิ่งที่เกิดขึ้นภายใน WHATWG / W3C ... หากฟังก์ชั่นนี้เกิดขึ้นก็น่าจะอยู่ภายใต้มาตรฐานCSS-UIหรือมาตรฐานที่เกี่ยวข้องกับShadow DOM หน้า CSS4-UI วิกิพีเดียรายการสิ่งที่เกี่ยวข้องกับการปรากฏตัวไม่กี่คนที่ถูกทิ้งจาก CSS3-UI แต่จะซื่อสัตย์มีไม่ดูเหมือนจะมีการจัดการที่ดีของความสนใจในโมดูล CSS-UI

ฉันคิดว่าทางออกที่ดีที่สุดของคุณสำหรับการพัฒนาข้ามเบราว์เซอร์ในตอนนี้คือการใช้การควบคุมที่สวยงามด้วยอินเทอร์เฟซที่ใช้ JavaScript จากนั้นปิดใช้งาน UI ดั้งเดิมของ HTML5 และแทนที่ ฉันคิดว่าในอนาคตอาจจะมีรูปแบบการควบคุมแบบเนทีฟที่ดีขึ้น แต่อาจมีความเป็นไปได้มากกว่าที่จะสามารถเปลี่ยนการควบคุมแบบเนทีฟสำหรับ "วิดเจ็ต Shadow DOM" ของคุณเองได้

เป็นเรื่องที่น่ารำคาญที่ไม่มีให้บริการและการยื่นคำร้องเพื่อขอรับการสนับสนุนมาตรฐานนั้นคุ้มค่าเสมอ แม้ว่ามันจะดูเหมือนนำ jQuery UI ของได้พยายามและไม่ประสบความสำเร็จ

แม้ว่าทั้งหมดนี้จะเป็นเรื่องที่น่าท้อใจ แต่ก็ควรพิจารณาถึงข้อดีของเครื่องมือเลือกวันที่ HTML5 และทำไมสไตล์ที่กำหนดเองจึงเป็นเรื่องยากและควรหลีกเลี่ยง ในบางแพลตฟอร์ม datepicker ดูแตกต่างไปจากเดิมมากและโดยส่วนตัวแล้วฉันไม่สามารถนึกถึงวิธีทั่วไปในการจัดแต่งทรงผม datepicker ดั้งเดิมได้

พบสิ่งนี้ในgithub ของ Zurb

ในกรณีที่คุณต้องการจัดแต่งทรงผมแบบกำหนดเองเพิ่มเติม นี่คือ CSS เริ่มต้นทั้งหมดสำหรับการแสดงผล webkit ของส่วนประกอบวันที่

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

ฉันใช้วิธีแก้ปัญหาข้างต้นร่วมกันและการลองผิดลองถูกเพื่อหาวิธีแก้ปัญหานี้ ทำให้ฉันเสียเวลาไปพอสมควรดังนั้นฉันหวังว่านี่จะช่วยคนอื่นได้ในอนาคต ฉันยังสังเกตเห็นว่า Safari ไม่รองรับการป้อนตัวเลือกวันที่เลย ...

ฉันใช้องค์ประกอบที่มีสไตล์เพื่อแสดงอินพุตตัวเลือกวันที่แบบโปร่งใสดังที่แสดงในภาพด้านล่าง:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

คุณสามารถใช้ CSS ต่อไปนี้เพื่อจัดรูปแบบองค์ประกอบอินพุต

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

FYI, ฉันต้องการที่จะปรับปรุงสีของไอคอนปฏิทินซึ่งไม่น่าเป็นไปได้ที่มีคุณสมบัติเหมือนcolor, fillฯลฯ

ในที่สุดฉันก็พบว่าfilterคุณสมบัติบางอย่างจะปรับไอคอนดังนั้นในขณะที่ฉันไม่ได้หาวิธีทำให้เป็นสีใด ๆ แต่โชคดีที่ฉันต้องการเพียงแค่ทำให้ไอคอนนั้นมองเห็นได้บนพื้นหลังสีเข้มดังนั้นฉันจึงสามารถ ทำสิ่งต่อไปนี้:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

หวังว่านี่จะช่วยบางคนได้ส่วนโครเมี่ยมส่วนใหญ่บอกตรงๆว่าเป็นไปไม่ได้