Date popup field won't display in tableselect element

Question

I am attempting to embed a couple of date fields within a tableselect element, and after trying to use both textfield and date_popup field types, I can't get either to work. Here's my form function using textfields:

function language_dashboard_overview_form($form, &$form_state, $entity) {
  $form = [];
  $options = [];

  $header = [
    'language_locale' => t('Language Locale'),
    'status' => t('Status'),
    'staging_url' => t('Staging URL'),
    'start_date' => t('Start Date'),
    'end_date' => t('End Date'),
    'display_title' => t('Display Title')
  ];

  $translations = $entity->translations->data;

  foreach($translations as $locale => $locale_data) {
    // Get data for all the other fields here
    ...
    // Define start and end date text fields.
    $start_date = new DateTime($entity->field_locale_publishing_dates[$locale][0]['value']);
    $new_start_date = $start_date->format('m-d-Y');

    $end_date = new DateTime($entity->field_locale_publishing_dates[$locale][0]['value2']);
    $new_end_date = $end_date->format('m-d-Y');

    $start_date_field = [
      'data' => [
        '#type' => 'textfield',
        '#size' => 10,
        '#maxlength' => 10,
        '#default_value' => $new_start_date
      ]
    ];

    $end_date_field = [
      'data' => [
        '#type' => 'date_popup',
        '#date_format' => 'm-d-Y',
        '#date_year_range' => '0:+20',
        '#default_value' => $new_end_date
        ]
    ];

    $options[] = [
      'language_locale' => $locale_link,
      'status' => $status,
      'staging_url' => $stage_url,
      'start_date' => $start_date_field,
      'end_date' => $end_date_field,
      'display_title' => $title
    ];

  }

  $form['dashboard'] = [
    '#type' => 'tableselect',
    '#header' => $header,
    '#options' => $options
  ];

  $form['submit'] = [
    '#type' => 'submit',
    '#value' => t('Submit')
  ];

  return $form;
}

With that, I get the fields, but no default value is filled in (and I've verified that the $start_date_field and $end_date_field variables have the desired data).

If I try it with date_popup fields like so:

$start_date_field = [
  'data' => [
    '#type' => 'date_popup',
    '#date_format' => 'm-d-Y',
    '#date_year_range' => '0:+20',
    '#maxlength' => 10,
    '#default_value' => $new_start_date
  ]
];

$end_date_field = [
  'data' => [
    '#type' => 'date_popup',
    '#size' => 10,
    '#maxlength' => 10,
    '#default_value' => $new_end_date
  ]
];

I get no field at all in those columns. From the multiple items I've read on this, I'm adding the fields correctly to the tableselect. Is there something else I'm missing?

UPDATE: I discovered that for the text field, you use #value instead of #default_value. changing that shows my default date as desired. so the only remaining issue is that I can't get anything to show for a date_popup field.

Answer 1

I still can't get the date_popup element to work in a tableselect element, so I ended up going with text field and the jQuery_ui datepicker (included in core).

  $form['dates'] = [
    '#type' => 'fieldset',
    '#title' => t('Set Dates'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE
  ];

  $form['dates']['start_date_popup'] = [
    '#type' => 'date_popup',
    '#title' => t('Start Date'),
    '#date_format' => 'Y-m-d',
    '#date_year_range' => '0:+20',
    '#maxlength' => 10,
    '#date_label_position' => 'none',
    '#id' => 'apply-start-date'
  ];

  $form['dates']['end_date_popup'] = [
    '#type' => 'date_popup',
    '#title' => t('End Date'),
    '#date_format' => 'Y-m-d',
    '#date_year_range' => '0:+20',
    '#date_label_position' => 'none',
    '#id' => 'apply-end-date'
  ];

  $form['dates']['apply_dates_button'] = [
    '#type' => 'button',
    '#value'=> t('Apply Dates'),
    '#attributes' => array('id' => array('apply-dates')),
  ];

...

 'start_date' => array(
   'data'=> array(
     '#type'=>'textfield',
     '#value'=> $new_start_date,
     '#title' => 'Start Date',
     '#title_display'=>'invisible',
     '#name'=> 'start_date[' . $locale . ']',
     '#id'=>  'start-date[' . $locale . ']',
     '#attributes' => array('class' => array('datepicker')),
     '#size' => 10,
     '#maxlength' => 10
   ),
 ),
 'end_date' => array(
   'data'=> array(
     '#type'=>'textfield',
     '#value'=> $new_end_date,
     '#title' => 'End Date',
     '#title_display'=>'invisible',
     '#name'=> 'end_date[' . $locale . ']',
     '#id'=> 'end-date[' . $locale . ']',
     '#attributes' => array('class' => array('datepicker')),
     '#size' => 10,
     '#maxlength' => 10
   ),
 ),

and this JS behavior:

(function ($) {
  Drupal.behaviors.dashboardDatepicker = {
    attach: function (context, settings) {
      // Attach the datepicker to the selected fields.
      $( ".datepicker" ).datepicker({
        dateFormat: "yy-mm-dd",
        changeYear: true,
        yearRange: '-30:+30',
        minDate: '-0',
        showButtonPanel: true
      });

      // Add click handler for apply button.
      $("#apply-dates", context).click(function(event) {
        // Keep the form from being submitted.
        event.preventDefault();
        // Get the dates from the fieldset
        var startDate = $("input[id*='apply-start-date']").val();
        var endDate = $("input[id*='apply-end-date']").val();
        // Get the set of selected checkboxes.
        if(startDate) {
          $("table#locale-table").find("tr.selected").find("input[id*='start-date']").val(startDate);
        }
        if (endDate) {
          $("table#locale-table").find("tr.selected").find("input[id*='end-date']").val(endDate);
        }
      })
    }
  };
}(jQuery));