दिलचस्प पोस्ट
IOS8 इंटरएक्टिव सूचना को कैसे कार्यान्वित करें I जार के भीतर कई रननेबल क्लासेस, उन्हें कैसे चलाना है? 'मित्र' फ़ंक्शंस और << ऑपरेटर ओवरलोडिंग: क्लास के लिए ऑपरेटर को ओवरलोड करने का सही तरीका क्या है? मैक ओएस शेर पर एमएएमपी में पीईसीएल के साथ ओअथ स्थापित करने का प्रयास करते समय समस्याएं आ रही हैं चित्र लोड का पता लगाएं PHP का उपयोग कर एक बड़ी फ़ाइल स्ट्रीमिंग दृश्य अधिकतम आयामों के अनुसार बहु-पंक्ति पाठदृश्य पर पाठ का आकार कैसे समायोजित करें? PHP – स्ट्रिंग के अंत में सभी विशिष्ट वर्ण कैसे निकालें? WebApi: छवियों को कैसे संभालना है जावास्क्रिप्ट दिनांक तुलना समान नहीं C # में डेलमेन के बराबर (WinAPI) यूनिकोड अजगर में स्ट्रिंग द्वारा क्यों घोषित करें? गूगल मानचित्र एंड्रॉइड में एपीआई कुंजी त्रुटियों पर हस्ताक्षर किए XCode 6 में उद्देश्य-सी हेडर पर स्विफ्ट नहीं बनाया गया 2 डी रेट्रॉसर के लिए एल्गोरिदम

महीना वर्ष दिखाने के लिए केवल jQuery UI DatePicker

मैं अपने सभी ऐप पर कैलेंडर प्रदर्शित करने के लिए jQuery के डेट पिकर का उपयोग कर रहा हूं। मैं जानना चाहता हूं कि मैं इसका उपयोग महीने और वर्ष (मई 2010) प्रदर्शित करने के लिए कर सकता हूँ और कैलेंडर नहीं?

Solutions Collecting From Web of "महीना वर्ष दिखाने के लिए केवल jQuery UI DatePicker"

यहां एक हैक (संपूर्ण .html फ़ाइल के साथ अपडेट):

<!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.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { $('.date-picker').datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onClose: function(dateText, inst) { $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); } }); }); </script> <style> .ui-datepicker-calendar { display: none; } </style> </head> <body> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> </body> </html> 

उपरोक्त उदाहरण के लिए jsfiddle संपादित करें : http://jsfiddle.net/DBpJe/7755/

2 संपादित करें डायल करें बटन पर क्लिक करने पर केवल इनपुट बॉक्स में महीना वर्ष का मान जोड़ता है इसके अलावा इनपुट बॉक्स मूल्यों को हटाने की अनुमति है, जो कि ऊपर दिए गए क्षेत्र में संभव नहीं है http://jsfiddle.net/DBpJe/5103/

3 संपादित करें रेक्सवॉल्फ के समाधान के आधार पर बेहतर समाधान अपडेट किया गया।
http://jsfiddle.net/DBpJe/5106

यह कोड मेरे लिए बिना किसी त्रुटि के काम कर रहा है:

 <script type="text/javascript"> $(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) }); }); }); </script> <label for="month">Month: </label> <input type="text" id="month" name="month" class="monthPicker" /> 

आउटपुट है:

यहां छवि विवरण दर्ज करें

@ बेन कोहलर , यह प्रीफ़ेक्ट है! मैंने एक मामूली संशोधन किया जिससे कि दिनांक पिकर के एक उदाहरण का प्रयोग एक बार से अपेक्षाकृत काम करता हो। इस संशोधन के बिना दिनांक को गलत ढंग से पार्स किया गया है और पहले चुनी गई तारीख को हाइलाइट नहीं किया गया है।

 <!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.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { $('.date-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) { var datestr; 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', 'monthNamesShort')); $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); $(this).datepicker('setDate', new Date(year, month, 1)); } } }); }); </script> <style> .ui-datepicker-calendar { display: none; } </style> </head> <body> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> </body> </html> 

ऊपर दिए गए उत्तर बहुत अच्छे हैं मेरी एकमात्र शिकायत यह है कि आप एक बार मान सेट नहीं कर सकते हैं। इसके अलावा, मैं विस्तार- jquery जैसे एक प्लगइन दृष्टिकोण पसंद करते हैं

