JQuery डेटाटाइम पिकर - केवल महीने और वर्ष चुनने की आवश्यकता है

मैं इस पोस्ट jQuery UI DatePicker to show month year only के माध्यम से गया जो मेरी स्थिति के अनुरूप डेटाटाइम पिकर यूआई को हैक करने के लिए मेरे लिए बहुत उपयोगी है।JQuery डेटाटाइम पिकर - केवल महीने और वर्ष चुनने की आवश्यकता है

लेकिन जैसा कि मेरे पास एक ही रूप में कई डेटाटाइम पिकर हैं, ऐसा होता है। सीएसएस display:none का लक्ष्य उन दिनों को छिपाने का लक्ष्य है जिन्हें दिखाया नहीं जा सकता है। लेकिन अगर मेरे पास एक ही फॉर्म पर कई डेटाटाइम पिकर हैं लेकिन केवल एक मैं इसे महीने में से एक बनाना चाहता हूं, तो मैं इसे कैसे प्राप्त कर सकता हूं? Thw css के साथ, यह सभी डेटाटाइम कैलेंडर UI पर गायब हो जाता है क्योंकि सीएसएस .ui-datepicker-calendar की विशेषता को बदल देगा। किसी भी सुझाव का स्वागत है।

स्रोत

2010-11-02 Darren

मैंने ऐसा कुछ किया, लेकिन डेटपिकर स्क्रिप्ट का एक अलग 'संस्करण' बनाया और इसे महीना पिकर कहा, जिसमें इसका स्वयं का सीएसएस चयनकर्ता और सीएसएस फ़ाइल है। इसका मतलब था कि आप एक ही पृष्ठ पर दोनों या दोनों का उपयोग कर सकते हैं।

स्रोत

2010-11-02 16:02:51 Paddy

हाय आपके तरह के उत्तर के लिए धन्यवाद, इसके बारे में और जानकारी दे सकते हैं, ठीक है, मैं jquery.ui.datetimepicker.js से एक और .js फ़ाइल कॉल monthpicker.js को डुप्लिकेट करता हूं, तो अगला कदम यह आपके द्वारा समझाया जाना चाहिए " सीएसएस चयनकर्ताओं और सीएसएस फ़ाइल "? – Darren

@ डैरेन - आपको कोड को चुनने की आवश्यकता है और देखें कि स्क्रिप्ट उन वस्तुओं को चयनकर्ताओं/आईडी को कैसे निर्दिष्ट कर रही है जो इसे बनाता है और उन्हें 'डेटपिकर' के बजाय 'monthpicker' का उपयोग करने के लिए बदलता है। फिर आपको सीएसएस फ़ाइल की प्रतिलिपि बनाने और वहां मिलान करने वाले बदलाव करने की आवश्यकता है। – Paddy

ठीक है, बस आश्चर्य कीजिए कि क्या मैं कक्षा .ui-datepicker-calendar का चयन करने के लिए सीएसएस विरासत का उपयोग कर सकता हूं जो <इनपुट प्रकार = "टेक्स्ट" id = "monthPicker" /> में मेरे एकमात्र डेटपिकर से संबंधित है? – Darren

वर्तमान में, डेटपिकर प्रति पृष्ठ केवल 1 तत्व बनाता है कि सभी 'डेटपिकर' इनपुट साझा करते हैं, इसलिए लिंक किए गए प्रश्न का उत्तर क्यों काम नहीं करता है। पहले शो घटना .addClass() या .css() के साथ डेटपिकर तत्व को संपादित करने की अनुमति नहीं देती है (क्योंकि तत्व संरचना को जब यह दिखाता है तो डेटपिकर स्क्रिप्ट से रीफ्रेश किया जाता है।)

इस पर जाने के लिए, मैंने पाया कि फोकस इनपुट तत्व के लिए ईवेंट डेटपिकर दिखाए जाने के बाद कोड चलाने के लिए प्रतीत होता है। यह एक निराशाजनक समस्या के लिए एक सरल कामकाज है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> 
<script type="text/javascript"> 
$(function() { 
    $('.month-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(year, month, 1)); 
     }, 
     beforeShow : function(input, inst) { 
      if ((datestr = $(this).val()).length > 0) { 
       year = datestr.substring(datestr.length-4, datestr.length); 
       month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
       $(this).datepicker('setDate', new Date(year, month, 1)); 
      } 
     } 
    }); 
    $('.date-picker').datepicker(); 
    $('.month-picker').focus(function() { 
     $('.ui-datepicker-calendar').addClass('hideDates'); 
    }); 
}); 
</script> 
<style> 
.hideDates { 
    display: none; 
} 
</style> 
</head> 
<body> 
    <label for="startDate">Date:</label> 
    <input name="startDate" id="startDate" class="date-picker" /> 
    <label for="endMonth">End Month:</label> 
    <input name="endMonth" id="endMonth" class="month-picker" /> 
</body> 
</html>

स्रोत

2010-11-17 15:27:22

डेटपिकर को खाली पैरामीटर के साथ कॉल करने वाली रेखा क्या है? यह क्या करता है? – Nap

@Nassign - इस पृष्ठ पर दो डेटपिकर्स हैं। खाली पैरामीटर के साथ डेटपिकर कॉल केवल डिफ़ॉल्ट कार्यक्षमता के साथ दूसरा डेटपिकर बनाने के लिए है। –

