J'utilise l'entrée suivante:
<input id="creation-from-date" type="datetime-local"/>
J'aimerais savoir s'il existe un moyen de définir les heures par défaut comme ceci: jj / mm / aaaa 00:00
Parce que le sélecteur de date permet de choisir la date uniquement, pas l'heure donc j'obtiens une date non valide dans le côté JS car les heures ne sont pas définies.
J'utilise Chrome v73.0.3683.75
Merci beaucoup!
3 Réponses :
Vous pouvez essayer d'utiliser Javascripts date:
// To initialize, simply call the method:
$('input[type="datetime-local"]').setNow();
Voici un bon jQuery extension qui est très utile pour initialiser les entrées datetime et datetime-local :
$("creation-from-date").val(new Date().toLocalString());
// toLocalString() will return the local time while toISOString() will return the UTC time.
J'espère aide.
Essayez de lui ajouter une date par défaut
document.getElementById("creation-from-date").value = setDefautValue();
function setDefautValue() {
var date = new Date(); // today
date.setUTCHours(0, 0, 0, 0); //set default time 00:00 AM
const dStr = date.toISOString()
// remove seconds and milliseconds
return dStr.substring(0, dStr.indexOf(':', dStr.indexOf(':')+1))
}
Merci, mais votre code est basé sur la date d'aujourd'hui. Cela ne convient pas à mon cas d'utilisation.
J'utiliserais plutôt et :
<input id='date' type='date' /> <input id='time' type='time' />
//<![CDATA[
/* external.js */
var doc, bod, I, DateTime; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
DateTime = function(dateElement, timeElement, dateInstance){
var t = this;
this.dateElement = dateElement; this.timeElement = timeElement;
this.date = dateInstance instanceof Date ? dateInstance : new Date;
this.dateValue = function(dateInstance){
if(dateInstance instanceof Date)this.date = dateInstance;
var dt = this.date;
return dt.getFullYear()+'-'+(dt.getMonth()+1).toString().replace(/^(\d)$/, '0$1')+'-'+dt.getDate().toString().replace(/^(\d)$/, '0$1');
}
this.showDate = function(dateInstance){
this.dateElement.value = this.dateValue(dateInstance);
return this;
}
this.timeValue = function(dateInstance){
if(dateInstance instanceof Date)this.date = dateInstance;
var dt = this.date;
return dt.getHours().toString().replace(/^(\d)$/, '0$1')+':'+dt.getMinutes().toString().replace(/^(\d)$/, '0$1');
}
this.showTime = function(dateInstance){
this.timeElement.value = this.timeValue(dateInstance);
return this;
}
this.showDate().showTime();
this.dateChange = function(changeFunc, noTimeFunc){
this.dateElement.oninput = function(){
var v = this.value, s = t.timeElement.value;
if(v === '')v = this.value = t.dateValue(noTimeFunc(t));
if(s === '')s = t.timeValue(this.date);
t.date = new Date(v+' '+s); changeFunc(t.date, t);
}
return this;
}
this.timeChange = function(changeFunc, noTimeFunc){
this.timeElement.oninput = function(){
var v = this.value, s = t.dateElement.value;
if(v === '')v = this.value = t.timeValue(noTimeFunc(t));
if(s === '')s = t.dateValue(this.date);
t.date = new Date(s+' '+v); changeFunc(t.date, t);
}
return this;
}
}
var dateElement = I('date'), timeElement = I('time');
function threeHoursLater(){
return new Date(Date.now()+10800000);
}
var dt = new DateTime(dateElement, timeElement, threeHoursLater()); // 3 hours from now - initial date time set
function consoleIt(dateInstance){
console.log('display of dt.date --> '+dateInstance.toString());
console.log('dt.date for server --> '+dateInstance.getTime());
}
consoleIt(dt.date);
dt.dateChange(function(r){
consoleIt(r);
}, threeHoursLater).timeChange(function(a){
consoleIt(a);
}, threeHoursLater);
}); // end load
//]]>
Fermez ces entrées et voyez ce qui se passe! Oh, assurez-vous de valider ces dates sur votre serveur. Le client peut être modifié.
J'ai mis à jour le code ci-dessus pour inclure un constructeur DateTime . Les arguments doivent être clairs.
PS
J'ai remarqué qu'il y a un problème dans Firefox 67.0 (64 bits) avec les événements de changement, sur les éléments qui ne reçoivent pas le focus en premier, donc .onchange a été remplacé par .oninput , ce qui semble fonctionner dans tous les domaines.
Merci ! Je vais utiliser ça. Mais y a-t-il un moyen de ne régler que les heures? Je ne veux pas que la date soit initialisée à la date d'aujourd'hui.
J'ai fait une modification pour vous montrer comment définir les heures à l'avenir.
Faire le ménage ! Merci !
Pouvez-vous s'il vous plaît ajouter (à la question elle-même) comment vous initialisez votre datepicker?
Je ne sais pas, datetime-local est un composant de Bootstrap pour autant que je sache. Je récupère la valeur via jQuery
$ ("# creation-from-date"). Val ();Oui, j'ai vu ce plugin mais j'ai aussi besoin de régler l'heure, et ce plugin n'est que pour la date.