यह मेरे लिए एकदम सही काम करता है:

 $.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "MM yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "" }, options); function hideDaysFromCalendar() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. $('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); } $(this).datepicker(options).focus(hideDaysFromCalendar); } 

तो इस तरह से आह्वान करें:

 $('input.monthYearPicker').monthYearPicker(); 
 <style> .ui-datepicker table{ display: none; } 

 <script type="text/javascript"> $(function() { $( "#manad" ).datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'yy-mm', 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) { actDate = datestr.split('-'); year = actDate[0]; month = actDate[1]-1; $(this).datepicker('option', 'defaultDate', new Date(year, month)); $(this).datepicker('setDate', new Date(year, month)); } } }); }); 

यह समस्या को हल करेगा =) लेकिन मैं चाहता था कि समय स्वरूप Yyyy-mm

केवल हालांकि FF4 में कोशिश की

मुझे आज भी यही ज़रूरत है और इसे जिथूब पर मिला, jQueryUI के साथ काम करता है और कैलेंडर में दिनों के स्थान पर महीना पिकर होता है

https://github.com/thebrowser/jquery.ui.monthpicker

यहाँ है जो मैं साथ आया था। यह एक अतिरिक्त शैली ब्लॉक की ज़रूरत के बिना कैलेंडर को छुपाता है और इनपुट पर क्लिक करने के बाद मूल्य साफ़ करने में सक्षम न होने की समस्या से निपटने के लिए एक स्पष्ट बटन जोड़ता है इसके साथ ही एक ही पृष्ठ पर एकाधिक महीन पिक्चर के साथ अच्छी तरह से काम करता है

HTML:

 <input type='text' class='monthpicker'> 

जावास्क्रिप्ट:

 $(".monthpicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm", showButtonPanel: true, currentText: "This Month", onChangeMonthYear: function (year, month, inst) { $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1))); }, onClose: function(dateText, inst) { var month = $(".ui-datepicker-month :selected").val(); var year = $(".ui-datepicker-year :selected").val(); $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1))); } }).focus(function () { $(".ui-datepicker-calendar").hide(); }).after( $("<a href='javascript: void(0);'>clear</a>").click(function() { $(this).prev().val(''); }) ); 

मुझे दो फ़ील्ड (से & से) के लिए एक महीना / वर्ष पिकर की आवश्यकता थी और जब एक को अधिकतम / न्यूनतम चुना गया था तो दूसरे को … एयरलाइंस की एक टिकट की टिकटों की चुनौती मेरे पास अधिकतम और न्यूनतम सेट होने के मुद्दे थे … अन्य फ़ील्ड की तिथियां मिटा दी जाएंगी उपरोक्त पदों में से कई के लिए धन्यवाद … मैं अंत में इसे बाहर सोचा आपको विकल्पों और तिथियां बहुत विशिष्ट क्रम में सेट करना पड़ता है।

पूरे समाधान के लिए यह बेला देखें: माह / वर्ष पिकर @ जेएसएफडल

कोड:

 var searchMinDate = "-2y"; var searchMaxDate = "-1m"; if ((new Date()).getDate() <= 5) { searchMaxDate = "-2m"; } $("#txtFrom").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtFrom").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); var to = $("#txtTo").val(); $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1)); if (to.length > 0) { var toyear = to.substring(to.length - 4, to.length); var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1)); $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1)); } } }); $("#txtTo").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtTo").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); var from = $("#txtFrom").val(); $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1)); if (from.length > 0) { var fryear = from.substring(from.length - 4, from.length); var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1)); $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1)); } } }); 

इसके साथ ही ऊपर वर्णित शैली ब्लॉक में इसे जोड़ें:

 .ui-datepicker-calendar { display: none !important; } 

मैंने कई अच्छे उत्तर दिए हैं और इस पर पहुंचें:

  $('#payCardExpireDate').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).datepicker('setDate', new Date(year, month, 1)).trigger('change'); }, beforeShow : function(input, inst) { if ((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); } } }).focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); 

यह काम साबित हुआ है, लेकिन कई बगों का सामना करना पड़ रहा है इसलिए मुझे डेटपेकर के कई स्थानों पर पैच करने के लिए मजबूर किया गया था:

 if($.datepicker._get(inst, "dateFormat") === "mm/yy") { $(".ui-datepicker-calendar").hide(); } 

