কীভাবে জিকুয়েরি ডেটপিকার নিয়ন্ত্রণকে পুনরায় আকার দিন

Question

আমি প্রথমবারের জন্য jQuery ডেটপিকার নিয়ন্ত্রণ ব্যবহার করছি। আমি এটি আমার ফর্মটিতে কাজ করতে পেয়েছি তবে এটি আমার চেয়ে দ্বিগুণ এবং jQuery ইউআই পৃষ্ঠায় ডেমোর চেয়ে 1.5 গুণ বড়। আকার নিয়ন্ত্রণ করতে আমি কি কিছু সাধারণ সেটিং মিস করছি?

সম্পাদনা: আমি একটি সংকেত পেয়েছি, তবে এটি নতুন সমস্যাগুলি খুলবে। সিএসএস ফাইলে এটি সূচিত করে যে উপাদানটি প্যারেন্ট উপাদানগুলির ফন্টের আকার অনুযায়ী স্কেল করবে। তারা সেট করার পরামর্শ দেয়

body {font-size: 62.5%;}

1 এম = 10 পিক্স তৈরি করতে। এটি করার ফলে আমি একটি সুন্দর আকারের ডেটপিকারটি পাই, তবে স্পষ্টতই এটি আমার বাকী সাইটটিকে বিশৃঙ্খল করে তোলে (আমার কাছে বর্তমানে ফন্টের আকার রয়েছে: .9 এম)।

আমি আমার পাঠ্য বাক্সের চারপাশে একটি ডিআইভি নিক্ষেপ করার এবং এর ফন্টের আকার নির্ধারণ করার চেষ্টা করেছি, তবে এটি এড়ানো হবে বলে মনে হচ্ছে। সুতরাং তার পিতামাতার ফন্ট পরিবর্তন করে ডেটপিকারকে সঙ্কুচিত করার কিছু উপায় থাকতে হবে, তবে আমি কীভাবে আমার বাকী সাইটের গোলমাল না করে এটি করব?

Comments

আপনার কোডটি আটকে দিন, কারণ এটি বড় হওয়ার কোনও কারণ নেই বলে আমি জানি? এবং আপনার চিত্র বাটন বা প্রকৃত ক্যালেন্ডার যা উল্লেখ করে দিনগুলি দেখায়?

— টিটিস্ট্যাম্পার

আমি লক্ষ্য করেছি যে ডেটপিকারটি এইচটিএমএল কোনও ডিভযুক্ত ডিভের বাইরে .োকানো হবে। এজন্য আপনার ডিভের ফন্টের আকারটি সেট করা এটি করেনি (স্টাইলের ঘোষণাকে আরও নির্দিষ্ট করে দেওয়া দরকার যেমন জিমি স্টেনকের উত্তরে)।

— evanrmurphy

Answer 1

আপনাকে এটি jquery-ui CSS ফাইলে পরিবর্তন করতে হবে না (যদি আপনি ডিফল্ট ফাইলগুলি পরিবর্তন করেন তবে এটি বিভ্রান্তিকর হতে পারে), আপনি যুক্ত করলে এটি যথেষ্ট

div.ui-datepicker{
 font-size:10px;
}

ইউআই-ফাইলগুলির পরে লোড হওয়া স্টাইলশিটে

ঘোষণায় ইউআই-ডেটপিকারের পরে ইউআই-উইজেট উল্লেখ করা হলে ডিভুই-ডেটপিকারের প্রয়োজন

Comments

"ইউআই-ফাইলের পরে স্টাইলশিটে লোড করা" পদক্ষেপটি খুব গুরুত্বপূর্ণ। আপনি jquery ui স্টাইলশীটের আগে যদি আপনার স্টাইলশিটটি লোড করেন তবে আপনার সেট করা কোনও বৈশিষ্ট্য ওভাররাইট করা হবে।

— ট্র্যাভিস 15

