दिनांक इनपुट समस्या को संक्षेप में बताने के लिए:
- आपको उन्हें प्रदर्शित करना होगा (अर्थात प्रदर्शन से बचें: कोई नहीं) अन्यथा इनपुट UI ट्रिगर नहीं होगा;
- एक प्लेसहोल्डर उनके साथ विरोधाभासी है (कल्पना के अनुसार, और क्योंकि उन्हें एक विशिष्ट यूआई प्रदर्शित करना है);
- अनफोकस्ड समय के लिए उन्हें दूसरे इनपुट प्रकार में परिवर्तित करना प्लेसहोल्डर्स को अनुमति देता है, लेकिन फ़ोकस गलत इनपुट UI (कीबोर्ड) को ट्रिगर करता है, कम से कम थोड़े समय के लिए, क्योंकि फ़ोकस इवेंट रद्द नहीं किया जा सकता है।
- सम्मिलित करना (पहले) या जोड़ना (बाद में) सामग्री दिनांक इनपुट मान को प्रदर्शित होने से नहीं रोकती है।
उन आवश्यकताओं को पूरा करने के लिए मैंने जो समाधान पाया, वह है मूल रूप के तत्वों को स्टाइल करने के लिए सामान्य ट्रिक का उपयोग करना: यह सुनिश्चित करना कि तत्व प्रदर्शित नहीं है, लेकिन दिखाई नहीं देता है, और अपने संबंधित लेबल के माध्यम से इसकी अपेक्षित शैली प्रदर्शित करता है । आमतौर पर, लेबल इनपुट (एक प्लेसहोल्डर सहित) के रूप में प्रदर्शित करेगा, लेकिन इसके ऊपर।
तो, एक HTML जैसे:
<div class="date-input>
<input id="myInput" type="date">
<label for="myInput">
<span class="place-holder">Enter a date</span>
</label>
</div>
के रूप में स्टाइल किया जा सकता है:
.date-input {
display: inline-block;
position: relative;
}
/* Fields overriding */
input[type=date] + label {
position: absolute; /* Same origin as the input, to display over it */
background: white; /* Opaque background to hide the input behind */
left: 0; /* Start at same x coordinate */
}
/* Common input styling */
input[type=date], label {
/* Must share same size to display properly (focus, etc.) */
width: 15em;
height: 1em;
font-size: 1em;
}
ऐसे संबद्ध लेबल पर कोई भी घटना (क्लिक, फ़ोकस) फ़ील्ड पर ही परिलक्षित होगी, और इसलिए दिनांक इनपुट UI को ट्रिगर करें।
क्या आपको ऐसे समाधान का लाइव परीक्षण करना चाहिए, आप अपने टैबलेट या मोबाइल से इस कोणीय संस्करण को चला सकते हैं ।