patch1: _showDatepicker में: छिपाने के लिए चिकना;

patch2: _checkOffset में: महीना पिकर पोजीशनिंग को सही करने के लिए (अन्यथा जब फ़ील्ड ब्राउज़र के निचले भाग में है, ऑफसेट चेक बंद है);

पैच 3: ऑन-क्लोज़ ऑफ द हाइडडेटपिकर: अन्यथा जब डेट फ़ील्ड को बंद करना बहुत ही कम अवधि के लिए फ्लैश करेगा जो बहुत परेशान है।

मुझे पता है कि मेरा तय अच्छा था, लेकिन अब यह काम कर रहा है। आशा करता हूँ की ये काम करेगा।

क्या यह सिर्फ मुझे है या क्या यह IE (8) में होना चाहिए काम नहीं कर रहा है? तिथि बदलते समय क्लिक किया जाता है, लेकिन डेटपिकर फिर से खुल जाता है, जब तक कि आप वास्तव में इनपुट फ़ील्ड पर फोकस करने के लिए पृष्ठ में कहीं न कहीं क्लिक करते हैं …

मैं इसे हल करने के लिए देख रहा हूं।

 <!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.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { $('.date-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)); } }); }); </script> <style> .ui-datepicker-calendar { display: none; } </style> </head> <body> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> </body> </html> 

यदि आप एक महीने के पिकर की तलाश में हैं तो http://lucianocosta.info/jquery.mtz.monthpicker/

यह मेरे लिए अच्छी तरह से काम किया

रेवती

हैप्पी कोडिंग

Waht के बारे में: http://www.mattkruse.com/javascript/calendarpopup/

महीने का चयन उदाहरण का चयन करें

Datepicker के लिए jQueryUI.com खोदने के बाद, यहां मेरा निष्कर्ष है और आपके प्रश्न का उत्तर।

सबसे पहले, मैं आपके प्रश्न के लिए नहीं कहूंगा। आप केवल महीना और वर्ष चुनने के लिए jQueryUI तिथिपिकर का उपयोग नहीं कर सकते। यह समर्थित नहीं है। इसके लिए कोई कॉलबैक फ़ंक्शन नहीं है।

लेकिन आप दिन को छुपाने के लिए सीएसएस का उपयोग करके केवल महीने और साल को प्रदर्शित करने के लिए इसे हैक कर सकते हैं। और मुझे लगता है कि कोई तारीख चुनने के लिए आपको तिथियों की ज़रूरत होने की आवश्यकता नहीं होगी।

मैं कह सकता हूं कि आपको सिर्फ एक और तारीख पिकर का उपयोग करना होगा रोजर का सुझाव किस तरह से है

मुझे महीना पिकर के साथ मिश्रित तिथि पिकर की समस्या थी मैंने इसे इस तरह हल किया

  $('.monthpicker').focus(function() { $(".ui-datepicker-calendar").show(); }).datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM/yy', create: function (input, inst) { }, onClose: function(dateText, inst) { var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val()); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); } }); 

अगर कोई चाहता है कि यह भी कई कैलेंडर के लिए यह jquery ui करने के लिए इस functionallity जोड़ने के लिए बहुत मुश्किल नहीं है के लिए minified खोज के साथ:

 x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+( 

एक्स के सामने यह जोड़ें

 var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';} 

निम्न को खोजें

 <table class="ui-datepicker-calendar 

और इसके साथ बदलें

 <table class="ui-datepicker-calendar'+accl+' 

इसके लिए भी खोजें

 this._defaults={ 

इसके साथ बदलें

 this._defaults={justMonth:false, 

सीएसएस के लिए आपको उपयोग करना चाहिए:

 .ui-datepicker table.ui-datepicker-just_month{ display: none; } 

उसके बाद सब कुछ किया जाता है बस अपने वांछित datepicker init फ़ंक्शंस पर जाकर var सेट करें

 $('#txt_month_chart_view').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', justMonth: true, create: function(input, inst) { $(".ui-datepicker table").addClass("badbad"); }, 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)); } }); 

justMonth: true यहाँ कुंजी है 🙂

ऊपर ब्रायनस के लगभग संपूर्ण प्रतिक्रिया के लिए दो शोधन किए गए:

  1. मैंने शो पर निर्धारित मूल्य को फिर से लिया है क्योंकि मुझे लगता है कि वास्तव में इसे इस मामले में थोड़ा अधिक पठनीय बना दिया गया है (हालांकि ध्यान दें मैं थोड़ा अलग प्रारूप का उपयोग कर रहा हूं)

  2. मेरे मुवक्किल को कोई कैलेंडर नहीं चाहिए, इसलिए मैंने किसी भी अन्य तिथि पिकर को प्रभावित किए बिना ऐसा करने के लिए शो / छुपा वर्ग के अतिरिक्त जोड़ दिया है क्लास को हटाना एक टाइमर पर है, जो कि टेबल पिक्सिंग से बचने के लिए टाइमर पर है, जो कि डेटपेकर फ्लेड्स के रूप में है, जो कि IE में बहुत ही ध्यान देने योग्य है।

संपादित करें: इस समस्या को हल करने के लिए एक समस्या छोड़ दी गई है कि डेटपिकर को रिक्त करने का कोई तरीका नहीं है – फ़ील्ड साफ़ करें और दूर क्लिक करें और यह चयनित तिथि के साथ पुनर्प्रेषित करता है।

EDIT2: मैंने इस अच्छी तरह से हल करने में कामयाब नहीं किया है (इनपुट के बगल में एक अलग साफ़ करें बटन को जोड़ने के बिना), इसलिए इसका उपयोग करके समाप्त हो गया है: https://github.com/thebrowser/jquery.ui.monthpicker – अगर कोई भी कर सकता है यह करने के लिए मानक यूआई एक मिलता है जो अद्भुत होगा

  $('.typeof__monthpicker').datepicker({ dateFormat: 'mm/yy', showButtonPanel:true, beforeShow: function(input, dpicker) { if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val())) { var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1); $(this).datepicker('option', 'defaultDate', d); $(this).datepicker('setDate', d); } $('#ui-datepicker-div').addClass('month_only'); }, onClose: function(dt, dpicker) { setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250); var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(y, m, 1)); } }); 

