Verstecke ui-datepicker-calendar basierend auf dem Elementattribut

Question

Ich habe mehrere inputs auf meiner Seite, von denen alle das datepicker Widget von jQuery UI haben.

Was ich tun möchte, ist, den .ui-datepicker-calendar basierend auf einem data-calendar Attribut am input Element anzeigen/ausblenden.

Zum Beispiel:

Also sollten die ersten beiden nicht den .ui-datepicker-calendar zeigen, sondern der letzte sollte dies tun.

Ich dachte, ich könnte das beforeShow Ereignis nutzen, um die Anzeige des Elements zu setzen, jedoch existiert zur Zeit des Ereignisses der .ui-datepicker-calendar noch nicht:

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

Ich habe mir ähnliche Fragen angesehen und die Antwort ist, das .ui-datepicker-calendar Element mit CSS auszublenden:

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

Dies funktioniert jedoch nicht für mich, da ich das Anzeigeeigenschaft basierend auf dem data-calendar Attribut des Elements setzen muss.

Gibt es einen einfachen Weg, dies zu erreichen? Ich habe mir das datepicker API angesehen, aber nichts gefunden.

Hier ist ein einfaches Grundgerüst Fiddle

So möchte ich es angezeigt bekommen, wenn data-calendar false ist

Answer 1

Nachdem ich etwas mehr gesucht habe, bin ich auf diese Frage gestoßen, die mir geholfen hat, mein Problem zu lösen.

Wenn das beforeShow-Ereignis eintritt, fügen Sie eine Klasse auf dem #ui-datepicker-div-Element hinzu/entfernen Sie diese (dies existiert, sobald der Datepicker angehängt wurde).

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

Fügen Sie dann einfach ein Stil für .ui-datepicker-calendar innerhalb der Klasse .hide-calendar hinzu:

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

Hier ist ein funktionierendes Fiddle

Answer 2

Überprüfen Sie das Datenattribut für jedes Eingabeelement.

1) .data() - Methode zur Speicherung beliebiger Daten, die mit den ausgewählten Elementen verknüpft sind.

2) .each() - Methode zur Iteration über Objekte von jQuery.

Versuchen Sie dies.

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

Funktionierendes Beispiel

Aus Ihren Kommentaren,

$('input').datepicker();
$('input[type=text]').each(function () {
    if ($(this).data('calendar')) {
        $(this).datepicker();
    }
    else{
        $(this).datepicker('destroy');  // Entfernt die Funktionalität des Datepickers
    }
});

Aktualisiertes Beispiel