Auf der Suche nach JavaScript Monat Picker

Ich bin auf der Suche nach einem JavaScript-Monat Auswahltool. Ich benutze bereits jQuery auf der Website, also wenn es ein jQuery-Plugin wäre, würde das gut passen. Ich bin auch offen für andere Optionen.Auf der Suche nach JavaScript Monat Picker

Grundsätzlich bin ich nach einer vereinfachten Version der jQuery UI Date Picker. Der Tag des Monats ist mir egal, nur der Monat und das Jahr. Die Verwendung des Date Picker-Steuerelements fühlt sich an wie Overkill und ein Kludge. Ich weiß, ich könnte nur ein paar Auswahlboxen verwenden, aber das fühlt sich überladen an, und dann brauche ich auch eine Bestätigungstaste.

Ich stelle mir ein Raster von entweder zwei Zeilen mit sechs Spalten oder drei Zeilen mit vier Spalten für die Auswahl des Monats und aktuelle und zukünftige Jahre an der Spitze vor. (Vielleicht die Fähigkeit, ein paar Jahre aufzulisten? Ich kann nicht sehen, dass irgendjemand jemals mehr als ein Jahr oder zwei voraus gehen müsste, also wenn ich die gegenwärtigen und nächsten zwei Jahre auflisten könnte, würde das schwellen.)

Es ist wirklich nur eine verdummte Version des DatePicker. Gibt es so etwas?

Quelle

2008-10-12 Adam Tuttle

Was haben Sie in der Zwischenzeit getan? Ich suche jetzt genau das Gleiche. – markus

Ich musste das gesamte Projekt in die Warteschleife legen, und jetzt ist das Problem auf Eis gelegt. –

stoßen. Ich habe das gleiche Problem. – jchapa

Für jeden noch Suche nach vorne in das funktioniert (wie ich), hier ist ein schönes, leicht zu verwenden, jQuery UI-kompatibel, gut dokumentiert, getestet Alternative:

Month picker example

die Standardverwendung ist einfach folgend wie tun:

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

Quelle

2013-10-15 19:04:12 gustavohenke

Ich habe this script in einem Programm eine Weile zurück. Obwohl es uralt ist, funktioniert es bei allen Browsern gut. Wenn Sie auf "Kalender Monat auswählen" klicken, glaube ich, dass Sie genau das suchen. Das Beispiel, das da ist, hat den Kalender in einem neuen Fenster (ew) geöffnet, aber 1 Einstellung (wie das zweite Beispiel) zeigt es ala jQuery. Viel Glück.

Quelle

2008-10-12 21:03:26

Ich hatte gerade einen Pick einen Datumsauswahl den anderen Tag. Ich fand zwei andere interessante Beispiele, die möglicherweise Ihnen helfen, aber ich bin mir nicht sicher, wie Sie das tun werden, ohne den Kalender zu zeigen. Die meisten "Date Pickers" gehen davon aus, dass Sie einen Kalender sehen wollen. Sie sollten besser nach einem benutzerdefinierten Dropdown suchen, das einige benutzerdefinierte Schaltflächen enthält, die Sie konfigurieren können.

Hier sind die, die ich angeschaut:

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

ich landete mit dieser: http://jqueryui.com/demos/datepicker/

Wenn Sie eine gut mit JQuery sind, haben Sie vielleicht mit einem guten kommen kleines Projekt.

Quelle

2009-05-12 21:23:05

Ben Koehler von this equivalent question bietet eine jquery ui Hack, die anständig funktioniert. Zitiert hier aus Bequemlichkeit, alles Kredit ist sein.

JSFiddle of this solution

- Hier ist ein Hack (mit gesamter HTML-Datei aktualisiert):

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

Quelle

2010-07-27 21:37:48 Cory

Das Problem mit diesem Hack ist, dass Sie keine anderen normalen Datumsauswahl auf der Seite verwenden können, weil ihre Kalender auch ausgeblendet werden. – Brook

Es leidet jedoch unter einem anderen ziemlich wichtigen Problem (Chrome 32, aber ich vermute überall). Nach Auswahl eines Datums und erneutem Öffnen des Pickers wird immer das aktuelle Datum angezeigt. Wenn Sie also über dieses Feld wechseln, ändert sich das Datum, das Sie bis zum heutigen Datum eingegeben haben. In gleicher Weise gibt es keine Möglichkeit, den Datepicker abzubrechen - wenn Sie ihn versehentlich öffnen, müssen Sie ein neues Datum auswählen. Ich habe ein bisschen Zeit damit verbracht, das Problem zu umgehen, aber bisher keine Würfel. – Julian

itsaruns, ich habe alles versucht, was ich finden konnte, um eine ID zu den Datepickern hinzuzufügen, damit ich die CSS zu den einzelnen Datepickern hinzufügen konnte und nicht zu allen, aber nichts scheint zu funktionieren. Bitte, wenn Sie (oder jemand anders) weiß, wie Sie das tun, können Sie es hier posten? –

Gefunden eines auf lucianocosta.info.Es sieht sehr gut aus:

Month Picker in action

AKTUALISIERT 2016.02.13: Link,

Quelle

2012-11-12 05:06:52

nur, dass es jemanden in Zukunft hilft, brauchen Sie mindestens jquery 1.4.3, damit dies richtig funktioniert. Ich habe einen "undefinierten" Wert für den Monat, während ich jQuery 1.4.2 – redDevil

sauber, einfach benutze und in Chrome überhaupt nicht zu funktionieren scheint. – SteveCav

Auf Chrome 27 und es funktioniert für mich –

Fühlen Sie sich frei einen Blick auf meine eigene jQuery-Plugin zu haben:

Einfach zu bedienen:

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

Es gibt noch nicht viele Optionen, aber Sie können die Eingabe auf einen eingeschränkten Monatsbereich beschränken.

Es gibt auch Ereignisse, die eine Art und Weise der Interdependenz Codierung bieten zwischen zwei monthpicker (Start & Enddatum)

Sie eine Live-Demo finden Sie hier: Codepen

Sie sind frei, den Quellcode zu nehmen von Github und ändern, was Sie wollen: Github repository

Quelle

2015-09-16 16:03:59 Apolo

Auf der Suche nach JavaScript Monat Picker

Antwort

Verwandte Themen