आपको यह शैली नियम भी चाहिए:

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

कई अन्य लोगों की तरह, मैंने ऐसा करने की कोशिश में कई समस्याओं का सामना किया है, और समाधानों का एक संयोजन पोस्ट किया गया है, और आखिर में यह एकदम सही बनाने के लिए एक बड़ा हैक है, ने मुझे एक हल निकाला है

इस धागे में अन्य समाधानों की समस्याएं जो मैंने कोशिश की हैं:

  1. किसी डेटपिकर में एक नई तिथि का चयन करने से, अन्य डेटपेकर की (आंतरिक) तिथि भी बदल जाएगी, इसलिए जब आप अन्य लोगों को फिर से खोले (या उनकी डेट लेने की कोशिश की), तो उनके पास उनके निर्दिष्ट इनपुट में प्रदर्शित होने की तुलना में एक अलग तिथि होगी -खेत।
  2. तिथिपंकर फिर से खोले जाने की तारीख को "याद" नहीं करेगा।
  3. तारीखों को जगाने के लिए कोड सबरिंगिंग का उपयोग किया गया था, इसलिए यह सभी प्रारूपों के साथ संगत नहीं था।
  4. "मेरा महीना-पिक्चर" ने केवल इनपुट फ़ील्ड को इसे बंद करने पर बदल दिया, जब भी मान बदल दिए गए थे।
  5. इनपुट-फ़ील्ड सही तरीके से अपडेट नहीं है, यदि आप किसी दिनांक के लिए गलत स्वरूपित इनपुट-स्ट्रिंग में टाइप करते हैं, और फिर datepicker पर 'बंद करें' पर क्लिक करें।
  6. मेरे पास सामान्य डेटपेकर नहीं हो सकते, जो दिन दिखाते हैं, महीनेपिकर्स के समान पृष्ठ पर, जो दिन नहीं दिखाते हैं।

मैंने अंत में इन सभी समस्याओं को ठीक करने का एक तरीका पाया है । पहले चार को सावधानी से तय किया जा सकता है कि आप अपने आंतरिक कोड में अपने डेट-और महीना-पिकरों का संदर्भ कैसे देते हैं, और निश्चित तौर पर अपने पिकर के कुछ मैन्युअल अपडेट करते हैं। यह आपको नीचे के नज़दीक के तत्काल-उदाहरणों में देख सकते हैं पांचवें समस्या को कुछ कस्टम कोड को तारीखपिकर कार्यों में जोड़कर मदद मिल सकती है।

