web-dev-qa-db-fra.com

Bootstrap Datepicker (éviter la saisie de texte ou restreindre la saisie manuelle)

Voici mon site Web: http://splash.inting.org/wp/

J'utilise actuellement le Bootstrap Datepicker (branche de plage) pour mon champ Date d'appel et c'est génial.

Bien que j'ai 2 problèmes :

1) Vous pouvez saisir manuellement des chaînes dans le champ de saisie. C'est bizarre puisque original by eyecon l'a interdit en entrant la date actuelle chaque fois que vous entrez des valeurs non-date. J'ai essayé l'attribut en lecture seule et il ne semble pas fonctionner car il ne vous permettra pas de sélectionner une date.

2) J'ai limité les choix d'entrée de date aux mardis et jeudis en modifiant une réponse dans n autre message . Lors du chargement du sélecteur de date, la date par défaut choisie est la date actuelle, qui peut être n'importe quel autre jour de la semaine. Je veux éviter cela et ne sélectionner que les mardis ou jeudis.

javascriptwordpresstwitter-bootstrapdatepickeruser-input
20
AnimaSola

Remplacez les événements clés sur le contrôle d'entrée.

<input onkeydown="return false" ... />
106
ogborstad

Utilisez l'attribut readonly et ajoutez un module complémentaire après l'élément d'entrée pour déclencher le sélecteur de date après l'entrée:

<input type="text" name="CallDate" value="" id="CallDate" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-medium date date-pick" size="40" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>

cela devrait fonctionner.

Pour le deuxième problème, vous pouvez utiliser une version modifiée du sélecteur de date à partir d'ici: https://github.com/eternicode/bootstrap-datepicker et utiliser l'option daysOfWeekDisabled

4
jmartsch

J'ai réussi à obtenir une solution acceptable comme suit:

$(".date").datetimepicker({
    defaultDate: moment(),
    format: 'YYYY-MM-DD'
}).end().on('keypress paste', function (e) {
    e.preventDefault();
    return false;
});

J'espère que ça marchera pour toi aussi!

4
Ye Yint

Utilisez l'attribut onKeyDown comme ci-dessous. Cela fonctionne pour moi [Pour restreindre la saisie manuelle dans datepicker]

  <input type="text" id="signedDate" name="signedDate" 
  onkeydown="event.preventDefault()" class="form-control input-med datepicker" 
  maxlength="10" placeholder="" />
3
krish007