JQuery DatePicker नियंत्रण का आकार कैसे बदलें

195

मैं पहली बार jQuery DatePicker नियंत्रण का उपयोग कर रहा हूं। मुझे यह मेरे रूप में काम कर रहा है, लेकिन यह लगभग दोगुना बड़ा है जितना मैं चाहूंगा, और jQuery यूआई पृष्ठ पर डेमो के रूप में लगभग 1.5 गुना बड़ा है। क्या आकार को नियंत्रित करने के लिए कुछ सरल सेटिंग मुझे याद आ रही है?

संपादित करें: मुझे एक सुराग मिला, लेकिन यह नई समस्याओं को खोलता है। CSS फ़ाइल में, यह बताता है कि घटक मूल तत्व के फ़ॉन्ट आकार के अनुसार स्केल होगा। वे सेटिंग की सलाह देते हैं

body {font-size: 62.5%;}

1em = 10px बनाने के लिए। ऐसा करने से मुझे एक अच्छा आकार मिलता है, लेकिन स्पष्ट रूप से यह मेरी साइट के बाकी हिस्सों को गड़बड़ कर देता है (वर्तमान में मेरा आकार-आकार:: 9 मी) है।

मैंने अपने टेक्स्ट बॉक्स के चारों ओर एक DIV को फेंकने और इसके फॉन्ट साइज़ को सेट करने की कोशिश की, लेकिन इसे नज़रअंदाज़ कर दिया गया। तो अपने माता-पिता के फ़ॉन्ट को बदलकर डेटकरी को सिकोड़ने का कोई तरीका होना चाहिए, लेकिन मैं अपनी साइट के बाकी हिस्सों को गड़बड़ किए बिना कैसे करूं?

jquery-ui

— gfrizzle
स्रोत

अपने कोड को पेस्ट करें, क्योंकि मुझे पता है कि यह बड़ा क्यों होगा? और आपकी छवि बटन या वास्तविक कैलेंडर का जिक्र है जो दिनों को दर्शाता है?

— TStamper

मैंने देखा है कि किसी भी div वाले के बाहर दिनांकित HTML डाली जाएगी। इसीलिए आपके डिव का फॉन्ट साइज़ सेट करना (इस तथ्य से अलग नहीं है कि शैली की घोषणा अधिक विशिष्ट होने की आवश्यकता है, जैसे जिमी स्टेनके के उत्तर में)।

— evanrmurphy

390

आपको इसे jquery-ui css फ़ाइल में बदलने की ज़रूरत नहीं है (यदि आप डिफ़ॉल्ट फ़ाइलों को बदलते हैं तो यह भ्रमित हो सकता है), यदि आप जोड़ते हैं तो यह पर्याप्त है

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

ui-files के बाद भरी हुई एक स्टाइलशीट में

घोषणा में ui-datepicker के बाद ui- विजेट का उल्लेख किया है मामले में div.ui-datepicker की जरूरत है

— जिमी स्टेनके
स्रोत

26

"Ui-files के बाद भरी हुई एक स्टाइलशीट" चरण में बहुत महत्वपूर्ण है। यदि आप jquery ui स्टाइलशीट से पहले अपनी स्टाइलशीट लोड करते हैं, तो आपके द्वारा सेट की गई कोई भी विशेषता ओवरराइट हो जाएगी।

— ट्रैविस

7

1 टिप्पणी के अनुसार अधिलेखित मुद्दे को रोकने के लिए - आप ऐसा कर सकते हैं: फ़ॉन्ट-आकार: 10px! महत्वपूर्ण

— मार्टिन

7

महत्वपूर्ण हैक है ईश, मैं निश्चित रूप से उस का उपयोग करने के खिलाफ सलाह देंगे।

— डेरेक अडेयर

5

यही कारण है कि उन्हें CASCADING स्टाइल शीट्स (CSS)

— मार्क डब्ल्यू

1

योग्य ने यह भी नहीं देखा कि समस्या फ़ॉन्ट-आकार की हो सकती है! धन्यवाद

— themhz

30

मैं एक टिप्पणी नहीं जोड़ सकता, इसलिए यह केजरीो द्वारा स्वीकृत उत्तर के संदर्भ में है। मैंने वास्तव में इसके बजाय अपनी स्टाइलशीट में निम्नलिखित को जोड़ा:

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

और यह काम भी किया। यह 10px के निरपेक्ष मूल्य के लिए बेहतर हो सकता है।

— ब्रायंट बोमन
स्रोत

20

यह सुनिश्चित नहीं है कि कुछ शरीर ने निम्नलिखित तरीके सुझाए हैं, यदि हां, तो बस मेरी टिप्पणियों को अनदेखा करें। मैंने आज इसका परीक्षण किया और यह मेरे लिए काम करता है। नियंत्रण प्रदर्शित होने से पहले केवल फ़ॉन्ट का आकार बदलकर:

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

Show से पहले कॉलबैक फ़ंक्शन का उपयोग करना

— जैकब सीयूआई
स्रोत

2

मुझे यह उपाय बेहतर लगा