धन्यवाद। मुझे एक साइट मिली जो बटन पैनल में कस्टम बटन जोड़ती है। लेकिन जब भी माह बदल जाता है तो बटन गायब हो जाता है और अब बटन बदल जाता है। कोई उपाय? यहां साइट लिंक है: http://csharptechies.blogspot.com/2010/12/adding-custom-buttons-to-jquery.html – Nap

मैं कोड है कि बेन पोस्ट की एक अलग संस्करण का उपयोग किया:

यहाँ मेरी कोड है। इसके बजाय फोकस घटना पर भरोसा करने की मैं OnClose में

inst.dpDiv.addClass('monthonly');

beforeShow विधि में

और

inst.dpDiv.removeClass('monthonly');

गयी। यह सभी डेटपिकर विगेट्स द्वारा उपयोग किए जाने वाले सामान्य div पर एक वर्ग को जोड़ता है और हटा देता है। तारीख कैलेंडर div तो

.monthonly#ui-datepicker-div .ui-datepicker-calendar 
{ 
    display: none; 
}

स्रोत

2011-02-16 10:00:53 Mike

इच्छा है कि मैंने इसे पढ़ा था। यह दृष्टिकोण इनपुट के ऊपर दिखाई देने पर कैलेंडर की स्थिति को गलत होने से रोकता है। (देखें: http://stackoverflow.com/questions/5816749/jquery-ui-datepicker-month-and-year-only-css-positioning-problem) – benb

यह बहुत अच्छा है, धन्यवाद! – MrYoshiji

पिछला समाधान का उपयोग कर विभिन्न प्रारूपों के साथ काम नहीं करेगा सीएसएस में निशाना बनाया जा सकता है। सेटडेट पहले से कुछ भी नहीं करेगा। यह करने के लिए उचित तरीके से हो जाएगा:

beforeShow: function(input, inst) { 
    var dateString = $(this).val(); 
    var options = new Object(); 
    if (dateString.length > 0) { 
     options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateString); 
    } 
    inst.dpDiv.addClass("ui-monthpicker"); 
    return options; 
}, 
onClose: function(dateText, inst) { 
    var month = inst.dpDiv.find(".ui-datepicker-month").val(); 
    var year = inst.dpDiv.find(".ui-datepicker-year").val(); 
    $(this).datepicker("setDate", new Date(year, month, 1)); 
    inst.dpDiv.removeClass("ui-monthpicker"); 
}

मैं अलग तिथि प्रारूप को संभालने और defaultDate विकल्प के रूप में क्षेत्र से लौटने की तारीख के लिए datepicker से parseDate इस्तेमाल किया।

आवश्यक सीएसएस:

#ui-datepicker-div.ui-monthpicker { 
    padding: 0.2em; 
} 
#ui-datepicker-div.ui-monthpicker .ui-datepicker-calendar { 
    display: none; 
}

स्रोत

2011-02-23 16:47:42 Zeljko

मैंने UI-monthpicker क्लास को हटाते समय एक टाइमआउट जोड़ा, अन्यथा डेटपिकर छिपाने से पहले कैलेंडर "चमक"। 'सेटटाइमआउट (फ़ंक्शन() {inst.dpDiv.removeClass ("ui-monthpicker");}, 200); ' – user2444499

बेन समाधान पूरी तरह से काम करता है, सिर्फ एक मामूली परिवर्तन कर दिया है, मैं onChangeMonthYear बजाय OnClose प्रयोग किया है:

onChangeMonthYear: function(year, month, inst) { 
    var date = new Date(year, month - 1, 1); 
    $(this).val($.datepicker.formatDate(format, date)); 
    $(this).datepicker('setDate', date); 
}

स्रोत

2011-03-29 23:15:56 rubish

यह code मेरे लिए दोषरहित काम कर रहा है:

$(document).ready(function() 
{ 
    $(".monthPicker").datepicker({ 
     dateFormat: 'MM yy, 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 

     onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1))); 
     } 
    }); 

    $(".monthPicker").focus(function() { 
     $(".ui-datepicker-calendar").hide(); 
     $("#ui-datepicker-div").position({ 
      my: "center top", 
      at: "center bottom", 
      of: $(this) 
     }); 
    }); 
}); 

<label for="month">Month: </label> 
<input type="text" id="month" name="month" class="monthPicker" />

स्रोत

2011-05-16 04:08:49

मेरे पास कुछ सुधारों के साथ उपर्युक्त पर आधारित एक और समाधान है ।मेरी HTML में मैं इस जोड़कर दिन पिकर को छिपाने के रूप में मैं केवल पृष्ठ पर एक है:

<style> 
    .ui-datepicker-calendar { 
     display: none; 
    } 
</style>

मैं तो मेरे datepicker आरंभ के रूप में दूसरों ऐसा किया है और onChangeMonthYear घटना के लिए कोड का एक सा जोड़ें:

$n(this).datepicker({ 
    defaultDate: 0, 
    changeMonth: true, 
    changeYear: true, 
    onChangeMonthYear: function(year, month, inst) { 
     $(this).datepicker('setDate', new Date(year, month - 1, 1)); 
    } 
});

नोट:

महीने - 1

यदि आप इसे नहीं जोड़ते हैं तो आपको एक स्टैक ओवरफ़्लो मिलेगा क्योंकि इस फ़ंक्शन को 1 आधारित इंडेक्स महीने प्राप्त होता है लेकिन सेटडेट सामान्य 0 आधारित माह का उपयोग करता है।

स्रोत

2011-07-21 10:30:43 Oly

JQuery डेटाटाइम पिकर - केवल महीने और वर्ष चुनने की आवश्यकता है

उत्तर

संबंधित मुद्दे