पाठ के साथ jQuery Datepicker इनपुट मैं कैसे एक पाठ बॉक्स इनपुट के साथ jQuery Datepicker का उपयोग करते हैं कि उपयोगकर्ता इनपुट

Question

अनुमति नहीं देता:

$("#my_txtbox").datepicker({ 
    // options 
}); 

कि पाठ बॉक्स में इनपुट यादृच्छिक पाठ करने के लिए उपयोगकर्ता की अनुमति नहीं है। मैं डेटपिकर को पॉप अप करना चाहता हूं जब टेक्स्टबॉक्स फोकस प्राप्त करता है या उपयोगकर्ता उस पर क्लिक करता है, लेकिन मैं चाहता हूं कि टेक्स्टबॉक्स कीबोर्ड का उपयोग करके किसी भी उपयोगकर्ता इनपुट को अनदेखा कर दे (प्रति & पेस्ट, या कोई अन्य)। मैं टेक्स्टबॉक्स को विशेष रूप से डेटपिकर कैलेंडर से भरना चाहता हूं।

क्या यह संभव है?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

आप पाठ इनपुट पर केवल पढ़ने के लिए विशेषता का उपयोग करने में सक्षम होना चाहिए, और jQuery अभी भी इसकी सामग्री को संपादित करने में सक्षम हो जाएगा।

<input type='text' id='foo' readonly='true'> 

Answer 2

datepicker लाभ ध्यान केंद्रित करने पर पॉपअप के लिए करने के लिए

:

$(".selector").datepicker({ showOn: 'both' }) 

आप उपयोगकर्ता इनपुट नहीं करना चाहते हैं, इनपुट क्षेत्र में जोड़ना

<input type="text" name="date" readonly="readonly" /> 

Answer 3

कोशिश

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

Answer 4

यह demo प्रकार की तरह टी कैलेंडर को टेक्स्ट फ़ील्ड पर रखकर टोपी ताकि आप इसमें टाइप न कर सकें। आप सुनिश्चित करने के लिए केवल HTML में पढ़ने के लिए इनपुट फ़ील्ड भी सेट कर सकते हैं।

<input type="text" readonly="true" /> 

Answer 5

मुझे पता चला है कि कम से कम मेरे लिए jQuery कैलेंडर प्लगइन सामान्य रूप से तिथियों का चयन करने के लिए बेहतर काम करता है।

Answer 6

आप एक से अधिक स्थानों पर datepicker पुन: उपयोग कर रहे हैं तो यह की तरह कुछ का उपयोग करके जावास्क्रिप्ट के माध्यम से भी पाठ बॉक्स को संशोधित करने के लिए उपयुक्त होगा: सही होने के बाद

$("#my_txtbox").attr('readOnly' , 'true'); 

/जगह है जहाँ आप अपने datepicker प्रारंभ से पहले ।

Answer 7

<input type="text" readonly="true" /> 

टेक्स्टबॉक्स को पोस्टबैक के बाद अपना मूल्य खोने का कारण बनता है।

आपको ब्रैड 8118 के सुझाव का उपयोग करना चाहिए जो पूरी तरह से काम कर रहा है।

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

संपादित करें: यह IE के लिए काम कर रहे 'कुंजी दबाने'

Answer 8

मेरे अनुभव के आधार के बजाय का उपयोग करें 'keydown' पाने के लिए मैं करूंगा समाधान Adhip गुप्ता ने सुझाव दिया की सिफारिश:

$("#my_txtbox").attr('readOnly' , 'true'); 

निम्नलिखित कोड उपयोगकर्ता को नए अक्षरों को टाइप करने नहीं देगा, लेकिन उन्हें वर्णों को हटाने की अनुमति देगा:

$("#my_txtbox").keypress(function(event) {event.preventDefault();}); 

साथ ही, इस प्रपत्र जो लोग जावास्क्रिप्ट निष्क्रिय करने के लिए बेकार प्रस्तुत करना होगा:

<input type="text" readonly="true" /> 

Answer 9

या आप, उदाहरण के लिए, मान संग्रहीत एक छिपी हुई फ़ील्ड इस्तेमाल कर सकते हैं ...

 <asp:HiddenField ID="hfDay" runat="server" /> 

।

