एचटीएमएल 5 इनपुट प्रकार = दिनांक: क्या मैं जावास्क्रिप्ट के साथ दिनांक पिकर खोल/बंद कर सकता हूं?

Question

मैं HTML5 इनपुट प्रकार = "दिनांक" तत्व को कस्टमाइज़ करने का प्रयास कर रहा हूं। मैं एक अलग बटन क्लिक करना चाहता हूं जो दिनांक पिकर ड्रॉपडाउन की दृश्यता टॉगल करेगा। मुझे इस पर कोई जानकारी नहीं मिली। किसी भी मदद की बहुत सराहना की!

Answer 1

jQueryUI तिथि चयनकर्ता का उपयोग पर विचार करें। यहां तक ​​कि आप जो हासिल करना चाहते हैं उसके करीब एक उदाहरण भी है।

Click here to see an example close to your request

Answer 2

इस एक का प्रयास करें:

$(document).ready(function() { 
    $('input[type="date"]').change(function() { 
     closeDate(this); 
    }); 

}); 

function closeDate(dateInput) { 
    $(dateInput).attr('type', 'text'); 
    $(dateInput).attr('type', 'date'); 
} 

Answer 3

यहाँ समाधान मैं सीएसएस का उपयोग किया।

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.exmp-wrp { 
 
    margin-top: 100px; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.btn-wrp { 
 
    border: 1px solid #dadada; 
 
    display: inline-block; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 

 
.btn-clck { 
 
    border: none; 
 
    background: transparent; 
 
    width: 100%; 
 
    padding: 10px; 
 
} 
 

 
.btn-clck::-webkit-calendar-picker-indicator { 
 
    right: -10px; 
 
    position: absolute; 
 
    width: 78px; 
 
    height: 40px; 
 
    color: rgba(204, 204, 204, 0); 
 
    opacity: 0 
 
} 
 

 
.btn-clck::-webkit-inner-spin-button { 
 
    -webkit-appearance: none; 
 
} 
 
.btn-clck::-webkit-clear-button { 
 
    margin-right:75px; 
 
} 
 
.btn { 
 
    height: 100%; 
 
    background: #fda200; 
 
    border: none; 
 
    color: #fff; 
 
    padding: 13px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div class="exmp-wrp"> 
 
    <div class="btn-wrp"> 
 
    <input type="date" class="btn-clck"/> 
 
    </div> 
 
    <button class="btn">Click me</button> 
 
</div>