jQuery UI DatePicker, aby pokazać tylko miesiąc rok

374

Używam selektora daty jQuery do wyświetlania kalendarza w całej mojej aplikacji. Chcę wiedzieć, czy mogę go użyć do wyświetlenia miesiąca i roku (maj 2010), a nie kalendarza?

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
źródło

16

Więc chcesz selektor miesiąca?

dotty

Czy używasz jQueryUI DatePicker?

wpjmurray

Tak. jQueryUI DatePicker

Aanu

6

to nie jest odpowiedź na twoje pytanie, ale mamy to teraz, wygląda o wiele lepiej: eternicode.github.io/bootstrap-datepicker/…

Ruben

wybranie bootstrap-date wydaje się być wycofanym repozytorium, z problemami narastającymi bez zauważalnej pracy nad ich

naprawą

424

Oto hack (zaktualizowany o cały plik .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>

EDYCJA jsfiddle dla powyższego przykładu: http://jsfiddle.net/DBpJe/7755/

EDYCJA 2 Dodaje wartość roku miesiąca do pola wprowadzania tylko po kliknięciu przycisku Gotowe. Pozwala również usunąć wartości pól wejściowych, co nie jest możliwe w powyższym polu http://jsfiddle.net/DBpJe/5103/

EDYCJA 3 zaktualizowana Lepsze rozwiązanie w oparciu o rozwiązanie rexwolf w dół.
http://jsfiddle.net/DBpJe/5106

Ben Koehler
źródło

14

Wywołanie „setDate” spowoduje ponowne otwarcie selektora w niektórych przeglądarkach. Aby temu zapobiec, wyłączył i włączył selektor: $ (this) .datepicker ('disable'); $ (this) .datepicker ('setDate', nowa data (rok1, miesiąc1, 1)); $ (this) .datepicker ('enable');

Sven Sönnichsen

1

@Nawet tutaj jest alternatywa:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

Próbuję użyć tego rozwiązania, ale użycie getDate w datepicker zwraca tylko dzisiaj. Co tam?

supertopi,

1

Widzę, że większość przykładów używa stylów wbudowanych na samej stronie. Byłby to problem, jeśli w jakiś sposób potrzebujesz więcej niż jednego kalendarza (na przykład każdego z innymi ustawieniami) na tej samej stronie. Wolę dodawać style do pliku .css jako takie:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

A następnie użyć Javascript do manipulowania zachowaniem:$("#ui-datepicker-div").addClass('noCalendar');

poweratom 31.01.12

1

Na powyższym przykładzie Jeśli chcę wyczyścić pole tekstowe, nie mogę. Czy ktoś może mi pomóc.

Bik

83

Ten kod działa dla mnie bezbłędnie:

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

Dane wyjściowe to:

Leniel Maccaferri
źródło

Jak ustawić wartość tego kalendarza.

Rafik malek

62

@Ben Koehler , to prefekt! Wprowadziłem niewielką modyfikację, dzięki czemu użycie jednego wystąpienia selektora dat więcej niż raz działa zgodnie z oczekiwaniami. Bez tej modyfikacji data jest przetwarzana niepoprawnie, a poprzednio wybrana data nie jest podświetlona.

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

BrianS
źródło

Ta odpowiedź jest w większości poprawna. Musiałem jednak zmienić MM na M, aby uzyskać właściwy miesiąc do wybrania, gdy data jest już wybrana.

Chazaq

18

Powyższe odpowiedzi są całkiem dobre. Moją jedyną skargą jest to, że nie można wyczyścić wartości po jej ustawieniu. Wolę też podejście typu rozszerzenie-jquery-jak-plugin.

Działa to dla mnie idealnie:

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

Następnie wywołaj tak:

$('input.monthYearPicker').monthYearPicker();

użytkownik1857829
źródło

2

w końcu przegłosowałem to, ponieważ jest to niewykonalne, ponieważ zdarzenia onSelect i / lub onChangeMonthYear i / lub onClose albo nie uruchamiają się, albo nie otrzymują poprawnych wartości, lub, jeśli zostaną zastąpione, powodują, że widget przestaje działać

knocte

10

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

To rozwiąże problem =) Ale chciałem mieć format czasu rrrr-mm

Próbowałem tylko w FF4

Erik Polder
źródło

„yy” w JQuery to czterocyfrowy rok. Jeśli tego właśnie chcesz, właśnie to osiągnąłeś.