नोट: आपको अपने सामान्य datepicker में पहले तीन समस्याओं को ठीक करने के लिए निम्नलिखित महीना पिक्चर स्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। बस इस पोस्ट के निचले भाग के निकट तिथि पिक्चर तत्काल-स्क्रिप्ट का उपयोग करें।

अब, महीना-पिकर्स का उपयोग करने और आखिरी समस्या में सुधार करने के लिए, हमें दिनांक पिक्चर और महीना-पिक्टर को अलग करना होगा हम कुछ jQuery-UI के महीन पिक्चर एडॉन्स में से एक प्राप्त कर सकते हैं, लेकिन कुछ कमी स्थानीयकरण लचीलापन / क्षमता, कुछ कमी एनीमेशन समर्थन … तो, क्या करना है? अपने "स्वयं के" दिनांक पिक्चर-कोड से रोल करें! दिन के प्रदर्शन के बिना, यह आपको पूरी तरह से कामकाजी महीना मिला है, जो कि डेडेपिकर की सभी कार्यात्मकताओं के साथ मिलती है।

मैंने jQuery- यूआई v1.11.1 कोड के साथ नीचे वर्णित विधि का उपयोग करते हुए एक महीना-पिक्चर जेएस-स्क्रिप्ट और साथ सीएसएस-स्क्रिप्ट की आपूर्ति की है। बस इन कोड स्निपेट को दो नई फ़ाइलें, महीना पिक्चर.जेएस और महीना पिक्चर सीएसएस में क्रमशः कॉपी करें।


यहां की प्रक्रिया है जो मैं चला गया, मूल तिथि पिक्चर को क्लोन करने के लिए और इसे एक महीना पिक्चर बना दिया

यदि आप मुझे ये कैसे बनाते हैं, इस अनुभाग की ओर स्क्रॉल करें, और लाइन पर "अब पेज पर तिथि पिक्चर और महीना-पिक्चर जोड़ने के लिए ध्यान रखें"

मैंने jquery-ui-1.11.1.js से अपने datepicker से संबंधित सभी जावास्क्रिप्ट कोड लिया है, इसे एक नई जेएस-फाइल में चिपकाया है, और निम्नलिखित स्ट्रिंगों को बदल दिया है:

  • "डेटपेकर" ==> "महीना पिक्चर"
  • "डेडिक्कर" ==> "महीना पिक्चर"
  • "तिथि पिकर" ==> "महीने पिकर"
  • "तिथि पिकर" ==> "महीना पिकर"

तब मैंने उस लूप के हिस्से को हटा दिया जो पूरे यू-डेड पिक्चर-कैलेंडर डिवा (एक अन्य समाधान सीएसएस का उपयोग कर छिपाना) बनाता है। इसे HTML से उत्पन्न HTML समारोह में देखा जा सकता है: फ़ंक्शन (inst)

उस पंक्ति का पता लगाएं जो कहते हैं:

 "</div><table class='ui-datepicker-calendar'><thead>" + 

सबकुछ को आखिरी प्रविष्टि टैग के बाद और उस रेखा के नीचे (और इसमें शामिल नहीं ) को चिह्नित करें जहां यह कहते हैं:

 drawMonth++; 

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

 "; 