— कोड मंकी

9

मैं 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; }

— पावले चुचुवा
स्रोत

5

जोड़ना

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

ui-files के बाद भरी हुई एक स्टाइलशीट में। यह भी दिनांक आइटम का आकार बदल जाएगा।

— सत्यराम बी.वी.
स्रोत

5

मेरे लिए, यह सबसे आसान समाधान था: मैंने font-size:62.5%;पहले को जोड़ा.ui-datepicker jquery कस्टम सीएसएस फ़ाइल में टैग :

इससे पहले:

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

उपरांत:

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

— रॉबर्ट के।
स्रोत

4

मैं सफलता के बिना इन उदाहरणों की कोशिश कर रहा था। जाहिरा तौर पर पृष्ठ पर अन्य स्टाइलशीट विभिन्न टैग के लिए डिफ़ॉल्ट फ़ॉन्ट आकार सेट कर रहे थे। यदि आप ui-datepicker समायोजित करते हैं तो आप एक div बदल रहे हैं। यदि आप एक डिव को बदलते हैं तो आपको यह सुनिश्चित करने की आवश्यकता है कि उस डिव की सामग्री को उस आकार का उत्तराधिकार मिला है। यह वही है जो आखिरकार मेरे लिए काम करता है:

<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>

सौभाग्य!

— चाड कुहन
स्रोत

2

मैं कैलेंडर को इकट्ठा करने और दिखाने के लिए एक इनपुट का उपयोग कर रहा था, और इस कोड का उपयोग करने वाले कैलेंडर का आकार बदलने में सक्षम होने के लिए:

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

यह एक सम्मोहन की तरह काम करता है।

— क्रिस
स्रोत

2

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

— स्टीफन होटलकर
स्रोत

1

यह मेरे लिए काम किया और सरल लगता है ...

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

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

— jimscafe
स्रोत

1

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>

— बब्बू
स्रोत

1

मैंने पहले कॉलबैक फ़ंक्शन का उपयोग करने के दृष्टिकोण की कोशिश की, लेकिन पाया कि मुझे लाइन की ऊंचाई भी निर्धारित करनी थी। मेरे संस्करण की तरह देखा:

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

— PedroKTFC
स्रोत

1

कैलेंडर का आकार बदलने के लिए सबसे अच्छी जगह फ़ाइल jquery-ui.css है

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

— जॉन बेलाबाजार
स्रोत

1

यह कोड कैलेंडर बटन पर काम करेगा। "लाइन-ऊंचाई" का उपयोग करके संख्याओं का आकार बढ़ेगा।

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

— इरशाद खान
स्रोत

1

आप jquery-ui-1.10.4.custom.css को निम्नानुसार बदल सकते हैं

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

— अंशु
स्रोत

1

एक और तरीका:

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

— mromagnoli
स्रोत

1

$('div.ui-datepicker').css({ fontSize: '12px' }); अगर हम इसे कहते हैं तो काम करें $("#DueDate").datepicker();

बेला

— मुस्तफा
स्रोत

1

याकूब Tsui समाधान मेरे लिए एकदम सही काम करता है:

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

— गेब्रियल मोलिना
स्रोत

1

हम नीचे दिए गए कोड के अनुसार डिफ़ॉल्ट ' jquery-ui.css ' फ़ाइल में परिवर्तन कर सकते हैं :

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

हालाँकि, डिफ़ॉल्ट को बदलना ' jquery-ui.css ' फ़ाइल को अनुशंसा नहीं की जाती है क्योंकि यह परियोजना में कहीं और इस्तेमाल किया गया हो सकता है। डिफ़ॉल्ट फ़ाइल में मान बदलने से यह उपयोग किए गए अन्य वेबपृष्ठों में दिनांक फ़ॉन्ट को बदल सकता है।

मैंने "फ़ॉन्ट-आकार" को बदलने के लिए नीचे दिए गए कोड का उपयोग किया। मैंने इसे डेटापिकर के बाद ही रखा है () नीचे दिखाया गया है।

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

उम्मीद है की यह मदद करेगा...

— user3401675
स्रोत

0

मुझे लगता है कि मैंने इसे पाया - मुझे सीएसएस फ़ाइल में जाना पड़ा और सीधे तारीख नियंत्रण के लिए फ़ॉन्ट-आकार बदलना पड़ा। एक बार जब आप इसके बारे में जानते हैं तो स्पष्ट है, लेकिन पहली बार में भ्रमित करना।

— gfrizzle
स्रोत

0

ui.all.css खोलें

अंत में डाल दिया

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

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

और जाओ !

0

रेल 3.1 में रेल 3.1 के साथ काम करने के लिए मुझे इसे जोड़ना था:

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

— चिकनी मिट्टी
स्रोत

0

मेरे पास एक मोडल में दिखाई देने वाली डेटपिकर थी और बाएं हाथ पर "डेट-डिस्प्ले-कंटेनर" होने के कारण, कैलेंडर आंशिक रूप से देखने से बाहर था, इसलिए मैंने जोड़ा:

.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;
}

— मैक
स्रोत