HTML5 डेट पिकर के लिए कोई स्टाइल विकल्प हैं?

Question

मैं वास्तव में एचटीएमएल 5 तारीख पिकर के बारे में अटका हूं। यह जानना ताज़ा है कि W3C आखिरकार कुछ सुस्त उठा रहा है, इसलिए हमें इनपुट के ऐसे सामान्य रूप का फिर से आविष्कार नहीं करना है।

चेतावनी यह है कि मैं पिकर को रंग लगाने के तरीके के बारे में बहुत कुछ नहीं देखता या पूर्वाभास नहीं करता हूं, जो कि ज्यादातर साइटों पर डेट-ब्रेकर की तरह का उपयोग करने वाला है। <select>सरल कारण है कि लोगों को यह बहुत नहीं कर सकते हैं के लिए बड़े पैमाने पर जावास्क्रिप्ट बदलने हैक्स से ग्रस्त है। मैं उत्सुक हूँ अगर किसी को पता है कि W3C भूमि में क्या हो रहा है?

यह कुछ हद तक एक और बड़े प्रश्न के साथ जोड़ा जाता है (यदि आप उत्तर जानते हैं): क्या यह मेरे समय के लिए W3C या WHATWG के साथ जुड़ने की कोशिश करने के लायक है ताकि इनमें से कुछ चीजें दिन का प्रकाश देखें? किसी भी प्रकार की अंतर्दृष्टि सहायक होती है।

Comments

समर्थन की कमी के कारण इसे आज़माया नहीं गया था, लेकिन मुझे लगता है कि स्टाइल कम से कम <select>इनपुट से चल रहा है ।

— जेम्स कॉयल

मेरा कहना है कि W3C की दुनिया में चीजें बहुत धीमी गति से आगे बढ़ती हैं। ब्राउज़रों देव / कंपनियों को जहां रुचि है वहां जाना पसंद करेंगे। वे (ब्राउज़र) उन चीजों को लागू करने के लिए अनिच्छुक होंगे जो W3C में अच्छी तरह से निर्दिष्ट नहीं हैं (और उन डॉक्स को पकाने में समय लगता है)। अधिक लोग तेजी से चीजों को हासिल किया जा सकता है। तो, हाँ, यदि आपकी रुचि है, तो उनकी मेलिंग सूची में शामिल हों और शुरू करें।

— लेप

Answer 1

डेट इनपुट के टेक्स्टबॉक्स को कस्टमाइज़ करने के लिए निम्नलिखित आठ छद्म तत्व 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">

Comments

इनपुट का उपयोग करते हुए [प्रकार = "तिथि"] मेरे उद्देश्यों के लिए काम किया और शायद वह किसी और के लिए भी काम करेगा।

— एलोन ज़िटो

क्या विभाजक चरित्र को बदलने का कोई तरीका है जिसे कोई जानता है?

— कीथ इविसन

ध्यान दें कि आप स्पष्ट बटन को छद्म वर्ग के साथ भी स्टाइल कर सकते हैं::-webkit-clear-button

— गेब्रियल ड्यूर्टे

@Anselm क्या पाठ बॉक्स के अंदर क्लिक करने पर दिनांक पिकर खोलने का कोई तरीका है?

— क्षमा करें

इन छद्म वर्गों के लिए एक स्रोत इसे और भी बेहतर उत्तर देगा ...

— हेरिटिक बंदर

Answer 2

वर्तमान में, कोई क्रॉस ब्राउज़र नहीं है, मूल दिनांक पिकर स्टाइल करने का स्क्रिप्ट-मुक्त तरीका है।

व्हाट्सएप / डब्ल्यू 3 सी के अंदर क्या चल रहा है ... यदि यह कार्यक्षमता उभरती है, तो यह सीएसएस-यूआई मानक या कुछ शैडो डोम- संबंधित मानक के तहत होगा । CSS4-यूआई विकि पृष्ठ सूचियों में कुछ उपस्थिति से संबंधित चीजें हैं जो CSS3-यूआई से हटा दिया गया था, लेकिन ईमानदारी से, वहाँ सीएसएस-यूआई मॉड्यूल में ब्याज की एक महान सौदा होने के लिए प्रतीत नहीं होता।

