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




jquery-ui jquery-ui-datepicker (18)

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

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

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


उपर्युक्त उत्तर बहुत अच्छे हैं। मेरी एकमात्र शिकायत यह है कि आप सेट होने के बाद मूल्य को साफ़ नहीं कर सकते हैं। इसके अलावा मैं विस्तार-jquery-like-a-plugin दृष्टिकोण पसंद करता हूं।

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

$.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();

क्या यह सिर्फ मुझे है या यह काम नहीं कर रहा है क्योंकि यह आईई (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>

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

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

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

मैं कह सकता हूं कि आपको बस एक और डेटपिकर का उपयोग करना होगा। रोजर ने क्या सुझाव दिया।


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

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


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

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

कोड:

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();
}

पैच 1: _showDatepicker में: छुपा चिकनी करने के लिए;

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

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

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


यदि आप एक महीने के पिकर की तलाश में हैं तो यह jquery.mtz.monthpicker आज़माएं

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


यह code मेरे लिए बेकार ढंग से काम कर रहा है:

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

आउटपुट है:


यहां एक हैक (संपूर्ण .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


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

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

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/
विशेषताएं :

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

Hope it helps!


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.


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 http://jsfiddle.net/DBpJe/5106 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;
}

That's it. Hope the above will save some time for further readers.


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


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']
});





jquery-ui-datepicker