web-dev-qa-db-fra.com

Kendo UI Datepicker désactiver la saisie

Je souhaite que les utilisateurs puissent modifier une valeur Datepicker Kendo UI uniquement via son bouton et en sélectionnant la date dans la fenêtre contextuelle. Comment puis-je empêcher les utilisateurs de taper dans la zone de texte Datepicker? Puis-je désactiver la zone de texte sans désactiver l'ensemble du contrôle?

javascripthtmlkendo-ui
28
Pejman

Sur votre élément d'entrée, ajoutez cet attribut et cette valeur ... 

onkeydown="return false;"

Ceci désactivera la saisie et permettra toujours d'utiliser l'entrée de contrôle du calendrier. 

46
Justin Russo

Utilisez le contrôle comme ci-dessous

@(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
      )

Cela désactivera la frappe au clavier. De la même manière, d'autres conditions peuvent également être traitées.

9
Sharad Tripathi

Trouvez votre élément d'entrée et désactivez-le

$('#datepicker').attr('disabled','disabled');

(essayé sur le site de démonstration de kendo http://demos.kendoui.com/web/datepicker/index.html )

8
AntouanK

vous pouvez le faire de deux manières

  //disable kendo ui  datapicker click event
    $(".k-datepicker input").bind('click dblclick',function () {
         return false;
    });

    //make it readonly
   $(".k-datepicker input").prop("readonly", true);
5
amol

Si vous souhaitez empêcher l'utilisateur de taper la date dans le sélecteur de date et de ne sélectionner que la date dans la fenêtre contextuelle, essayez ce code 

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");
3
Jaimin

Bien sûr, le widget sélecteur de date et heure devrait avoir la possibilité de forcer la saisie uniquement avec l'interface utilisateur et non au clavier ... Sinon, il s'agit d'une recette pour un véritable cauchemar DateTime! ne rien fournir pour ce cas d'utilisation évident.

J'ai eu le même besoin et l'ai fait fonctionner en utilisant la logique suivante:

$("#date").kendoDatePicker({
    format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");

De cette manière, l'utilisateur ne peut pas entrer une valeur à l'aide du clavier et ne peut entrer qu'une date bien formulée à l'aide de la fenêtre de sélection de date déroulante.

1
Tuthmosis

En effet, le widget ne restreint pas l'utilisateur lors de la saisie. La raison de ce comportement est expliquée ici: Pourquoi le widget ne limite pas la saisie

Avec toutes les autres solutions partagées dans ce fil, celle-ci peut créer un DatePicker masqué, qui limitera l'utilisateur à un format de date spécifique. Consultez cette démonstration pour plus de détails:

Créer un masquage de date

** Notez que ceci n'est pas pris en charge par Kendo UI en tant que fonctionnalité intégrée, vous devrez donc l'utiliser à vos risques et périls. La bonne nouvelle est que cela fonctionne plutôt bien sans effets secondaires connus.

0
George K