মন্তব্য 1 অনুযায়ী ওভাররাইট করা সমস্যা বন্ধ করতে - আপনি এটি করতে পারেন: ফন্ট-আকার: 10px! গুরুত্বপূর্ণ;

— মার্টিন

গুরুত্বপূর্ণ হ্যাক-ইশ, আমি অবশ্যই এটি ব্যবহারের বিরুদ্ধে পরামর্শ দেব।

— ডেরেক অ্যাডায়ার

এ কারণেই তাদেরকে ক্যাসকেডিং স্টাইল শীট (সিএসএস) বলা হয়

— মার্ক ডাব্লু

লল এমনকি সমস্যাটি ফন্ট-আকার হতে পারে তা খেয়াল করেন নি! আপনাকে ধন্যবাদ

— themhz

Answer 2

আমি কোনও মন্তব্য যুক্ত করতে পারি না, সুতরাং এটি কেইজ্রোর গৃহীত উত্তরের প্রসঙ্গ। পরিবর্তে আমি পরিবর্তে আমার স্টাইলশীটে নিম্নলিখিতটি যুক্ত করেছি:

    div.ui-datepicker {
    font-size: 62.5%;
}

এবং এটি কাজ করে। এটি 10px এর পরম মানের চেয়ে পছন্দনীয় হতে পারে।

Answer 3

নিশ্চিত না যে কোনও সংস্থা নিম্নলিখিত পদ্ধতিতে পরামর্শ দিয়েছে কিনা, যদি হ্যাঁ, কেবল আমার মন্তব্যগুলি উপেক্ষা করুন। আমি আজ এটি পরীক্ষা করেছি এবং এটি আমার পক্ষে কাজ করে। নিয়ন্ত্রণ প্রদর্শিত হওয়ার আগে হরফ আকার পরিবর্তন করে:

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});

শো করার আগে কলব্যাক ফাংশন ব্যবহার করা

Comments

আমি এই সমাধানটি আরও ভাল পছন্দ করি

— কোড বানর

Answer 4

আমি ui.theme.css এ নিম্নলিখিত লাইনটি পরিবর্তন করেছি:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

প্রতি:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }

Answer 5

যোগ

div.ui-datepicker, .ui-datepicker td{
 font-size:10px;
}

ইউআই-ফাইলগুলির পরে লোড হওয়া স্টাইলশিটে। এটি তারিখের আইটেমগুলির আকারও পরিবর্তন করবে।

Answer 6

আমার জন্য এটি ছিল সবচেয়ে সহজ সমাধান: আমি font-size:62.5%;প্রথমটিতে এটি যুক্ত করেছিলাম.ui-datepicker জ্যুচুরি কাস্টম সিএসএস ফাইলের ট্যাগটিতে :

আগে:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;} 

পরে:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

Answer 7

আমি এই উদাহরণগুলি সফলতা ছাড়াই চেষ্টা করছিলাম। স্পষ্টতই পৃষ্ঠার অন্যান্য স্টাইলশিটগুলি বিভিন্ন ট্যাগের জন্য ডিফল্ট ফন্টের আকার নির্ধারণ করছিল। আপনি যদি ইউআই-ডেটপিকারটি সামঞ্জস্য করেন তবে আপনি একটি ডিভ পরিবর্তন করছেন। আপনি যদি একটি ডিভি পরিবর্তন করেন তবে আপনাকে নিশ্চিত করতে হবে যে ডিভের বিষয়বস্তুগুলি সেই আকারের উত্তরাধিকারী। শেষ পর্যন্ত আমার পক্ষে এটিই কাজ করেছিল:

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

শুভকামনা!

Answer 8

আমি ক্যালেন্ডার সংগ্রহ এবং প্রদর্শন করতে একটি ইনপুট ব্যবহার করছিলাম এবং যে ক্যালেন্ডারটি আমি এই কোডটি ব্যবহার করে চলেছি তার পুনরায় আকার দিতে সক্ষম হব:

div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

ইহা যাদুর মত কাজ করে।

Answer 9

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Answer 10

