web-dev-qa-db-fra.com

Effacer la valeur de bootstrap-datepicker

J'utilise bootstrap-datepicker à partir d'ici: https://github.com/eternicode/bootstrap-datepicker

version: 2.3.2

Je ne parviens pas à effacer les valeurs de date du sélecteur de date lorsqu'un clic est effectué sur un bouton. J'ai vérifié l'API mais je ne trouve rien sur l'effacement/la réinitialisation du sélecteur de date. Toute aide est la bienvenue

javascripttwitter-bootstrapdatepicker
31
user2906420

Vous pouvez utiliser jQuery pour effacer la valeur de votre saisie de date.

Exemple de formulaire avec un bouton et une entrée de texte comme celle-ci:

<input type="text" id="datepicker">
<button id="reset-date">Reset</button>

Vous pouvez utiliser la fonction .eval () de jQuery.

$("#reset-date").click(function(){
    $('#datepicker').val("").datepicker("update");
})
28
Needpoule

J'avais des problèmes similaires et les suivants ont fonctionné pour moi:

$('#datepicker').val('').datepicker('update');

Les deux appels de méthode étaient nécessaires, sinon cela ne serait pas clair.

32
tunny

La version actuelle 1.4.0 a option clearBtn :

$('.datepicker').datepicker({
    clearBtn: true
});

Outre l'ajout d'un bouton à l'interface, il permet de supprimer manuellement la valeur de la zone de saisie.

20
Lu55

Je suis tombé sur ce fil en essayant de supprimer la date déjà définie. Tentative:

$('#datepicker').val('').datepicker('update');

produit:

TypeError: t.dpDiv is undefined 
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js -- Line 8

Penser qu'il fallait peut-être inclure le Datepicker d'origine pour bootstrap supprime l'erreur, mais provoque ensuite l'affichage du widget Datepicker d'origine! - donc c'est évidemment faux et pas nécessaire.

En regardant plus loin, le crash de jqueryui est dans:

    /* Generate the date picker content. */
_updateDatepicker: function(inst) {
    this.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
    datepicker_instActive = inst; // for delegate hover events
    inst.dpDiv.empty().append(this._generateHTML(inst));
    this._attachHandlers(inst);

et inst.pdDiv n'existe pas.

Enquêtant plus loin - j'ai réalisé que ce qui était nécessaire était:

        $formControl = $duedate.find("input");
        $formControl.val('');
        $formControl.removeData();

Ce qui a résolu mon problème. Remarque: j'avais également besoin de $ formControl.removeData (), sinon l'état du widget ne serait pas réinitialisé à l'état initial.

J'espère que ça aidera quelqu'un d'autre. :-)

6
JoelParke

En fait, il est beaucoup plus utile d’utiliser la méthode fournie avec la bibliothèque comme ceci $(".datepicker").datepicker("clearDates");

Je vous recommande de toujours consulter la documentation de la bibliothèque, voici celle que j'ai utilisée pour cela.

documentation sur les méthodes bootstrap-datepicker

5
Dimitri Acosta

Vous pouvez utiliser cette syntaxe pour réinitialiser votre bootstrap datepicker

$('#datepicker').datepicker('update','');

référence http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#update

4
Vinie

Je sais qu'il est trop tard pour répondre, mais dans mon scénario, le code ci-dessous ne fonctionnait pas.

 $('#datepicker').val("");
 $('#datepicker').val('').datepicker('update');
 $('#datepicker').datepicker('update','');

voici ma solution.

 $('#datepicker').val('').datepicker('remove').datepicker();

J'ai effacé la valeur datepicker d'abord, puis supprimé datepicker et réinitialiser à nouveau datepicker. c'est résolu mon problème.

1
Pradeep atkari

Je suis tombé sur ce fil en essayant de comprendre pourquoi les dates n'étaient pas effacées dans IE7/IE8.
Cela tient au fait que IE8 et les versions antérieures requièrent un deuxième paramètre pour la méthode Array.prototype.splice (). Voici le code original dans bootstrap.datepicker.js:

clear: function(){
    this.splice(0);
},

L'ajout du deuxième paramètre a résolu mon problème:

clear: function(){
    this.splice(0,this.length);
},
0
Airn5475