Paweł Dyda

9

Miałem tę samą potrzebę dzisiaj i znalazłem to na github, współpracuję z jQueryUI i mam wybór miesiąca zamiast dni w kalendarzu

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

Anthony Shaw
źródło

5

Nie jest utrzymywany, ale jest widelec: github.com/zorab47/jquery.ui.monthpicker

denis.peplin

8

Oto, co wymyśliłem. Ukrywa kalendarz bez potrzeby stosowania dodatkowego bloku stylu i dodaje wyraźny przycisk, aby poradzić sobie z problemem braku możliwości wyczyszczenia wartości po kliknięciu wejścia. Działa również ładnie z wieloma użytkownikami miesięcznymi na tej samej stronie.

HTML:

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

JavaScript:

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

Paul Richards
źródło

5

Potrzebowałem selektora miesiąca / roku dla dwóch pól (od & do), a kiedy jedno zostało wybrane, maksymalne / minimalne były ustawione na drugim ... daty biletów lotniczych. Miałem problemy z ustawieniem maksymalnej i minimalnej ... daty drugiego pola zostałyby usunięte. Dzięki kilku z powyższych postów ... w końcu to rozgryzłem. Musisz ustawić opcje i daty w bardzo określonej kolejności.

Zobacz to skrzypce, aby uzyskać pełne rozwiązanie: Wybór miesiąca / roku @ JSFiddle

Kod:

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

        }
    });

Dodaj to również do bloku stylu, jak wspomniano powyżej:

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

Amy Struck
źródło

5

Połączyłem wiele powyższych dobrych odpowiedzi i doszedłem do tego:

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

Okazało się, że działa, ale napotyka wiele błędów, więc byłem zmuszony do łatania w kilku miejscach datepicker:

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

patch1: w _showDatepicker: wygładza ukrywanie;

patch2: w _checkOffset: aby poprawić pozycjonowanie selektora miesiąca (w przeciwnym razie, gdy pole znajduje się na dole przeglądarki, kontrola przesunięcia jest wyłączona);

patch3: w polu onClose of _hideDatepicker: w przeciwnym razie po zamknięciu pola daty będą migać przez bardzo krótki czas, co jest bardzo denerwujące.

Wiem, że moja poprawka była daleka od dobrej, ale na razie działa. Mam nadzieję, że to pomoże.

rexwolf
źródło

Po prostu dodaj ten wiersz do beforeShow: {inst.dpDiv.addClass ('month_year_datepicker')}. migające daty przestaną :). Myślę też, że .focus nie będzie wtedy potrzebny

Parag

5

