web-dev-qa-db-fra.com

Comment puis-je * complètement * supprimer un datepicker d'interface utilisateur jQuery?

J'ai un champ de date que je souhaite seulement parfois attacher un DatePicker, car j'ai certains de mes propres scripts de traitement de texte qui gèrent des chaînes de date partielles. L'appel de .remove ou .destroy laisse toutefois le comportement de formatage du texte sur le champ de saisie, ce qui convertit ma chaîne "8" en un "8/18/2010". Pire encore, si je commence à supprimer, cela suppose fermement que, dès que j'atteins "8/18/20", je en fait voulais "18/08/2020".

Quel serait le meilleur moyen de supprimer complètement le sélecteur de dates de ma page? Je peux également l'utiliser s'il ignore simplement le texte que je saisis à tout moment, même si dans ce cas je préférerais qu'il apparaisse sur un double-clic/une image en tant que bouton, pas toujours.

modifier:

tout cela est dans un jqGrid, où 'sélecteur' est une zone de texte sur une colonne de date:

function showPicker(selector) {
    $(selector).datepicker({
        onClose: function() {
            $(selector).datepicker('remove'); 
            // or 'destroy' or $('.datepicker').remove(); or $(this).datepick('remove');
        }
    });
}

Cela l’empêche de revenir, mais pas de manipuler mon champ de texte. Aucun autre code (à ma connaissance) ne manipule le contenu de ce champ, il suffit que jqGrid surveille la clé d'entrée pour envoyer les données. En regardant le code généré de la page, le div datepicker est encore en bas.

edit2: J'ai exactement le même comportement si je fais ceci:

<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript">
$(document).ready( function(){
 $("#pickle").datepicker({
  onClose: function(){
   $(this).datepicker('remove');
  }
 });
});
</script>
<input type="text" id="pickle" />
</body>
</html>

Cela provoque un comportement identique à ce que je vois, mais le changer pour «détruire» fonctionne ici mais pas sur ma page. Impair.

jquery-uidatepicker
58
Groxx

Cela supprime .datepicker COMPLÈTEMENT: 

$( selector ).datepicker( "destroy" );
$( selector ).removeClass("hasDatepicker").removeAttr('id');

Documentation:
http://docs.jquery.com/UI/Datepicker#method-destroy
lisez aussi les commentaires ci-dessous

116
Omar

J'ai résolu le problème en supprimant les classes datepicker, puis en appelant la méthode unbind sur l'élément lié au datepicker. Cela a semblé s'en débarrasser!

par exemple:

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

/////////datepicker attached to myelement//////

et alors:

$('#myelement').removeClass('calendarclass');
$('#myelement').removeClass('hasDatepicker');
$('#myelement').unbind();

Si vous supprimez simplement les classes, laissez l'élément d'entrée invoquer le sélecteur de date lorsque vous cliquez dessus. Peut-être que unbind() suffirait à faire tout le travail, mais je suis un peu bizarre.

7
Peter Rose

en fonction de votre situation, vous pouvez le faire côté serveur

Ex. dans un sytax de type asp

<% if( showDatePicker ) {%>
    $('#dp-div').DatePicker(); // or whatever
<% } %>

Modifier
Comment définir le dateFormat du datepicker? c'est à dire

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

vous pourriez vouloir

$( ".selector" ).datepicker({ dateFormat: '...' });
3
µBio

Dans une application de page unique, Même si le contenu de la page change, jquery ui reste incohérent . Donc, je fais comme ça dans une application de page unique.

(function($) {

    if ($.ui !== null && typeof $.ui !== typeof undefined) {
        /**
         * dialog fix
         */
        var $oDialog = $.fn.dialog
        $.fn.dialog = function(mth, dialogOpts) {
            if (mth !== null && typeof mth === 'string') {
                if (mth === 'clean') {
                    var id = $(this).attr('id');   // you must set id
                    if (id !== null && typeof id !== typeof undefined) {
                        // garbage jquery ui elements remove
                        $('[aria-describedby="' + id + '"]', document).each(function() {
                            if ($(this).dialog('instance')) {
                                $(this).dialog('destroy');
                            }
                            $(this).remove();
                        });
                    }
                    return this;
                } else if (mth === 'open' && dialogOpts !== null && typeof dialogOpts === 'object') {
                    if ($oDialog.apply(this, ['instance'])) {
                        $oDialog.apply(this, ['option', dialogOpts]);
                        return $oDialog.apply(this, ['open']);
                    } else {
                        return $oDialog.apply(this, dialogOpts);
                    }
                }
            }

            return $oDialog.apply(this, arguments);
        };
    }
})(jQuery);

utiliser comme ceci dans le script de page

// target layer in my page
var $xlsDiv = $('#xlsUpFormDiv');

$xlsDiv.dialog('clean');    // clean garbage dialog

var dialogOpts = {
    autoOpen: false,
    closeOnEscape: true,
    height: 800,
    width: 600,
    modal: true,
    buttons: ...,
    close: function() {
        $xlsForm.reset();
    }
};

// initialize original jquery ui
$xlsDiv.dialog(dialogOpts);

// open button click
$('#btnViewXlsUpForm').on("click", function() {
    $xlsDiv.dialog('open', dialogOpts);
});
0
HS Shin