web-dev-qa-db-fra.com

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

Comment réinitialiser les valeurs de calendrier datepicker? .. Les restrictions de date minimale et maximale?

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.

Je suis en train de trier la documentation et rien n’est apparu comme une solution. Je n'ai pas non plus réussi à trouver une solution rapide pour 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 du site Web de jQuery UI, mais cela fonctionne à merveille.

jqueryjquery-uijquery-ui-datepicker
76
Cory Danielson

J'essayais d'accomplir cela, c'est-à-dire vider le sélecteur de date afin que les filtres saisis par l'utilisateur puissent être supprimés. Googling un peu j'ai trouvé cette douce pièce de code:

Vous pouvez ajouter la fonctionnalité d'effacement même sur les champs en lecture seule. Ajoutez simplement le code suivant à votre datepicker:

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

Les utilisateurs pourront mettre en surbrillance (même les champs en lecture seule), puis utiliser la touche Retour arrière ou Suppr pour supprimer la date à l'aide de la fonction _clearDate.

La source

78
Leniel Maccaferri

As-tu essayé:

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

Cela devrait fonctionner selon la documentation API

53
DavidWainwright

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/

21
Simon Wang
$('.date').datepicker('setDate', null);
12
Soni Sharma

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 );
});
10
j08691

Essayez ceci., Ceci ajoutera un bouton vide 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 = '';
        }
    }
});
7
sohaib

Réinitialisez les attributs de date maximum sur votre datepicker lorsque vous cliquez sur effacer.

Sur 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' );
3
Mark W

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

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

où $ ('# datepicker') est l'id de l'élément input.

2
omarjebari
$("#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('');
            }
        }
    });
1
Jain Abhishek

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

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

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

Changer les '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>" : "");

Ajoutez ensuite une variable 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 spectacle

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);
0
Дмитрий Бабушкин

J'utilise ce code pour effacer le champ et tous les manigances. J'ai 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('') ne fonctionnerait pas pour moi. Mais jQuery a été ignoré… .. À mon avis, c’est un défaut qu’il n’ya pas d’option .datepicker ('clear').

0
Tschallacka

Mondatepickerinitialisation ressemble à:

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

Ainsi, le bouton par défaut 'Terminé' aura le texte 'Effacer'.

Maintenant, dans datepicker.js, trouvez la fonction interne '_attachHandlers' Elle ressemble à ceci:

 _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 changezhidefunction pour ressembler à:

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

The solution came from this *data-handler="hide"*

0
Alexandru Banaru

Une version modifiée de la solution de Leniel Macaferi pour comptabiliser la touche de retour arrière sous forme de raccourci "page précédente" dans IE8 lorsqu'un champ de texte n'a pas le focus (ce qui semble être le cas lorsque datepicker est ouvert).

Il utilise également val() pour effacer le champ car _clearDate(this) n'a pas fonctionné 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
Kidquick

Dans Firefox, cela fonctionne pour moi sous forme (par programme), où le contrôle datepicker 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
0
Isma