পাঠ্যবক্স ইনপুট সহ আমি কীভাবে jQuery ডেটপিকারটি ব্যবহার করব:
$("#my_txtbox").datepicker({
// options
});যা ব্যবহারকারীকে টেক্সটবক্সে এলোমেলো পাঠ্য ইনপুট করতে দেয় না। পাঠ্যবক্সটি ফোকাস অর্জন করতে বা ব্যবহারকারী এতে ক্লিক করলে আমি ডেটপিকারটি পপআপ করতে চাই, তবে আমি চাই যে পাঠ্যবক্সটি কীবোর্ড (অনুলিপি এবং পেস্ট বা অন্য কোনও) ব্যবহার করে কোনও ব্যবহারকারী ইনপুট উপেক্ষা করবে ignore আমি ডেটপিকার পঞ্জিকা থেকে একচেটিয়া পাঠ্যবক্সটি পূরণ করতে চাই।
এটা কি সম্ভব?
jQuery
১.২.। তারিখপিকার 1.5.২.২
উত্তর:
আপনার পাঠ্য ইনপুটটিতে কেবলমাত্র পঠনযোগ্য বৈশিষ্ট্যটি ব্যবহার করতে সক্ষম হতে হবে এবং jQuery এখনও এর সামগ্রীগুলি সম্পাদনা করতে সক্ষম হবে।
<input type='text' id='foo' readonly='true'>$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
আমার অভিজ্ঞতার ভিত্তিতে আমি অ্যাডিপ গুপ্তের প্রস্তাবিত সমাধানটি সুপারিশ করব:
$("#my_txtbox").attr( 'readOnly' , 'true' );নিম্নলিখিত কোডটি ব্যবহারকারীকে নতুন অক্ষর টাইপ করতে দেয় না , তবে তাদের অক্ষর মুছতে অনুমতি দেবে:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});অতিরিক্ত হিসাবে, এটি জাভাস্ক্রিপ্ট অক্ষম যারা ফর্ম অকেজো রেন্ডার হবে:
<input type="text" readonly="true" />readonlyমাধ্যমে ক্ষেত্রটিতে বৈশিষ্ট্য যুক্ত করে আপনি নিশ্চিত করেছেন যে তারা যদি জাভাস্ক্রিপ্ট অক্ষম করে থাকে (এবং তাই ডেটপিকারটি ব্যবহার করতে সক্ষম হয় না) তবে তারা স্ট্যান্ডার্ড ম্যানুয়াল প্রবেশের মাধ্যমে ফর্মটি ব্যবহার করতে পারে।
$("#my_txtbox").prop('readonly', true);
চেষ্টা
$("#my_txtbox").keypress(function(event) {event.preventDefault();});আপনি যদি একাধিক জায়গায় তারিখ-চয়নকারীকে পুনরায় ব্যবহার করছেন তবে জাভাস্ক্রিপ্টের মাধ্যমে পাঠ্যবাক্সটি এমন কিছু ব্যবহার করে সংশোধন করা ভাল:
$("#my_txtbox").attr( 'readOnly' , 'true' );আপনি নিজের ডেটপিকারটি শুরু করার জায়গার ঠিক পরে / ঠিক আগে
<input type="text" readonly="true" />পোস্টব্যাকের পরে পাঠ্যবাক্সটির মান হারাতে পারে।
আপনার পরিবর্তে ব্র্যাড 8118 এর পরামর্শটি ব্যবহার করা উচিত যা নিখুঁতভাবে কাজ করছে।
$("#my_txtbox").keypress(function(event) {event.preventDefault();});সম্পাদনা করুন: IE এর জন্য এটি কাজ করতে 'কীপ্রেস' পরিবর্তে 'কীডাউন' ব্যবহার করুন
এটি সম্পন্ন করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে। (যতদুর আমি জানি)
বিকল্প একটি: আপনার পাঠ্য ক্ষেত্রটি কেবল পঠনযোগ্য করে তুলুন। এটি নিম্নলিখিত হিসাবে করা যেতে পারে।
বিকল্প বি: কার্ফার অনফোকাস পরিবর্তন করুন। অস্পষ্টতার জন্য টিআই সেট করুন। এটি onfocus="this.blur()"আপনার তারিখ চয়নকারী পাঠ্য ক্ষেত্রে বিশিষ্টতা স্থাপন করে করা যেতে পারে ।
উদা: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
তারিখ চয়নকারী আরম্ভ করার পরে:
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);$(".project-date").datepicker().keydown(false);
লাভ ফোকাসে ডেটপিকারকে পপআপ করতে:
$(".selector").datepicker({ showOn: 'both' })আপনি যদি ব্যবহারকারী ইনপুট না চান, এটি ইনপুট ক্ষেত্রে যুক্ত করুন
<input type="text" name="date" readonly="readonly" />আমি সবেমাত্র এদিকে এসেছি তাই আমি এখানে ভাগ করে নিচ্ছি। এখানে বিকল্প রয়েছে
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
কোডটি এখানে।
এইচটিএমএল
<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
});এই হৈচৈ
http://jsfiddle.net/matbaric/wh1cb6cy/
বুটস্ট্র্যাপ-ডেটটাইমপিকার.জেএস এর আমার সংস্করণটি 4.17.45
আমি জানি যে এই থ্রেডটি পুরানো, তবে অন্যদের ক্ষেত্রে যারা একই সমস্যার মুখোমুখি হন, তারা @ ব্র্যাড 8118 সমাধানটি প্রয়োগ করে (যা আমি পছন্দ করি, কারণ আপনি যদি ইনপুটটিকে কেবল পঠন করতে পছন্দ করেন তবে ব্যবহারকারী ডেটপিকার থেকে সন্নিবেশিত তারিখের মানটি মুছতে সক্ষম হবে না যদি তিনি চয়ন করেন) এবং এছাড়াও ব্যবহারকারীকে কোনও মান আটকে দেওয়া থেকে বিরত রাখতে হবে (যেমন @ এরিক ফিলিপস প্রয়োজন হিসাবে প্রস্তাবিত হয়েছিল), আমি এখানে এই সংযোজনটি দিচ্ছি, যা আমার পক্ষে কাজ করেছে:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });এখান থেকে https://www.dotnettricks.com/learn/ jquery / অক্ষম-কাট-অনুলিপি-এবং-পেস্ট-ইন-টেক্সটবক্স-
ব্যবহার-jquery- জাভাস্ক্রিপ্ট এবং আমার দ্বারা ব্যবহৃত পুরো নির্দিষ্ট স্ক্রিপ্ট (পরিবর্তে fengyuanchen / তারিখপিকার প্লাগইন ব্যবহার করে):
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
pick: function (e) {
e.preventDefault();
$(this).val($(this).datepicker('getDate', true));
}
}).keypress(function(event) {
event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
e.preventDefault()
}); //disable paste;এর পরিবর্তে যোগ করার কেবলমাত্র আপনার কাছে ব্যবহার করতে পারেন = "রিটার্ন মিথ্যা;" onkeypress
আমি খুঁজে পেয়েছি যে আমার জন্য কমপক্ষে jQuery ক্যালেন্ডার প্লাগইন সাধারণত তারিখগুলি নির্বাচনের জন্য আরও ভাল কাজ করে।
সমাধান করার উপায় এটিই আপনার উত্তর এখানে।
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>$ ("# my_txtbox")। প্রপ ('কেবলমাত্র পঠনযোগ্য', সত্য)
একটি কবজ মত কাজ ..
পাঠ্যবক্স ব্যবহারের পরিবর্তে আপনি বোতামটিও ব্যবহার করতে পারেন। আমার পক্ষে সবচেয়ে ভাল কাজ করে, যেখানে আমি চাই না ব্যবহারকারীরা নিজেই তারিখটি লেখেন।
আমি জানি এই প্রশ্নের ইতিমধ্যে উত্তর দেওয়া হয়েছে, এবং বেশিরভাগ বৈশিষ্ট্য ব্যবহার করার পরামর্শ দেওয়া হয়েছে 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(){
$('#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>সময় বাছাইকারীর আইডি প্রতিস্থাপন করুন: আপনার আইডিতে আইডিফডেটটাইমপিকার।
এটি ব্যবহারকারীর আরও কীবোর্ড ইনপুট প্রবেশ করতে বাধা দেবে কিন্তু তবুও, ব্যবহারকারী সময় পপআপ অ্যাক্সেস করতে সক্ষম হবেন।
$ ("# আমার_টেক্সটবক্স") ress কিপ্রেস (ফাংশন (ইভেন্ট) {ইভেন্ট.প্রিভেন্টডেফল্ট ();});
এই উত্সটি ব্যবহার করে দেখুন: https://github.com/jonthornton/jquery-Timepicker/issues/109
এই প্রশ্নের অনেকগুলি পুরানো উত্তর রয়েছে এবং কেবলমাত্র পঠনযোগ্যভাবেই সাধারণত গৃহীত সমাধান বলে মনে হয়। আমি বিশ্বাস করি আধুনিক ব্রাউজারগুলিতে আরও ভাল পদ্ধতির ব্যবহার হ'লinputmode="none" এইচটিএমএল ইনপুট ট্যাগটিতে ব্যবহার করা:
<input type="text" ... inputmode="none" />বা, আপনি যদি স্ক্রিপ্টে এটি করতে পছন্দ করেন:
$(selector).attr('inputmode', 'none');আমি এটির ব্যাপকভাবে পরীক্ষা করিনি, তবে এটি আমি যে Android অ্যান্ড্রয়েড সেটআপগুলির সাথে ব্যবহার করেছি সেগুলিতে এটি ভালভাবে কাজ করছে।
অথবা আপনি উদাহরণস্বরূপ, মানটি সংরক্ষণ করার জন্য একটি লুকানো ক্ষেত্র ব্যবহার করতে পারেন ...
<asp:HiddenField ID="hfDay" runat="server" />এবং $ ("# my_txtbox") এ। ডেটপিকার ({বিকল্পগুলি:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}আপনি যদি ব্যবহারকারীকে ডেটপিকার থেকে একটি তারিখ চয়ন করতে চান তবে আপনি ব্যবহারকারীকে টেক্সটবক্সের মধ্যে টাইপ করতে চান না তবে নীচের কোডটি ব্যবহার করুন:
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});