title: Enable Datepicker in a WooCommerce Checkout custom text field
body: <p>In WooCommerce, I can get a field hooked into my WooCommerce cart page &amp; showing up OK using the following in my theme's (Storefront) functions PHP: </p>
  
  <pre><code>&lt;?
              // ADD Custom Fields to Checkout Page
              /**
               * Add the field to the checkout
               **/
  
              add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
  
              function my_custom_checkout_field( $checkout ) {
  
                  date_default_timezone_set('America/Los_Angeles');
                  $mydateoptions = array('' =&gt; __('Select PickupDate', 'woocommerce' )); 
  
                  echo '&lt;div id="my_custom_checkout_field"&gt;&lt;h3&gt;'.__('Delivery Info').'&lt;/h3&gt;';
  
                 woocommerce_form_field( 'order_pickup_date', array(
                      'type'          =&gt; 'text',
                      'class'         =&gt; array('my-field-class form-row-wide'),
                      'id'            =&gt; 'datepicker',
                      'required'      =&gt; true,
                      'label'         =&gt; __('Delivery Date'),
                      'placeholder'       =&gt; __('Select Date'),
                      'options'     =&gt;   $mydateoptions
                      ),$checkout-&gt;get_value( 'order_pickup_date' ));
  
                  echo '&lt;/div&gt;';
              }
  
              /**
               * Process the checkout
               **/
              add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
  
              function my_custom_checkout_field_process() {
                  global $woocommerce;
  
                  // Check if set, if its not set add an error.
                  if (!$_POST['order_pickup_date'])
                       wc_add_notice( '&lt;strong&gt;PickupDate&lt;/strong&gt; ' . __( 'is a required field.', 'woocommerce' ), 'error' );
              }
  
              /**
               * Update the order meta with field value
               **/
              add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');
  
              function my_custom_checkout_field_update_order_meta( $order_id ) {
                  if ($_POST['order_pickup_date']) update_post_meta( $order_id, 'PickupDate', esc_attr($_POST['order_pickup_date']));
              }
              ?&gt;
  </code></pre>
  
  <p>However, the datepicker widget is not initiated when you click into the field. I know the following code is required in the header for JQuery to work:</p>
  
  <pre><code>&lt;script&gt;
  $( function() {
  $( "#datepicker" ).datepicker(); } );
  &lt;/script&gt;
  </code></pre>
  
  <p>This did not work for me, so I thought to put this function into the checkout.js file in Storefront theme, but the added field didn't have calendar widget functionality.</p>
  
  <p>There's a lot of <code>.js</code> in the them do I need to start a new one for includes?</p>