Dodaj jeszcze jedno proste rozwiązanie

 $(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/
Funkcje :

wyświetlać tylko miesiąc / rok
Dodaje wartość miesiąca roku do pola wprowadzania tylko po kliknięciu przycisku Gotowe
Brak zachowania „otwórz ponownie” po kliknięciu „Gotowe”
------------------------------------
inne działające rozwiązanie dobrze dla datepicker i monthpicker na tej samej stronie: (również uniknij błędu wielokrotnego kliknięcia na poprzednim przycisku w IE, który może wystąpić, jeśli użyjemy funkcji fokusa)
JS link do skrzypiec

Chris Phan
źródło

4

Czy to tylko ja, czy to nie działa tak, jak powinno w IE (8)? Data zmienia się po kliknięciu Gotowe, ale datepicker otwiera się ponownie, aż faktycznie klikniesz gdzieś na stronie, aby stracić skupienie na polu wprowadzania ...

Chcę rozwiązać ten problem.

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

Tom Van Schoor
źródło

1

$ (this) .datepicker ('disable'); $ (this) .datepicker ('setDate', nowa data (rok, miesiąc, 1)); $ (this) .datepicker ('enable'); Rozwiązuje problem

Tom Van Schoor

1

To nie jest odpowiedź

sisharp

4

Jeśli szukasz próbnika miesiąca, wypróbuj ten jquery.mtz.monthpicker

To działało dla mnie dobrze.

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

użytkownik2630080
źródło

Link nie działa. Nie można dotrzeć do tej strony Nie można znaleźć adresu DNS serwera lucianocosta.info.

Pang

1

Oto zaktualizowany link: lucianocosta.com.br/jquery.mtz.monthpicker

Sebastian S.

Zaktualizowany link również jest uszkodzony.

nasch

4

Podobnie jak wiele innych, napotkałem wiele problemów, próbując to zrobić, i tylko kombinacja opublikowanych rozwiązań, a ostatecznie duży hack, aby uczynić to idealnym, dało mi rozwiązanie.

Problemy z innymi rozwiązaniami w tym wątku, które próbowałem:

Wybór nowej daty w selektorze dat zmienia również (wewnętrzną) datę innych wybieraczy dat, więc kiedy ponownie otworzysz inne (lub spróbujesz uzyskać ich datę), będą mieli inną datę niż ta wyświetlana w przypisanym do nich wejściu -pole.
Selektor daty nie „zapamięta” daty, gdy zostanie ponownie otwarty.
Kod do żonglowania datami podciągów, więc nie był kompatybilny ze wszystkimi formatami.
„Mój Monthpicker” zmieniał pole wejściowe tylko po jego zamknięciu, a nie za każdym razem, gdy zmieniano wartości.
Pole wejściowe nie jest poprawnie aktualizowane, jeśli wpiszesz niepoprawnie sformatowany ciąg wejściowy dla daty, a następnie klikniesz „Zamknij” na selektorze dat.
Nie mogę mieć zwykłych datepickerów, które pokazują dni, na tej samej stronie co miesiącpickery, które nie pokazują dni.

W końcu znalazłem sposób na rozwiązanie wszystkich tych problemów . Pierwsze cztery można naprawić, zachowując ostrożność w odniesieniu do sposobu wybierania datowników i osób wybierających miesiące w ich wewnętrznym kodzie, i oczywiście wykonując kilka ręcznych aktualizacji wybieraczy. Można to zobaczyć w przykładach tworzenia instancji u dołu. Piąty problem można rozwiązać, dodając niestandardowy kod do funkcji datepicker.

UWAGA: NIE musisz używać następujących skryptów Monthpicker, aby naprawić pierwsze trzy problemy w normalnym narzędziu datepicker. Po prostu użyj skryptu tworzenia wystąpień datepicker u dołu tego postu.

Teraz, aby użyć Monthpickers i naprawić ostatni problem, musimy oddzielić datepickers i Monthpickers. Moglibyśmy uzyskać jeden z niewielu dodatków jpuery-UI na miesiąc, ale niektórym brakuje elastyczności / zdolności lokalizacji, niektórym brakuje wsparcia animacji ... więc co robić? Rzuć swój „własny” z kodu datepicker! Daje to w pełni funkcjonalny moduł wyboru miesiąca, ze wszystkimi funkcjami modułu wyboru daty, bez wyświetlania dni.

Dostarczyłem skrypt js Monthpicker i towarzyszący mu skrypt CSS , używając metody opisanej poniżej, z kodem jQuery-UI v1.11.1. Po prostu skopiuj te fragmenty kodu do dwóch nowych plików, odpowiednio monthpicker.js i monthpicker.css.

Jeśli chcesz przeczytać o dość prostym procesie, za pomocą którego przekonwertowałem datepicker na monthpicker, przewiń w dół do ostatniej sekcji.

Teraz, aby dodać datepickers i monthpickers do strony!

Poniższe fragmenty kodu javascript działają z wieloma modułami wyboru daty i / lub miesiącami na stronie, bez wyżej wymienionych problemów! Naprawiono ogólnie za pomocą „$ (this)”. dużo :)

Pierwszy skrypt jest przeznaczony dla normalnego datepicker'a, a drugi dla „nowych” monthpickerów.

Skomentowane później , który pozwala utworzyć element do wyczyszczenia pola wejściowego, został skradziony z odpowiedzi Paula Richardsa.

Używam formatu „MM rr” w narzędziu Monthpicker i formatu „rr-mm-dd” w narzędziu datepicker, ale jest on w pełni kompatybilny ze wszystkimi formatami , więc możesz swobodnie używać dowolnego z nich. Po prostu zmień opcję „dateFormat”. Standardowe opcje „showButtonPanel”, „showAnim” i „yearRange” są oczywiście opcjonalne i można je dostosować do własnych życzeń.

Dodawanie datownika