कोड को एक साथ अच्छी तरह से सीधा होना चाहिए। यहां एक कोड-स्निपेट दिखाया गया है कि आपको इसके साथ क्या करना चाहिए:

 ...other code... calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" + (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") + (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") + this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate, row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers "</div>"; drawMonth++; if (drawMonth > 11) { drawMonth = 0; drawYear++; } ...other code... 

तो मैं jquery-ui.css से कोड की प्रतिलिपि / तारीख चिपकाने से एक नई सीएसएस-फाइल में कॉपी और चिपकाया, और निम्नलिखित स्ट्रिंगों को बदल दिया:

  • "डेटपेकर" ==> "महीना पिक्चर"

अब पेज पर डेटर्सपॉकर्स और महीना-पिक्चर जोड़ने के लिए!

ये निम्नलिखित जावास्क्रिप्ट कोड-स्निपेट उपरोक्त समस्याओं के बिना पेज पर कई डेटपेकर और / या महीना पिकर के साथ काम करते हैं ! आमतौर पर '$ (यह)' का उपयोग करके फिक्स्ड हो गया है। बहुत 🙂

पहली स्क्रिप्ट एक सामान्य तारीख पिक्चर के लिए है, और दूसरा वाला "नया" महीना पिक्चर के लिए है

बाद में टिप्पणी की गई। इसके बाद , जो आपको इनपुट फ़ील्ड को रिक्त करने के लिए कुछ तत्व बनाने की सुविधा देता है, पॉल रिचर्ड्स के उत्तर से चोरी हो गई है।

मैं अपने महीना पिक्चर में "एम एम yy" प्रारूप का उपयोग कर रहा हूं, और मेरे datepicker में 'yy-mm-dd' प्रारूप का उपयोग कर रहा हूं, लेकिन यह सभी प्रारूपों के साथ पूरी तरह से संगत है , इसलिए आप जो भी चाहते हैं उसका उपयोग करने के लिए स्वतंत्र हैं। बस 'डेटफ़ॉर्मेट' विकल्प को बदलें। मानक विकल्प 'शोबूटोनपैनेल', 'शोएनिम', और 'साल के रेंज' कोर्स वैकल्पिक रूप से और आपकी इच्छाओं के लिए अनुकूलन योग्य हैं।


एक तिथि पिक्चर जोड़ना

तिथिपिकर तत्काल। यह एक 90 साल पहले और वर्तमान दिन से चला गया। यह आपको इनपुट-फ़ील्ड सही रखने में मदद करता है, खासकर यदि आप डिफ़ॉल्ट डेट, मिनडेट और अधिकतमडेट विकल्प सेट करते हैं, लेकिन यदि आप नहीं करते हैं, तो इसे संभाल सकते हैं। यह आपके द्वारा चुने गए किसी भी डेट फॉर्मेट के साथ काम करेगा।

  $('#MyDateTextBox').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, showButtonPanel: true, showMonthAfterYear: true, showWeek: true, showAnim: "drop", constrainInput: true, yearRange: "-90:", minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()), maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), onClose: function (dateText, inst) { // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI. // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field, // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place. try { // If datepicker can parse the date using our formatstring, the instance will automatically parse // and apply it for us (after the onClose is done). // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch. // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null! var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val()); // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to // reset to the last set default date. // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;' if (typedDate == null)throw "No date selected"; // We do a manual check to see if the date is within minDate and maxDate, if they are defined. // If all goes well, the default date is set to the new date, and datepicker will apply the date for us. var minDate = $(this).datepicker("option", "minDate"); var maxDate = $(this).datepicker("option", "maxDate"); if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!"; if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!"; // We update the default date, because the date seems valid. // We do not need to manually update the input-field, as datepicker has already done this automatically. $(this).datepicker('option', 'defaultDate', typedDate); } catch (err) { console.log("onClose: " + err); // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose // a new valid date, by clicking on a day. // Instead, we set the current date, as well as the value of the input-field, to the last selected (and // accepted/validated) date from the datepicker, by getting its default date. This only works, because // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow' // and 'onClose'. var date = $(this).datepicker('option', 'defaultDate'); $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date)); $(this).datepicker('setDate', date); } }, beforeShow: function (input, inst) { // beforeShow is particularly irritating when initializing the input-field with a date-string. // The date-string will be parsed, and used to set the currently selected date in the datepicker. // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not // automatically updated, only the internal selected date, until you choose a new date (or, because // of our onClose function, whenever you click close or click outside the datepicker). // We want the input-field to always show the date that is currently chosen in our datepicker, // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are // the primary ones: invalid date-format; date is too early; date is too late. try { // If datepicker can parse the date using our formatstring, the instance will automatically parse // and apply it for us (after the onClose is done). // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch. // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null! var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val()); // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to // reset to the last set default date. // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;' if (typedDate == null)throw "No date selected"; // We do a manual check to see if the date is within minDate and maxDate, if they are defined. // If all goes well, the default date is set to the new date, and datepicker will apply the date for us. var minDate = $(this).datepicker("option", "minDate"); var maxDate = $(this).datepicker("option", "maxDate"); if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!"; if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!"; // We update the input-field, and the default date, because the date seems valid. // We also manually update the input-field, as datepicker does not automatically do this when opened. $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate)); $(this).datepicker('option', 'defaultDate', typedDate); } catch (err) { // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose // a new valid date, by clicking on a day. // We want the same behavior when opening the datepicker, so we set the current date, as well as the value // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting // its default date. This only works, because we manually change the default date of the datepicker whenever // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options. var date = $(this).datepicker('option', 'defaultDate'); $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date)); $(this).datepicker('setDate', date); } } }) //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it // $("<a href='javascript: void(0);'>clear</a>").click(function() { // $(this).prev().val(''); // }) //) ; 

Adding a monthpicker

Include the monthpicker.js file and the monthpicker.css file in the page you want to use the monthpickers.

Monthpicker instantiation The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month, and ranges from 100 years ago and 10 years into the future.

  $('#MyMonthTextBox').monthpicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showMonthAfterYear: true, showAnim: "drop", constrainInput: true, yearRange: "-100Y:+10Y", minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1), maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1), defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1), // Monthpicker functions onClose: function (dateText, inst) { var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).monthpicker('option', 'defaultDate', date); $(this).monthpicker('setDate', date); }, beforeShow: function (input, inst) { if ($(this).monthpicker("getDate") !== null) { // Making sure that the date set is the first of the month. if($(this).monthpicker("getDate").getDate() !== 1){ var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).monthpicker('option', 'defaultDate', date); $(this).monthpicker('setDate', date); } } else { // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month! $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate')); } }, // Special monthpicker function! onChangeMonthYear: function (year, month, inst) { $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1))); } }) //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it // $("<a href='javascript: void(0);'>clear</a>").click(function() { // $(this).prev().val(''); // }) //) ; 

