Masquer l'interface utilisateur-datepicker-calendrier en fonction d'attribut d'élément

J'ai plusieurs inputs sur ma page, qui ont jQuery UI datepicker widget attaché à eux.

Ce que je voudrais faire est de show/hide la .ui-datepicker-calendar basé sur un data-calendar attribut sur la input élément.

Par exemple:

<input type="text" data-calendar="false" />
<input type="text" data-calendar="false" />
<input type="text" data-calendar="true" />

Ainsi, les deux premières ne devraient pas montrer le .ui-datepicker-calendar, mais la dernière, devrait.

Je pensais que je pouvais tirer parti de la beforeShow événement pour définir l'affichage de l'élément, cependant, au moment où l'événement se déclenche, le .ui-datepicker-calendar n'existe pas encore:

$('input').datepicker({
  beforeShow: function(el, dp) {
    $('.ui-datepicker-calendar').toggle( !$(el).is('[data-calendar="false"]') );
  }
});

J'ai eu un coup d'oeil à des questions similaires, et la réponse est d'utiliser CSS pour cacher la .ui-datepicker-calendar élément:

.ui-datepicker-calendar {
  display: none;
}

Toutefois, cela ne fonctionne pas pour moi que j'ai besoin pour régler l'affichage de la propriété basée sur l'élément de data-calendar attribut.

Est-il un moyen simple pour y parvenir? J'ai eu un coup d'oeil par le biais de la datepicker API mais n'ai pas trouver quoi que ce soit.

Voici une simple base de violon

Voici comment je l'aime à afficher, si données-agenda est fausse

OriginalL'auteur billyonecan | 2013-08-12

  1. 11

    En ayant fait quelques recherches, je suis tombé sur cette question qui m'a aidé à résoudre mon problème.

    Lorsque le beforeShow événement se déclenche, ajout/suppression une classe sur la #ui-datepicker-div élément (il n'existe qu'une fois le datepicker a été jointe).

    $('input').datepicker({
  beforeShow: function(el, dp) {
    $('#ui-datepicker-div').toggleClass('hide-calendar', $(el).is('[data-calendar="false"]'));
  }
});

    Ensuite, il suffit d'ajouter un style pour .ui-datepicker-calendar dans le .hide-calendar classe:

    .hide-calendar .ui-datepicker-calendar {
  display: none;
}

    Voici un travail de violon

    OriginalL'auteur billyonecan

  2. 1

    Vérifier les données d'attribut pour chaque élément d'entrée.

    1) .de données() - Méthode utilisée pour Stocker des données arbitraires associés avec les éléments qui correspondent.

    2) .chacun() - Méthode utilisée pour l'itération des objets de jQuery.

    De l'essayer.

    $('input[type=text]').each(function(){
    alert($(this).data('calendar'));
    if($(this).data('calendar')){
        $(this).datepicker();
    }
});

    Travail Violon

    De vos commentaires,

    $('input').datepicker();
$('input[type=text]').each(function () {
    if ($(this).data('calendar')) {
        $(this).datepicker();
    }
    else{
        $(this).datepicker('destroy');  //Removes the datepicker functionality 
    }
});

    mise à Jour de Violon

    Merci, mais qui ne s'attache qu'à la datepicker à des éléments avec data-calendar="true". L'exigence est d'attacher le datepicker à tous inputs, mais seulement de montrer les .ui-datepicker-calendar où l'élément data-calendar n'est pas faux. Voir la deuxième violon pour les précisions
    Ok. J'ai compris. vérifier la mise à jour du violon dans ma réponse.
    Merci, mais qui n'est pas encore ça. Je veux le datepicker de tous les éléments, mais de cacher les .ui-datepicker-calendar si l'élément data-calendar attribut est false

    OriginalL'auteur Praveen