title: Hide ui-datepicker-calendar based on element attribute
body: <p>I have multiple <code>inputs</code> on my page, all of which have jQuery UI's <a href="http://jqueryui.com/datepicker/" rel="noreferrer"><code>datepicker</code></a> widget attached to them.</p>
  <p>What I would like to do is <code>show/hide</code> the <code>.ui-datepicker-calendar</code> based on a <code>data-calendar</code> attribute on the <code>input</code> element.</p>
  <p>For example:</p>
  <pre><code>&lt;input type=&quot;text&quot; data-calendar=&quot;false&quot; /&gt;
  &lt;input type=&quot;text&quot; data-calendar=&quot;false&quot; /&gt;
  &lt;input type=&quot;text&quot; data-calendar=&quot;true&quot; /&gt;
  </code></pre>
  <p>So, the first two should not show the <code>.ui-datepicker-calendar</code>, but the last should.</p>
  <p>I thought I could leverage the <code>beforeShow</code> event to set the display of the element, however, at the time the event fires, the <code>.ui-datepicker-calendar</code> does not yet exist:</p>
  <pre><code>$('input').datepicker({
    beforeShow: function(el, dp) {
      $('.ui-datepicker-calendar').toggle( !$(el).is('[data-calendar=&quot;false&quot;]') );
    }
  });
  </code></pre>
  <p>I've had a look at similar questions, and the answer is to use CSS to hide the <code>.ui-datepicker-calendar</code> element:</p>
  <pre><code>.ui-datepicker-calendar {
    display: none;
  }
  </code></pre>
  <p>However, this won't work for me as I need to set the display property based on the element's <code>data-calendar</code> attribute.</p>
  <p>Is there a simple way to achieve this? I had a look through the <a href="http://api.jqueryui.com/datepicker/" rel="noreferrer"><code>datepicker</code> API</a> but didn't come across anything.</p>
  <h3><a href="http://jsfiddle.net/jM9Wm/2/" rel="noreferrer">Here's a simple base fiddle</a></h3>
  <h3><a href="http://jsfiddle.net/jM9Wm/3/" rel="noreferrer">Here's how I would like it to display, if <code>data-calendar</code> is false</a></h3>