बस! That's all you need to make a monthpicker.

I can't seem to make a jsfiddle work with this, but it is working for me in my ASP.NET MVC project. Just do what you normally do to add a datepicker to your page, and incorporate the above scripts, possibly by changing the selector (meaning $("#MyMonthTextBox")) to something that works for you.

मुझे उम्मीद है इससे किसी को सहायता मिलेगी।

Links to pastebins for some extra date- and monthpicker setups:

  1. Monthpicker working on the last day of the month . The date you get from this monthpicker will always be the last day of the month.

  2. Two collaborating monthpickers ; 'start' is working on the first of the month, and 'end' is working on the last of the month. They are both restricted by each other, so choosing a month on 'end' which is before the selected month on 'start', will change 'start' to be the same month as 'end'. और इसके विपरीत। OPTIONAL: When selecting a month on 'start', the 'minDate' is set on 'end'. To remove this feature, comment out one line in onClose (read the comments).

  3. Two collaborating datepickers ; They are both restricted by each other, so choosing a date on 'end' which is before the selected date on 'start', will change 'start' to be the same month as 'end'. और इसके विपरीत। OPTIONAL: When selecting a date on 'start', the 'minDate' is set on 'end'. To remove this feature, comment out one line in onClose (read the comments).

I liked the @user1857829 answer and his "extend-jquery-like-a-plugin approach". I just made a litte modification so that when you change month or year in any way the picker actually writes the date in the field. I found that I'd like that behaviour after using it a bit.

 jQuery.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", onChangeMonthYear: writeSelectedDate }, options); function writeSelectedDate(year, month, inst ){ var thisFormat = jQuery(this).datepicker("option", "dateFormat"); var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1)); inst.input.val(d); } function hideDaysFromCalendar() { var thisCalendar = $(this); jQuery('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. jQuery('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); thisCalendar.datepicker("hide"); }); } jQuery(this).datepicker(options).focus(hideDaysFromCalendar); } 

