Comment effacer / réinitialiser les dates sélectionnées sur le calendrier jQuery UI Datepicker?


85

Comment réinitialiser les valeurs du calendrier du sélecteur de date? .. Les restrictions de date min et max?

Le problème est que lorsque j'efface les dates (en supprimant les valeurs de la zone de texte), les restrictions de date précédentes sont toujours appliquées.

J'ai fait le tri dans la documentation et rien n'a sauté comme solution. Je n'ai pas non plus été en mesure de trouver une solution rapide sur une recherche SO / google

http://jsfiddle.net/CoryDanielson/tF5MH/


Solution:

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate () est une méthode privée de l'objet DatePicker. Vous ne le trouverez pas dans l'API publique sur le site Web de jQuery UI, mais cela fonctionne comme un charme.

Réponses:


86

J'essayais d'accomplir cette chose même, c'est-à-dire de vider le sélecteur de date afin que les filtres entrés par l'utilisateur puissent être supprimés. En cherchant un peu sur Google, j'ai trouvé ce doux morceau de code:

Vous pouvez ajouter la fonction d'effacement même sur les champs en lecture seule. Ajoutez simplement le code suivant à votre sélecteur de date:

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

Les gens pourront mettre en surbrillance (même les champs en lecture seule), puis utiliser la touche de retour arrière ou de suppression pour supprimer la date à l'aide de la _clearDatefonction.

La source


9
Sensationnel. Pourquoi cela ne serait-il pas rendu public?! Il est également exclu de l'API sur l'interface utilisateur jQuery .... n'a aucun sens. ---- J'ai modifié votre message pour que la solution corresponde mieux à ma question. Très belle trouvaille
Cory Danielson

accepter ma modification, j'ai modifié votre réponse pour qu'elle corresponde à ma question au lieu d'être un copier / coller de code incomplet
Cory Danielson

Votre modification n'est-elle pas déjà active? Je ne vois pas d'option pour accepter votre modification ... :)
Leniel Maccaferri

3
Non, ça va. Je pense que la solution incluse dans mon message d'origine et la vôtre aideront presque tous ceux qui trouvent leur chemin vers cette page. Peut-être quelques commentaires sur ce que sont les keyCode 8 et 46 ou ce qui se thistrouve exactement à l'intérieur de _clearDates ()
Cory Danielson

1
où exactement mettez-vous cela?
w0051977

63

As-tu essayé:

$('selector').datepicker('setDate', null);

Cela devrait fonctionner selon la documentation de l' API


J'ai un formulaire avec une entrée de datepicker que j'utilise pour modifier une date que je veux remplir en fonction de la date actuelle. Je trouve cette solution pour réinitialiser mon formulaire d'édition avant d'utiliser "setDate" avec la date courante, mais j'ai un problème de format: sans le ('setDate', null)j'ai le format que je veux (JJ / MM / AAAA) , mais quand je l'utilise j'ai MM / JJ / AAAA ... la seule différence est l'utilisation de ('setDate', null), une idée pourquoi?
Mickaël Leger

Désolé Mickael - Je ne sais pas à ce sujet. Avez-vous essayé de réinitialiser le format après avoir défini la date sur null selon stackoverflow.com/questions/1328025/... ?
DavidWainwright

22

il vous suffit de redéfinir les options sur null:

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

J'ai changé votre jsfiddle: http://jsfiddle.net/tF5MH/9/


oui, merci. tu as raison. C'est drôle, ce problème existe même sur la page de démonstration de jQuery UI Datepicker. jqueryui.com/demos/datepicker/#date-range Définissez la date de fin, puis videz la zone de texte et le problème existe
Cory Danielson

1
C'est le moyen le plus propre, c'est sûr. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X


10

Essayez de changer le code de compensation en:

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

8

Essayez ceci, cela ajoutera un bouton Effacer sur le calendrier Jquery qui effacera la date.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});

1
Cette réponse est probablement meilleure que les autres même si elle ne fonctionne pas dans Firefox. Et le remplacement document.getElementById(this.id).value = '';par le $(this).val('').change();rend encore meilleur car tous les gestionnaires de modifications établis sont également appelés.
Ryan

3

Réinitialisez les attributs de date maximum sur votre sélecteur de date lorsque vous cliquez sur Effacer.

Depuis le site Web de jquery

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

Oui, vous avez raison. J'ai marqué j08691 comme la meilleure réponse parce qu'il m'a donné un code que je pourrais insérer dans le violon qui fonctionnait. Malheureusement, je n'ai pas pu les marquer tous les deux comme meilleurs: /
Cory Danielson

Oui je sais, j'allais l'expliquer un peu mieux avec du code relatif à votre problème, mais il m'a battu. :)
Mark W

3

Je sais que c'est un peu trop tard, mais voici une simple paix de code qui l'a fait pour moi:

$('#datepicker-input').val('').datepicker("refresh");

Je ne vois pas que l'actualisation fait un supplément. Vous pouvez simplement effacer la valeur.
omarjebari le

1
J'aime que vous utilisiez un appel public par rapport à une fonction privée pour effacer le contrôle.
snowYetis

1
@Miguel BinPar, je sais que cet article est ancien, mais votre réponse est la seule réponse qui a fonctionné pour moi après 3 jours à essayer de comprendre cela. Merci!
kejo

3

La réponse évidente a été celle qui a fonctionné pour moi.

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

où $ ('# datepicker') est l'identifiant de l'élément d'entrée.


J'ai essayé cette solution dans le JSFiddle, et cela n'a pas fonctionné. jsfiddle.net/tF5MH/407 Voir les étapes de reproduction sous les entrées. L'utilisation .val('')videra les entrées, mais n'effacera pas les restrictions de sélecteur de date dans les calendriers.
Cory Danielson

J'ai également essayé avec la dernière version de jQuery UI (v1.12.0), et cela n'a pas fonctionné.
Cory Danielson le

Merci une tonne omar. J'ai recherché cette solution de travail au cours des 20 dernières minutes. vous êtes un homme qui sauve la vie! ..
Mahesh

0

Une version modifiée de la solution de Leniel Macaferi pour tenir compte du fait que la touche de retour arrière est un raccourci "page retour" dans IE8 lorsqu'un champ de texte n'a pas le focus (ce qui semble être le cas lorsque le sélecteur de date est ouvert).

Il utilise également val()pour effacer le champ car _clearDate(this)ne fonctionnait pas pour moi.

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});

0

Mon initialisation de datepicker ressemble à:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

Ainsi, le bouton par défaut «Terminé» aura un texte «Effacer» .

Maintenant, à l'intérieur de datepicker.js trouve la fonction interne '_attachHandlers' Cela ressemble à:

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

Et changez la fonction de masquage pour ressembler à:

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

La solution est venue de ce * data-handler = "hide" *


0

J'utilise ce code pour effacer le champ et toutes les manigances. J'avais besoin d'un champ vide pour mon cas d'utilisation

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

Pour une raison quelconque, .val('')cela ne fonctionnerait pas pour moi. Mais contourner jQuery l'a fait. À mon avis, c'est un défaut qu'il n'y a pas d'option .datepicker («clear»).


0

Ma façon de résoudre ce problème

Changer var 'contrôles' sur ui.js

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

Ensuite, ajoutez une var clearText

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

Et avant la fonction de spectacle

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);

0
$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });

0

Dans Firefox, cela fonctionne pour moi sous forme (par programmation), où le contrôle de sélection de date est désactivé par défaut:

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state

-1

Veuillez essayer cette solution, elle fonctionnera correctement comme j'ai essayé

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.