J'essaie de construire un sélecteur de date de début et de fin personnalisé, mais malheureusement à cause de la conception, je ne pourrai pas utiliser la jackery UI Dayspicker, alors je suis bloqué avec l'ancienne façonne de diviser les dates de 3 Code>
7 Réponses :
Parce que, sinon elle remonte au mois précédent. Vous pouvez en savoir plus sur les commentaires de la réponse la plus populaire ici: Obtenez des journées numériques dans un mois spécifié à l'aide de JavaScript? P> Deuxième: strong> i supprimé p> var check_fecha = new Date( year, month );
check_mes = check_fecha.getMonth();
check_anyo = check_fecha.getFullYear();
var check_dias_mes = manyDays( check_mes, check_anyo );
if(day > check_dias_mes)
day = check_dias_mes;
Merci beaucoup pour votre réponse, comme je commente la réponse, je sais que c'est une erreur + -1, mais je ne peux pas trouver le sens de celui-ci, j'ai vu votre violon et cela résout, comme vous le dites, premier problème ; Mais pourquoi est-ce aussi avec (2) mois de compensation? N'importe quel indice?
Cela fonctionne presque, mais en faisant peu de sélections, j'ai pu définir à nouveau 31 février ... :(
Ok, je pense que cela devrait fonctionner. Il suffit d'avoir besoin de quelques chèques supplémentaires.
Lorsque la date est appelée comme constructeur avec plus d'un argument, si Les valeurs sont supérieures à leur plage logique (par exemple 13 est fournie comme la valeur du mois ou 70 pour la valeur minute), la valeur adjacente sera être ajusté. Par exemple. nouvelle date (2013,13,1) équivaut à de nouveaux Date (2014,1,1), les deux créent une date pour 2014-02-01. De même pour Autres valeurs: nouvelle date (2013,2,1,0,70) équivaut à de nouveaux Date (2013,2,1,1,10) qui créent à la fois une date pour 2013-03-01T01: 10: 00. P>
C'est à partir de la note du constructeur de date à MDN p>
Le problème est avec la fonction suivante P>
xxx pré> lorsque vous utilisez 0 comme date à laquelle vous obtenez le mois précédent P>
Par exemple P>
$sm.empty(); for(var tmpmes = next_mes ; tmpmes < 12; tmpmes++){ var doption = $('<option>').attr('value',tmpmes).text(months[tmpmes]); if(next_mes == tmpmes && next_mes != ''){ doption.attr('selected', 'selected'); } $sm.append(doption); }
Merci pour vous Anserer, j'ai fait des changements suggérés et semble fonctionner; Mais si le 31 mars est choisi, la date de départ est définie sur 1 de décembre, une idée? jsfiddle.net/96qyh/11
Je pense que c'est plus sûr d'utiliser Var Fecha = nouvelle date (année, (mois + 1)% 12, 0);
Edit: refactored Quelque code pour supprimer une logique supplémentaire
J'ai utilisé trois fonctions utilitaires pour mettre à jour la chute de la date de début et de fin. P>
Daysinmonth code> - Obtient le nombre de jours dans un mois spécifié d'une année Li>
-
ajustements code> - met à jour le nombre de jours dans la liste déroulante en fonction du mois sélectionné. Remarque: cela ajoute simplement / supprimer des options au lieu de reconstruire à partir de zéro. Li>
-
réinitialise code> - Réinitialiser le mois de début et année li>
ol> J'ai réécrit votre code et j'ai essayé d'atteindre la même logique que vous avez eue dans votre code de démonstration. Vérifiez ma démo et laissez-moi savoir si cela fonctionne pour vous. P>
Démo: strong> http://jsfiddle.net/bobwhz/1/ p> Code complet: strong> p> $(function () {
months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dec'];
/* Cachear selects */
var $ld = $('select[name=llegada-dia]');
var $lm = $('select[name=llegada-mes]');
var $ly = $('select[name=llegada-ano]');
var $sd = $('select[name=salida-dia]');
var $sm = $('select[name=salida-mes]');
var $sy = $('select[name=salida-ano]');
//http://stackoverflow.com/a/1184359/297641
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function adjustDates(selMonthDates, $sel) {
var $options = $sel.find('option');
var dates = $options.length;
//append/remove missing dates
if (dates > selMonthDates) { //remove
$options.slice(selMonthDates).remove();
} else { //append
var dateOptions = [];
for (var date = dates + 1; date <= selMonthDates; date++) {
dateOptions.push('<option value="' + date + '">' + date + '</option>');
}
$sel.append(dateOptions.join('')); //reduces DOM call
}
}
function resetDates() {
$lm.val(function (i, v) {
return (v == '') ? '0' : v;
});
$ly.val(function (i, v) {
return (v == '') ? '2013' : v;
});
}
var paintCals = function (day, month, year) {
resetDates();
//adjust start date
var selMonthDates = daysInMonth((parseInt($lm.val(), 10) + 1), $ly.val());
adjustDates(selMonthDates, $ld);
//If current day selection > number of days in selected month then set the day to max allowed day
if (day > selMonthDates) {
day = selMonthDates;
$ld.val(day); //update selection
}
//selected start date
var selectedDate = new Date(year, month, day);
//next day from start date
var nextDay = new Date(selectedDate.getTime() + 86400000);
//lets build the end year drop down
var tmpArr = [];
for (var yrs = parseInt(nextDay.getFullYear(), 10); yrs <= 2020; yrs++) {
tmpArr.push('<option value="' + yrs + '">' + yrs + '</option>');
}
$sy.empty().append(tmpArr.join('')); //set the YEARS
//simply set the month
$sm.val(nextDay.getMonth()); //set the month
//adjust end date
selMonthDates = daysInMonth(parseInt(nextDay.getMonth(), 10) + 1, nextDay.getFullYear());
adjustDates(selMonthDates, $sd);
$sd.val(nextDay.getDate()); //set the date
$('#log').empty().append('Fecha: ' + selectedDate).append('<br>');
$('#log').append('Siguiente: ' + nextDay);
}
$('.arrival select').on('change', function () {
var ldia = $ld.val();
var lmes = $lm.val();
var lano = $ly.val();
//console.log('lD/lM/lY:'+ldia,lmes,lano);
var ldias = paintCals(ldia, lmes, lano);
});
});
+1 pour les mises à jour groupées de l'option
@Tonimichelcaubet Catch incroyable. Il a échoué parce que lorsque vous changez du mois (février - janvier), la journée était toujours 31 de sorte que le calcul code> suivant code> a renversé les jours supplémentaires qui aboutissent à mars 4th code>. Une solution simple consiste à ajouter une condition à vérifier si le mois sélectionné comporte moins de jours que la journée dans la liste déroulante, si oui, les jours de mise à jour tombent en baisse pour avoir un nombre maximum de jours pour le mois sélectionné. J'avais beaucoup tapé beaucoup, mais le correctif n'est que 2 lignes.
Yay! impressionnant! Je ne trouve aucun problème jusqu'à présent! J'aimerais pouvoir voter à nouveau, j'attendrai un peu pour voir s'il y a un meilleur, mais celui-ci est jusqu'à présent, c'est celui que je suis déjà en train de mettre en œuvre: D
@Tonimichelcaubet suis heureux de savoir que c'est utilisé. Merci et bonne chance.
Je ne sais pas si c'est le comportement souhaité, mais cela permet toujours de saisir une date de fin inférieure à la date de début.
Déconnectez ce Fiddle par moi, espérons que cela fonctionne pour vous
pour HTML p> et js p>
Un problème que j'ai trouvé - vous pouvez mettre le deuxième jour de date égal au premier jour de date - par exemple, si la première date est 2001-février-27, vous pouvez mettre en 2001-février-27 pour la deuxième date.
Si nécessaire, c'est que cela puisse être corrigé, il peut être corrigé en commentant deux lignes et en modifiant un paramètre tel que celui-ci si (fait> dtwo) {// vardiad = parseint (dtone.d, 10) +1; // alerte ('a'); // dtwo = nouvelle date (dtone.y, dtone.m, lexday.tostring ()); setdate (dbsxtwo, fait); }
Merci soumettre pour vos efforts, même si nous en avons besoin pour être autant que possible à JQuery, +1!
Cette mise en œuvre utilise JQuery, mais il fallait avoir besoin de JavaScript uni pour les calculs de date. La partie JavaScript qui génère des boîtes Dropbox peut être remplacée par HTML uni ou avec des scripts latéraux du serveur.
J'ai trouvé des réponses pour vous! Cela pourrait vous aider! :) J'ai aussi créé un plugin, mais vous n'aurez plus besoin que ce soit la seule réponse. Voici donc ce qui vous aiderait. Si vous souhaitez consulter le code, vous pouvez obtenir le code source ici: https: // github.com/the-vs-organisation/vdateTimepicker p>
Laisser des jours de sens avec chaque mois (ne voulez pas 31 de février sélectionnable, ..) p> BlockQuote>
Pour ce numéro, j'ai utilisé la valeur dans la liste du mois comme: p>
xxx pré> puis sur. Vous pouvez voir le code source dans mon plugin. Vous découvrirez également comment interagir avec les autres mois. P>
Vous pouvez utiliser
ID code> du conteneur comme valeur, car nous n'utiliserons pas
Sélectionnez Code> Parce que vous ne pouvez pas styler l'attribut code> style code>. Donc, vous aurez besoin d'un DateTimePicker créé sur mesure. P>
Désabonnement de l'élément de la liste ne sera pas une bonne idée pour l'interface utilisateur, vous pourriez donc avoir besoin de le cacher. Cacher cela ne dérangera pas l'interface utilisateur ou l'utilisateur lui-même. Comme l'objet ne sera pas disponible, il n'aura pas à s'inquiéter de la chose. P>
deuxième h2>
Je ne suis pas sûr de ce que vous vouliez dans celui-ci, alors je le laisserai au lieu de donner une réponse vague. P>
mes hypothèses H2>
Si vous souhaitez obtenir le temps restant ou si vous souhaitez les comparer, vous pouvez utiliser ceci: P>
var month = $('.vmonthval').attr('id');
Merci d'avoir partagé! Allthoug même que cela semble plus réutilisable et extensible, il est un peu plus complexe que nous n'avons besoin ici; de toute façon +1 pour votre plugin
Vous pouvez demander les questions bro, c'était juste un exemple! J'ai ajouté le code pour vous dans ma réponse, que vous voudrez peut-être utiliser ..
Il s'agit d'un sélecteur de date bien testé. Répondez maintenant aux questions suivantes: P>
- Laissons des jours de sens avec chaque mois (ne voulez pas 31 de février sélectionnable, ..) li>
- Ensemble Suivant Thay de Démarrer au sélecteur d'extrémité Li> ul>
... p>
Mais certains comment l'objet Date () indique la bonne date, mais les deux sélecteurs Montrer chaque ensemble de jours pour le précédent (par exemple, 28 premiers jours arriver en mars au lieu de février) p> BlockQuote>
Si vous regardez ci-dessous, je prends soin de tout ce qui précède et plus en utilisant de petites fonctions modulaires: p>
maxday () strong> - donné un mois et une année, il retourne le nombre maximum de jours au cours de cette année pour cette année li> créeary () strong> - donné min, max et une gamme optionnelle de valeurs renvoie un tableau de min à max ou portion de valeurs entre min et max indices li> jours () strong> - Données Min jour et mois et année utilise maxday () em> pour obtenir une journée maximale. Utilise créeary () em> pour renvoyer un tableau prêt à utiliser pour renseigner jour em> options li>mois () strong> - Compte tenu du mois de mois et une gamme de valeurs de texte de mois (comme "Jan '," février ", etc.) utilise créeary () em> pour revenir Un tableau prêt à être utilisé pour peupler le mois
Veuillez consulter cette démo: http://jsfiddle.net/wared/xvezz/. Je suis désolé d'avoir réécrit votre code entièrement mais c'était un moyen plus facile pour moi de comprendre la question. Le code ci-dessous devrait vous aider à résoudre votre problème. Il est situé à la ligne 24 et exécuté lorsque l'utilisateur choisit un mois. J'ai ajouté des commentaires ici afin d'expliquer le processus. L'idée de base est de régler temporairement le jour à 1, puis de restaurer la dernière journée sélectionnée si possible:
// saves last selected day day = date.getDate(); // sets day to 1 in order to prevent the month from changing date.setDate(1); // sets selected month date.setMonth(this.selectedIndex); // retrieves number of days for this month days = getDays(date); // restores last selected day if included in this month if (day <= days) date.setDate(day); // refreshes days options feedCombo(0, getRange(1, days)); // refreshes selected day $select.eq(idx - 1).val(date.getDate());
Je sais que le problème est que je commence / obtiendrai avec 1 au lieu de 0 ou d'une autre manière quelque part dans le code .. tous les bons yeux autour? Je ne suis pas capable de le voir ..
Si la jQuery UI Dayskicker est ce que vous voudriez pourquoi ne le modifiez pas à vos besoins?
Je commencerai à travailler sur un projet pour cette chose, je le posterai depuis quelque temps! :) Vous pouvez avoir le code pour cela..wait ..
Vous pouvez avoir la prime pour 5 jours ^^ @afzaalahmadzehanan
@Jonathan J'ai essayé un peu au début, mais je ne pouvais tout simplement pas voir comment cela peut-il aider :?
@Tonimichelcaubet apprécierait vraiment si vous vérifiez les réponses et laissez quelques commentaires si cela fonctionne pour vous. J'ai posté le mien aussi bien Stackoverflow.com/a/19507870/297641
Je l'ai fait dans tous sauf ceux créés aujourd'hui, je vais dès que possible;) @vega
@Tonimichelcaubet Je suis content que vous ayez fait. Donner une chance équitable peut vous laisser trouver une meilleure solution à votre problème.