Add one more simple solution

  $(function() { $('.monthYearPicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'M yy' }).focus(function() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); $('.ui-datepicker-close').click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); }); }); 

http://jsfiddle.net/tmnasim/JLydp/
Features :

  • display only month/year
  • Adds the month year value to input box only on clicking of Done button
  • No "reopen" behavior when click "Done"
    ————————————
    another solution that work well for datepicker and monthpicker in the same page:(also avoid the bug of mutiple click on previous button in IE, that may occur if we use focus function)
    JS fiddle link

I've had certain difficulties with the accepted answer and no other one could be used with a minimum effort as a base. So, I decided to tweak the latest version of the accepted answer until it satisfies at least minimum JS coding/reusability standards.

Here is a way much cleaner solution than the 3rd (latest) edition of the Ben Koehler 's accepted answer. Moreover, it will:

  • work not only with the mm/yy format, but with any other including the OP's MM yy .
  • not hide the calendar of other datepickers on the page.
  • not implicitly pollute the global JS object with the datestr , month , year etc variables.

Check it out:

 $('.date-picker').datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function (dateText, inst) { var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover'); if (!isDonePressed) return; var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(), year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val(); $(this).datepicker('setDate', new Date(year, month, 1)).change(); $('.date-picker').focusout(); }, beforeShow: function (input, inst) { var $this = $(this), // For the simplicity we suppose the dateFormat will be always without the day part, so we // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'), date; try { date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val()); } catch (ex) { return; } $this.datepicker('option', 'defaultDate', date); $this.datepicker('setDate', date); inst.dpDiv.addClass('datepicker-month-year'); } }); 

And everything else you need is the following CSS somewhere around:

 .datepicker-month-year .ui-datepicker-calendar { display: none; } 

बस। Hope the above will save some time for further readers.

I know it's a little late response, but I got the same problem a couple of days before and I have came with a nice & smooth solution. First I found this great date picker here

Then I've just updated the CSS class (jquery.calendarPicker.css) that comes with the example like this:

 .calMonth { /*border-bottom: 1px dashed #666; padding-bottom: 5px; margin-bottom: 5px;*/ } .calDay { display:none; } 

The plugin fires an event DateChanged when you change anything, so it doesn't matter that you are not clicking on a day (and it fits nice as a year and month picker)

आशा करता हूँ की ये काम करेगा!

I also needed a month picker. I made a simple one with year on header and 3 rows of 4 months below. Check it out: Simple monthyear picker with jQuery .

I tried the various solutions provided here and they worked fine if you simply wanted a couple of drop downs.

The best (in appearance etc) 'picker' ( https://github.com/thebrowser/jquery.ui.monthpicker ) suggested here is basically a copy of an old version of jquery-ui datepicker with the _generateHTML rewritten. However, I found it no longer plays nicely with current jquery-ui (1.10.2) and had other issues (doesn't close on esc, doesn't close on other widget opening, has hardcoded styles).

Rather than attempt to fix that monthpicker and rather than reattempt the same process with the latest datepicker, I went with hooking into the relevant parts of the existing date picker.

This involves overriding:

  • _generateHTML (to build the month picker markup)
  • parseDate (as it doesn't like it when there's no day component),
  • _selectDay (as datepicker uses .html() to get the day value)

As this question is a bit old and already well answered, here's only the _selectDay override to show how this was done:

 jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate; jQuery.datepicker.parseDate = function (format, value, settings) { if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings); // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings); }; 

As stated, this is an old question, but I found it useful so wanted to add feedback with an alterantive solution.

for a monthpicker, using JQuery v 1.7.2, I have the following javascript which is doing just that

$l("[id$=txtDtPicker]"). monthpicker ({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});

Everyone here is getting value of month , year like this,

 var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var month = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 

But just now I'm facing issue while fetching values from > and < . Because It give us value of selected value in dropdown so it provides us old value not new values.

So, As per the document of Jquery UI :- http://api.jqueryui.com/datepicker/ . We can directly fetch year , month from function. For other values like day etc. we can easily access them through inst object of jqueryUI function. We can access inst like below,

  var day = inst.selectedDay; 

So, Using onChangeMonthYear we can get current month , year and day values directly from function so no need to work out for selected value.

HTML :-

 <input type='text' class='monthpicker'> 

Script :-

 $( function() { $(".monthPicker").datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, beforeShow: true, onChangeMonthYear: function(year , month , inst) { setTimeout(function() { $('.ui-datepicker-calendar').hide(); }); var day = inst.selectedDay; month = month; year = year; var current_date = year + "-" + month + "-" + day ; } }); $(".monthPicker").focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); }); 

Note :- It can be useful when we want inline monthpicker. Just replace input field to division and we can use it inline while using inline make sure you are using onChangeMonthYear ,

For Inline MonthPicker :-

 <div class="monthpicker"> </div> 

Use onSelect call back and remove the year portion manually and set the text in the field manually