और $ में ("# my_txtbox") datepicker ({विकल्प:

 onSelect: function (dateText, inst) { 
      $("#<% =hfDay.ClientID %>").val(dateText); 
     } 

Answer 10

आप उपयोगकर्ता datepicker ख से एक तिथि का चयन करना चाहते हैं

<script type="text/javascript"> 
$(function() { 
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); 
    $("#datepicker").readonlyDatepicker(true); 

}); 

Answer 11

$('.date').each(function (e) { 
    if ($(this).attr('disabled') != 'disabled') { 
     $(this).attr('readOnly', 'true'); 
     $(this).css('cursor', 'pointer'); 
     $(this).css('color', '#5f5f5f'); 
    } 
}); 

Answer 12

आपके पास दो विकल्प यह किया जाना है: ut आप उपयोगकर्ता टाइप करने के लिए अंदर पाठ बॉक्स उसके बाद निम्न कोड का उपयोग नहीं चाहते। (जहाँ तक मुझे पता है)

1. विकल्प A: करें कि आपके पाठ क्षेत्र केवल पढ़ने के लिए। यह निम्नानुसार किया जा सकता है।

2. विकल्प बी: curser onFocus बदलें। धुंधला करने के लिए टीआई सेट करें। यह आपके दिनांक पिकर टेक्स्ट फ़ील्ड में onfocus="this.blur()" विशेषता सेट करके किया जा सकता है।

पूर्व: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Answer 13

एचटीएमएल

<input class="date-input" type="text" readonly="readonly" /> 

सीएसएस

.date-input { 
     background-color: white; 
     cursor: pointer; 
} 

Answer 14

यहाँ अपने जवाब w है यह हल करने का तरीका है। जब आप टेक्स्टबॉक्स नियंत्रण में उपयोगकर्ता इनपुट को प्रतिबंधित करते हैं तो आप jquery का उपयोग नहीं करना चाहते हैं।

<input type="text" id="my_txtbox" readonly /> <!--HTML5--> 

<input type="text" id="my_txtbox" readonly="true"/> 

Answer 15

$("#txtfromdate").datepicker({   
    numberOfMonths: 2, 
    maxDate: 0,    
    dateFormat: 'dd-M-yy'  
}).attr('readonly', 'readonly'); 

jQuery में केवल पढ़ने के लिए गुण जोड़ें।

Answer 16

$ ("# my_txtbox")।इसके बजाय पाठ बॉक्स का उपयोग कर आप भी बटन का उपयोग कर सकते हैं की सहारा ('केवल पढ़ने के लिए', true)

एक आकर्षण की तरह काम किया ..

Answer 17

। मेरे लिए सबसे अच्छा काम करता है, जहां मैं नहीं चाहता कि उपयोगकर्ता मैन्युअल रूप से तारीख लिखें।

Answer 18

दिनांक पिकर initialising के बाद:

 $(".project-date").datepicker({ 
      dateFormat: 'd M yy' 
     }); 

     $(".project-date").keydown(false); 

Answer 19

मैं सिर्फ यह भर में आया था इसलिए मैं यहाँ साझा कर रहा हूँ। यहाँ यहाँ विकल्प

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

है कोड है।

http://jsfiddle.net/matbaric/wh1cb6cy/

बूटस्ट्रैप-datet की मेरी संस्करण:

एचटीएमएल

<br/> 
<!-- padding for jsfiddle --> 
<div class="input-group date" id="arrival_date_div"> 
    <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" /> 
    <span class="input-group-addon"> 
    <span class="glyphicon-calendar glyphicon"></span> 
    </span> 
</div> 

जे एस

$('#arrival_date_div').datetimepicker({ 
    format: "YYYY-MM-DD", 
    ignoreReadonly: true 
}); 

यहाँ बेला है imepicker.js 4.17.45

Answer 20

मुझे पता है कि यह प्रश्न पहले से ही उत्तर दिया गया है, और अधिकांश को readonly का उपयोग करने का सुझाव दिया गया है।
मैं बस अपना परिदृश्य और उत्तर साझा करना चाहता हूं।

मेरी एचटीएमएल तत्व को readonly विशेषता जोड़ने के बाद, मैं मुद्दा यह है कि मैं के रूप में required गतिशील इस विशेषता बनाने के लिए सक्षम नहीं हूँ सामना करना पड़ा।
एचटीएमएल निर्माण समय पर readonly और required दोनों के रूप में सेटिंग करने का प्रयास किया।

तो मेरा सुझाव है readonly का उपयोग नहीं करते आप के रूप में required भी यह सेट करना चाहते हैं जाएगा।

इसके बजाय का उपयोग

$("#my_txtbox").datepicker({ 
    // options 
}); 

$("#my_txtbox").keypress(function(event) { 
    return ((event.keyCode || event.which) === 9 ? true : false); 
}); 

यह केवल tab कुंजी प्रेस करने के लिए अनुमति देते हैं।
आप कीकोड जोड़ सकते हैं जिसे आप बाईपास करना चाहते हैं।

कोड नीचे

मैं के बाद से मैं जोड़ लिया है दोनों readonly और required यह अभी भी प्रपत्र सबमिट करता।
readonly को हटाने के बाद यह ठीक से काम करता है।

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() { 
 
    $('#id-checkbox').change(function(){ 
 
    \t $('#id-input3').prop('required', $(this).is(':checked')); 
 
    }); 
 
    $('#id-input3').datepicker(); 
 
    $("#id-input3").keypress(function(event) { 
 
    return ((event.keyCode || event.which) === 9 ? true : false); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/> 
 

 
<form action='https://jsfiddle.net/'> 
 
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
 
    <input type='checkbox' id='id-checkbox'> Required <br> 
 
    <br> 
 
    <input type='submit' value='Submit'> 
 
</form>

Answer 21

समय पिकर की आईडी की जगह: अपनी आईडी पर IDofDatetimePicker।

यह उपयोगकर्ता को और भी कीबोर्ड इनपुट दर्ज करने से रोक देगा लेकिन फिर भी, उपयोगकर्ता समय-समय पर पॉपअप तक पहुंच पाएगा।

$ ("# my_txtbox")। Keypress (function (event) {event.preventDefault();}); https://github.com/jonthornton/jquery-timepicker/issues/109