Tworzenie wystąpienia Datepicker. Ten trwa od 90 lat do dziś. Pomaga zachować poprawność pola wejściowego, zwłaszcza jeśli ustawisz opcje defaultDate, minDate i maxDate, ale może to obsłużyć, jeśli tego nie zrobisz. Będzie działał z dowolnym wybranym formatem daty.

        $('#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('');
    //    })
    //)
    ;

Dodanie selektora miesiąca

Dołącz plik monthpicker.js i plik monthpicker.css na stronie, z której chcesz korzystać z Monthpickers.

Tworzenie instancji Monthpicker Wartość pobrana z tego selektora miesięcy jest zawsze PIERWSZYM dniem wybranego miesiąca. Rozpoczyna się w bieżącym miesiącu i waha się od 100 lat temu i 10 lat w przyszłość.

    $('#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('');
    //    })
    //)
    ;

Otóż to! To wszystko, czego potrzebujesz, aby wybrać miesięcznik.

Nie mogę sprawić, aby jsfiddle z tym działało, ale działa dla mnie w moim projekcie ASP.NET MVC. Po prostu zrób to, co zwykle robisz, aby dodać datepicker do swojej strony i dołączyć powyższe skrypty, prawdopodobnie zmieniając selektor (czyli $ („# MyMonthTextBox”)) na coś, co działa dla Ciebie.

Mam nadzieję, że to komuś pomoże.

Odnośniki do pastebins dla niektórych dodatkowych ustawień wyboru daty i miesiąca:

Monthpicker działa na ostatni dzień miesiąca . Datą otrzymaną z tego selektora miesiąca będzie zawsze ostatni dzień miesiąca.
Dwóch współpracujących członków miesiąca ; „początek” działa pierwszego dnia miesiąca, a „koniec” działa ostatniego miesiąca. Oba są wzajemnie ograniczone, więc wybranie miesiąca „końca”, który jest przed wybranym miesiącem „początku”, zmieni „początek” na ten sam miesiąc co „koniec”. I wzajemnie. OPCJONALNIE: Wybierając miesiąc przy „początku”, „minDate” przy „końcu” jest ustawiany na ten miesiąc. Aby usunąć tę funkcję, skomentuj jeden wiersz w onClose (przeczytaj komentarze).
Dwóch współpracujących datepickerów ; Oba są wzajemnie ograniczone, więc wybranie daty „końca”, która jest wcześniejsza niż wybrana data „początku”, zmieni „początek” na ten sam miesiąc, co „koniec”. I wzajemnie. OPCJONALNIE: Wybierając datę przy „początku”, „minDate” przy „końcu” jest ustawiane na tę datę. Aby usunąć tę funkcję, skomentuj jeden wiersz w onClose (przeczytaj komentarze).

Jak zmieniłem DatePicker na MonthPicker

Wziąłem cały kod javascript z jquery-ui-1.11.1.js odnoszący się do ich datepicker, wkleiłem go do nowego pliku js i zastąpiłem następujące ciągi:

„datepicker” ==> „monthpicker”
„Datepicker” ==> „Monthpicker”
„wybór daty” ==> „wybór miesiąca”
„Wybór daty” ==> „Wybór miesiąca”

Następnie usunąłem część pętli for, która tworzy cały div div ui-datepicker-calendar (div, który inne rozwiązania ukrywają za pomocą CSS). Można to znaleźć w _generateHTML: function (inst).

Znajdź linię, która mówi:

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

Oznacz wszystko od zamykającego tagu div, aż do (i nie wliczając) linii, w której jest napisane:

drawMonth++;

Teraz będzie nieszczęśliwy, ponieważ musimy zamknąć niektóre rzeczy. Po tym zamykającym tagu div z poprzedniej strony dodaj:

";

Kod powinien być teraz ładnie połączony. Oto fragment kodu pokazujący, z czym powinieneś skończyć:

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

Następnie skopiowałem / wkleiłem kod z jquery-ui.css dotyczący datepickers do nowego pliku CSS i zastąpiłem następujące ciągi:

„datepicker” ==> „monthpicker”

Ultroman the Tacoman
źródło

3

po przekopaniu witryny jQueryUI.com do datepicker, oto mój wniosek i odpowiedź na twoje pytanie.

Po pierwsze, odpowiedziałbym „ nie” na twoje pytanie. Nie można używać narzędzia wyboru jQueryUI do wybierania tylko miesiąca i roku. To nie jest obsługiwane. Nie ma w tym celu żadnej funkcji zwrotnej.

Ale możesz zhakować go, aby wyświetlał tylko miesiąc i rok, używając css do ukrywania dni itp. I myślę, że to nie będzie miało sensu, ponieważ musisz kliknąć daty, aby wybrać datę.

Mogę powiedzieć, że po prostu musisz użyć innego datownika. Jak sugerował Roger.

Reigel
źródło

3

Miałem problem z wybieraniem dat zmieszanym z wybieraczem miesiąca. Tak rozwiązałem.

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

        }
    });

PYT
źródło

3

Jeśli ktoś tego chce również w przypadku wielu kalendarzy, nie jest bardzo trudno dodać tę funkcjonalność do interfejsu użytkownika jquery. z minimalnym wyszukiwaniem:

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

dodaj to przed x

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

Szukaj

<table class="ui-datepicker-calendar

i zastąp go

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

szukaj również

this._defaults={

zastąp to

this._defaults={justMonth:false,

dla css powinieneś użyć:

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

po tym wszystko jest zrobione, po prostu przejdź do żądanych funkcji inicjujących datepicker i podaj ustawienie 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 jest tutaj kluczem :)

prdatur
źródło

2

Waht o: http://www.mattkruse.com/javascript/calendarpopup/

Wybierz przykład wyboru miesiąca

zrozumiałem
źródło

Ponieważ już używam jpery datepicker, wolę go używać lub ręcznie konstruować miesiąc i rok.

Aanu

2

Wprowadziłem kilka udoskonaleń niemal doskonałej odpowiedzi BrianS powyżej:

Ponownie sformatowałem wartość ustawioną na show, ponieważ myślę, że w rzeczywistości sprawia, że jest ona nieco bardziej czytelna w tym przypadku (chociaż uwaga: używam nieco innego formatu)
Mój klient nie chciał kalendarza, więc dodałem dodatek pokaz / ukryj zajęcia, aby to zrobić bez wpływu na innych wybieraczy dat. Usunięcie klasy odbywa się na podstawie timera, aby uniknąć ponownego migania tabeli w miarę zanikania datownika, co wydaje się być bardzo zauważalne w IE.

EDYCJA: Pozostał jeden problem do rozwiązania w tym przypadku, że nie ma sposobu na opróżnienie dateppera - wyczyść pole i kliknij, a następnie wypełni się ponownie z wybraną datą.

EDYCJA 2: Nie udało mi się rozwiązać tego ładnie (tj. Bez dodania osobnego przycisku Wyczyść obok danych wejściowych), więc po prostu użyłem tego: https://github.com/thebrowser/jquery.ui.monthpicker - jeśli ktokolwiek może zdobądź standardowy interfejs użytkownika, aby zrobić to, co byłoby niesamowite.

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

Potrzebujesz również tej reguły stylu:

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

Whelkaholism
źródło

2

Podobała mi się odpowiedź @ user1857829 i jego „podejście z rozszerzaniem jquery-jak-wtyczka”. Właśnie dokonałem drobnej modyfikacji, aby podczas zmiany miesiąca lub roku w jakikolwiek sposób wybieracz faktycznie zapisał datę w polu. Przekonałem się, że podoba mi się to zachowanie po pewnym użyciu.

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

stravanato
źródło

2

Miałem pewne trudności z zaakceptowaną odpowiedzią i żadnej innej nie można było wykorzystać przy minimalnym wysiłku jako podstawy. Postanowiłem więc ulepszyć najnowszą wersję akceptowanej odpowiedzi, dopóki nie spełni ona co najmniej minimalnych standardów kodowania / ponownego użycia JS.

Oto sposób rozwiązanie znacznie czystsze niż 3-ci (najnowszy) wydanie z Ben Koehler Zaakceptowanych odpowiedź „s. Ponadto będzie:

działa nie tylko z tym mm/yyformatem, ale z każdym innym, w tym PO MM yy.
nie ukrywaj kalendarza innych datepickerów na stronie.
nie niejawnie zanieczyszczają globalny obiekt JS z datestr, month, yearetc zmienne.

Sprawdź to:

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

A wszystko, czego potrzebujesz, to gdzieś w pobliżu następujący CSS:

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

Otóż to. Mam nadzieję, że powyższe pozwoli zaoszczędzić trochę czasu dla kolejnych czytelników.

Aleksander Abakumow
źródło

1

Just and FYI. Wiersz „inst.dpDiv.addClass („ datepicker-miesiąc-rok ”);” doda cały miesiąc-rok do div kalendarza datepicker, co oznacza, że jeśli istnieją inne pola daty z datepicker, przestaną działać z tego powodu. Ponieważ w kalendarzu jest tylko jeden div, interesujące byłoby dodanie „$ („. Datepicker-miesiąc-rok ”). RemoveClass („ datepicker-miesiąc-rok ”);” korzystanie z funkcji beforeShow na innych datownikach, które wymagają tradycyjnego kalendarza. LUB usuń klasę, gdy stracisz koncentrację. Ale nie mogłem znaleźć nic związanego z tym w interfejsie

Johnny Bigoode

1

To jest pełna odpowiedź, z której każdy powinien korzystać. Największym problemem, jaki udało mi się rozwiązać, było wyskakujące okienko z datą zawsze domyślnie ustawione na bieżący miesiąc i rok, niezależnie od tego, co już w nim jest. Ta odpowiedź to naprawiła.

Alex F

1

Wiem, że to trochę spóźniona reakcja, ale dostałem ten sam problem kilka dni wcześniej i znalazłem fajne i płynne rozwiązanie. Najpierw znalazłem ten świetny wybór daty tutaj

Następnie właśnie zaktualizowałem klasę CSS (jquery.calendarPicker.css), która pochodzi z następującego przykładu:

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

.calDay 
{
    display:none;
}

Wtyczka uruchamia zdarzenie DateChanged po zmianie czegokolwiek, więc nie ma znaczenia, że nie klikniesz dnia (i pasuje ładnie jako selektor roku i miesiąca)

Mam nadzieję, że to pomoże!

pjnovas
źródło

1

Potrzebowałem też selektora miesiąca. Zrobiłem prosty z rocznikiem na nagłówku i 3 rzędami po 4 miesiące poniżej. Sprawdź to: Prosty próbnik miesięczny z jQuery .

Tiago Coelho
źródło

1

Wypróbowałem różne rozwiązania tutaj dostarczone i działały dobrze, jeśli po prostu chciałeś kilka rozwijanych pozycji.

Najlepszy (z wyglądu itp.) „Próbnik” ( https://github.com/thebrowser/jquery.ui.monthpicker ) sugerowany tutaj jest w zasadzie kopią starej wersji jquery-ui datepicker z przepisem _generateHTML. Odkryłem jednak, że nie działa już ładnie z bieżącym jquery-ui (1.10.2) i miałem inne problemy (nie zamyka się przy esc, nie zamyka się przy otwieraniu innych widżetów, ma zakodowane style).

Zamiast próbować naprawić ten wybieracz miesięcy i zamiast ponowić próbę wykonania tego samego procesu za pomocą najnowszego wybieracza daty, postanowiłem podpiąć się do odpowiednich części istniejącego wybieracza daty.

Obejmuje to zastąpienie:

_generateHTML (aby zbudować znacznik wyboru miesiąca)
parseDate (bo to się nie podoba, gdy nie ma komponentu dnia),
_selectDay (ponieważ datepicker używa .html (), aby uzyskać wartość dnia)

Ponieważ to pytanie jest nieco stare i dobrze już udzielono odpowiedzi, oto tylko przesłonięcie _selectDay, aby pokazać, jak to zrobiono:

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

Jak już wspomniano, jest to stare pytanie, ale uznałem je za przydatne, dlatego chciałem dodać opinię o alternatywnym rozwiązaniu.

freedomn-m
źródło

0

dla Monthpicker, używając JQuery w wersji 1.7.2, mam następujący skrypt javascript, który właśnie to robi

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

Ricardo Appleton
źródło

0

Dzięki za rozwiązanie Bena Koehlera.

Miałem jednak problem z wieloma instancjami datepickerów, niektóre z nich były potrzebne przy wyborze dnia. Rozwiązanie Bena Koehlera (w edycji 3) działa, ale ukrywa wybór dnia we wszystkich przypadkach. Oto aktualizacja rozwiązująca ten problem:

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    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));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});

dj3c1t
źródło

-2

Użyj onSelectoddzwonienia i ręcznie usuń część roku i ręcznie ustaw tekst w polu

Teja Kantamneni
źródło

3

Myślę, że nie czytasz pytania. Aanu chce „wyświetlić miesiąc i rok (maj 2010), a nie kalendarz”.

Reigel,