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.

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

As-tu essayé:

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

Cela devrait fonctionner selon la documentation de l' API

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/

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

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

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 = '';
        }
    }
});

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' );

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");

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.

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();
});

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();
                    },
                    ...

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»).

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

$("#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('');
            }
        }
    });

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

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

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');