मुझे लगता है कि अभी क्रॉस ब्राउजर डेवलपमेंट के लिए आपका सबसे अच्छा दांव है, जावास्क्रिप्ट आधारित इंटरफेस के साथ सुंदर नियंत्रण लागू करना, और फिर एचटीएमएल 5 देशी यूआई को अक्षम करना और इसे प्रतिस्थापित करना है। मुझे लगता है कि भविष्य में, शायद बेहतर देशी नियंत्रण स्टाइल होगा, लेकिन शायद अधिक संभावना आपके स्वयं के शैडो डोम "विजेट" के लिए एक देशी नियंत्रण को स्वैप करने की क्षमता होगी।

यह कष्टप्रद है कि यह उपलब्ध नहीं है, और मानक समर्थन के लिए याचिका हमेशा सार्थक है। हालांकि ऐसा लगता है कि jQuery के UI की लीड ने कोशिश की और असफल रही ।

हालांकि यह सब बहुत हतोत्साहित करने वाला है, यह एचटीएमएल 5 तारीख लेने वाले के फायदों पर विचार करने के लायक भी है, और यह भी कि क्यों कस्टम स्टाइल कठिन हैं और शायद इससे बचा जाना चाहिए। कुछ प्लेटफार्मों पर, डेटपिकर बेहद अलग दिखता है और मैं व्यक्तिगत रूप से देशी डेटापिक को स्टाइल करने के किसी भी सामान्य तरीके के बारे में नहीं सोच सकता।

Comments

और डेढ़ साल बाद, वहाँ अभी भी इन स्टाइल की एक क्रॉसब्रोसर तरीका नहीं है। इसके अलावा, वहाँ भी एक crossbrowser तारीख इनपुट नहीं है! IE और FF अभी भी सहयोग नहीं करेगा।

— मिस्टर लिस्टर

क्या आज हमारे पास कोई है?

— अक्स

Answer 3

यह Zurb के github पर पाया गया

मामले में आप कुछ और कस्टम स्टाइल करना चाहते हैं। यहां डेट घटकों के वेबकिट रेंडरिंग के लिए सभी डिफ़ॉल्ट सीएसएस हैं।

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;
}

Comments

धन्यवाद, जस्टिन! जैसे-जैसे महीने बीतते हैं चीजें बहुत उज्जवल दिख रही हैं। विशेष रूप से शैडो डोम क्रोम के वेब इंस्पेक्टर में अधिक आसानी से उजागर हो रहा है।

— रेय बॉलिंग

Answer 4

मैंने इस समाधान पर आने के लिए उपरोक्त समाधान और कुछ परीक्षण और त्रुटि के संयोजन का उपयोग किया। मुझे समय की एक कष्टप्रद राशि मिली, इसलिए मुझे उम्मीद है कि यह भविष्य में किसी और की मदद कर सकता है। मैंने यह भी देखा कि तारीख पिकर इनपुट सफारी द्वारा समर्थित नहीं है ...

मैं एक पारदर्शी तारीख पिकर इनपुट को प्रस्तुत करने के लिए स्टाइल-घटकों का उपयोग कर रहा हूं जैसा कि नीचे दी गई छवि में दिखाया गया है:

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;}
`

Answer 5

इनपुट तत्व को स्टाइल करने के लिए आप निम्न 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="" />

Comments

क्या टेक्स्ट बॉक्स के अंदर क्लिक करने पर डेट पिकर खोलने का कोई तरीका है?

— क्षमा करें

Answer 6

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>

उम्मीद है कि यह कुछ लोगों को सबसे अधिक क्रोम के लिए मदद करता है यहां तक ​​कि सीधे कहता है कि यह असंभव है।

Comments

क्या टेक्स्ट बॉक्स के अंदर क्लिक करने पर डेट पिकर खोलने का कोई तरीका है?

— क्षमा करें