ATK4 Form datePicker - default state is 'opened', can this be changed?

Question

I'm using the following form, and everytime the page opens (it's in an expander on a grid) the datePicker is 'open', obscuring part of the text above it.

function page_del() {
    $billingid  = $_GET['id'];
    $now        = date("Y-m-d H:i:s"); 

    $q = $this->api->db->dsql()
        ->table('billing')
        ->where('id', $billingid)
        ->field('enddate')
        ->getOne();

    if (!$q) {
        $this->add('H5')->set('Are you sure you want to stop billing this item?');
        $form = $this->add('Form');
        $form->addField('hidden','billingid')->set($billingid);
        $form->addField('datePicker','datum')->set($now);
        $form->addSubmit('Confirm');

        if ($form->isSubmitted()) {
            $form->stopBilling('manual', $form, $now);              
            $this->js()->univ()->getjQuery()->trigger('reload_grid')->execute(); 
        }
    } else {
            $this->add('H5')->set('This product has already been stopped, effective date: ' .$q);
            }
        }
}

I have other forms elsewhere that also have a datePicker as their first (visible) field that do not display this behaviour. I only mention it because it looks like a 'focus' issue? I.e. the first field gets focus?

Any thoughts on what causes this or how it can be remedied?

Answer 1

Actually it is field state "onfocus", not default. Your form has only one field and this (first) field is selected on page load.

This behavior is added here:

https://github.com/atk4/atk4/blob/master/lib/Form/Field/DatePicker.php#L35

function addCalendarIcon() {
    $this->addButton('',array('options'=>array('text'=>false)))
        ->setHtml(' ')
        ->setIcon('ui-icon-calendar')
        ->js('click',$this->js()->datepicker('show'));
    $this->js('focus', $this->js()->datepicker('show'));
}

You can redefine this method in your project and remove line

$this->js('focus', $this->js()->datepicker('show'));