এটি আমার পক্ষে কাজ করেছে এবং সহজ বলে মনে হচ্ছে ...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>

Answer 11

with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:


<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>

<script>



$(function() {

$( "#datepicker" ).datepicker({
//font-size:10px;
 //numberOfMonths: 3,

showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>

</head>

Answer 12

আমি শোর আগে কলব্যাক ফাংশনটি ব্যবহার করার পদ্ধতির চেষ্টা করেছি কিন্তু আমি খুঁজে পেয়েছি যে আমাকে লাইন উচ্চতাও নির্ধারণ করতে হবে। আমার সংস্করণটি এমন দেখাচ্ছে:

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}

Answer 13

ক্যালেন্ডারের আকার পরিবর্তন করার সেরা জায়গাটি হল jquery-ui.css ফাইলটিতে

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}

Answer 14

এই কোডটি ক্যালেন্ডার বোতামে কাজ করবে। "লাইন-উচ্চতা" ব্যবহার করে সংখ্যার আকার বৃদ্ধি পাবে।

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

Answer 15

আপনি নীচে jquery-ui-1.10.4.custom.css পরিবর্তন করতে পারেন

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

Answer 16

অন্য পদ্ধতি:

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});

Answer 17

$('div.ui-datepicker').css({ fontSize: '12px' }); যদি আমরা পরে এটি কল $("#DueDate").datepicker();

বেহালা

Answer 18

জ্যাকব সোই সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করে:

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){ 
        $(".ui-datepicker").css('font-size', 12)
    }
});

Answer 19

নীচের প্রদত্ত কোড হিসাবে আমরা ডিফল্ট ' jquery-ui.css ' ফাইলটিতে পরিবর্তন করতে পারি :

div.ui-datepicker {
font-size: 80%; 
}

তবে, ডিফল্ট ' jquery-ui.css ' পরিবর্তন করা হচ্ছে ' ফাইল প্রস্তাব দেওয়া হয় না কারণ এটি প্রকল্পের অন্য কোথাও ব্যবহার করা যেতে পারে। ডিফল্ট ফাইলে মান পরিবর্তন করা অন্যান্য ওয়েবপৃষ্ঠাগুলিতে যেখানে এটি ব্যবহৃত হয়েছে সেখানে ডেট পিকার ফন্টের পরিবর্তন করতে পারে।

"ফন্ট-আকার" পরিবর্তন করতে আমি নীচের কোডটি ব্যবহার করেছি। ডেটপিকারকে () নীচে দেখানো হিসাবে ডাকা হওয়ার ঠিক পরে আমি এটিকে রেখেছি।

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

আশাকরি এটা সাহায্য করবে...

Answer 20

আমার মনে হয় আমি এটি পেয়েছি - ডেটপিকার নিয়ন্ত্রণের জন্য আমাকে সিএসএস ফাইলে গিয়ে ফন্ট-আকার পরিবর্তন করতে হয়েছিল। স্পষ্টত একবার আপনি এটি সম্পর্কে জানতে, তবে প্রথমে বিভ্রান্তিকর।

Answer 21

ui.all.css খুলুন

শেষে রাখুন

@import "ui.base.css";
@import "ui.theme.css";

div.ui-datepicker {
font-size: 62.5%; 
}

এবং যান !

Answer 22

এটি রেল ৩.১ সহ সাফারি ৫.১ এ কাজ করতে, আমাকে যুক্ত করতে হয়েছিল:

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}

Answer 23

আমার ডেটপিকারটি একটি মডেলে উপস্থিত ছিল এবং বাম পাশে "তারিখ-প্রদর্শন-ধারক" থাকায় ক্যালেন্ডারটি আংশিকভাবে দৃষ্টিতে ছিল না, তাই আমি যুক্ত করেছি:

.datepicker-date-display {
  display: none;
}

.datepicker-calendar-container {
  max-height: 21em;
}
.datepicker-day-button {
  line-height: 1.2em;
}

.datepicker-table > thead > tr > th {
  padding: 0;
}