W wyszukiwaniu JavaScript Month Picker

Jestem w poszukiwaniu narzędzia do wyboru miesiąca JavaScript. Korzystam już z jQuery na stronie internetowej, więc gdyby to była wtyczka jQuery, pasowałoby to ładnie. Jestem też otwarty na inne opcje.W wyszukiwaniu JavaScript Month Picker

Zasadniczo jestem po uproszczonej wersji jQuery UI Date Picker. Nie obchodzi mnie dzień miesiąca, tylko miesiąc i rok. Używanie kontrolki Date Picker wydaje się być przesadą i kundlem. Wiem, że mógłbym użyć pary wybranych pól, ale czuję się zagracony, a potem potrzebuję przycisku potwierdzenia.

Mam wizualizację siatki dwóch wierszy z sześcioma kolumnami lub trzech wierszy z czterema kolumnami, dla wyboru miesiąca oraz bieżących i przyszłych lat u góry. (Może zdolność do wypisania listy na kilka lat? Nie widzę nikogo, kto kiedykolwiek musiałby iść dłużej niż rok lub dwa z wyprzedzeniem, więc gdybym mógł wymienić obecne i następne dwa lata, to byłoby puchnąć.)

To naprawdę po prostu wersja zepsutego DatePicker. Czy coś takiego istnieje?

Źródło

2008-10-12 Adam Tuttle

Co zrobiłeś w międzyczasie? Również teraz szukam dokładnie tego samego. – markus

Musiałem wstrzymać cały projekt, więc na razie problem został przeniesiony na tylny palnik. –

guz. Mam ten sam problem. – jchapa

Każdemu jeszcze doczekać do tego (jak ja), tutaj jest piękny, łatwy użyciu jQuery UI kompatybilne, dobrze udokumentowane, sprawdzone alternatywa:

Month picker example

domyślnej użycie jest proste, jak w następujący sposób:

$("input[type='month']").MonthPicker();

Źródło

2013-10-15 19:04:12 gustavohenke

Użyłem this script w programie jakiś czas temu. Choć jest starożytny, działa dobrze na wszystkich przeglądarkach. Jeśli spoglądasz w dół na "Kalendarz wyboru miesiąca", uważam, że właśnie tego szukasz. Przykład, który jest tam, ma otwarcie kalendarza w nowym oknie (ew), ale 1 ustawienie (jak w drugim przykładzie) powoduje, że pokazuje on jQuery. Powodzenia.

Źródło

2008-10-12 21:03:26

Właśnie wybrałem próbnik dat z innego dnia. Znalazłem dwa inne interesujące przykłady, które mogą pomóc w rozwiązaniu problemu, ale nie jestem pewien, w jaki sposób zamierzasz to zrobić bez wyświetlania kalendarza. Większość "zbieraczy dat" po prostu zakłada, że chcesz zobaczyć kalendarz. Możesz lepiej szukać niestandardowego menu rozwijanego, które ma kilka niestandardowych przycisków, które możesz skonfigurować.

Oto te Spojrzałem na:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

skończyło się za pomocą tego: http://jqueryui.com/demos/datepicker/

Jeśli są jakieś dobre z JQuery, mogłeś wymyślić dobry mały projekt.

Źródło

2009-05-12 21:23:05

Ben Koehler z this equivalent question oferuje jigery ui hack, który działa przyzwoicie. Zacytowany tutaj dla wygody, wszystkie są jego własnością.

JSFiddle of this solution

- Oto hack (aktualizacja z całego pliku .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) { 
      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>

Źródło

2010-07-27 21:37:48 Cory

Problem z tym włamaniem polega na tym, że nie można użyć innych zwykłych selektorów dat na stronie, ponieważ ich kalendarze również zostaną ukryte. – Brook

Cierpi jednak na inną, dość ważną kwestię (Chrome 32, ale podejrzewam wszędzie). Po wybraniu daty, a następnie ponownym otwarciu selektora, zawsze idzie ona do dzisiejszej daty. Dzięki temu nawet zakładka w tym polu zmieni dowolną datę, którą wprowadziłeś do dzisiejszej daty. W tym samym kierunku nie ma możliwości anulowania datepaksu - jeśli otworzysz go przypadkiem, musisz wybrać nową datę. Spędziłem trochę czasu próbując obejść problem, ale jak dotąd nie ma kości. – Julian

itsaruns, Próbowałem wszystkiego, co mogłem znaleźć, aby dodać identyfikator do datepickerów, więc mogłem dodać CSS do indywidualnych datepickerów, a nie do wszystkich z nich, ale nic nie działa. Jeśli Ty (lub ktoś inny) wie, jak to zrobić, możesz to opublikować tutaj? –

Znaleziono jeden na lucianocosta.info.Dobrze wygląda całkiem:

Month Picker in action

UPDATED 2016-02-13: Link który działa

Źródło

2012-11-12 05:06:52

tylko to, że pomaga komuś w przyszłości, musisz conajmniej jquery 1.4.3, aby to działało poprawnie. Mam wartość 'undefined' dla miesiąca podczas używania jquery 1.4.2 – redDevil

czyste, proste i nie działa w ogóle w Chrome. – SteveCav

W Chrome 27 i to działa dla mnie –

Zapraszam do obejrzenia na moim jQuery plugin:

łatwy w użyciu:

$("#myTextInput").Monthpicker();

Nie ma jeszcze wielu opcji, ale można ograniczyć wejście do ograniczonego zakresu miesięcy.

Istnieją również zdarzenia, które dostarczają sposobu kodowania współzależności między dwoma monthpicker (start & data zakończenia)

można znaleźć na żywo demo tutaj: Codepen

Jesteś wolny, aby wziąć kodu źródłowego z Github i zmieniaj, co chcesz: Github repository

Źródło

2015-09-16 16:03:59 Apolo

W wyszukiwaniu JavaScript Month Picker

Odpowiedz

Powiązane problemy