Posso anexar um widget jquery.ui.datepicker a um elemento do formulário usando a API do formulário?


7

Eu tenho um elemento de formulário genérico:

$form['date'] = array(
    '#type' => 'textfield',
    '#title' => t( 'Date' ),
);

Que eu quero adicionar o jquery ui datepicker a esse elemento. Existe uma maneira de fazer isso através do formulário api, ou eu tenho que adicionar o seguinte usando drupal_add_js:

$('#edit-date').datepicker();

Ou existe outra maneira ainda melhor?

Respostas:


4

Você pode usar o after_build no seu formulário para chamar uma função que contém drupal_add_js


Eu nunca tinha usado '#after_build' antes, mas ele fez o truque. Para outras pessoas novas nesta propriedade da API do formulário, são necessários uma matriz de nomes de funções chamados com o elemento $ e $ form_state como parâmetros. Útil para adicionar js personalizados a um elemento específico. Também procurei definir meu próprio elemento (a la date project), mas decidi que isso era um exagero.
meriial

Usado suas dicas aqui para montar covenantdesign.com/blog/...
Joshua Stewardson

4

Uma solução muito mais fácil para isso é instalar os módulos Data e Data Pop-up e usar o seguinte elemento api do formulário para obter instantaneamente um elemento pop-up de data. Nenhum js extra, incluindo o necessário.

$form['date'] = array(
  '#type' => 'date_popup',
  '#title' => t('Date'),
  '#date_format' => 'd/m/Y',
);

O atributo #date_format aceita uma string formatada em PHP Date que é usada como o formato de entrada para o campo date.


4

O projeto Date contém um módulo (date_popup.module) que implementa um elemento de formulário date_popup. date_popup.module para o Drupal 6 definiu a função date_popup_load () , mas a função não está presente na versão do Drupal 7 do módulo, nem é uma função principal do Drupal.

O que a função fez foi incluir os arquivos JavaScript necessários.

  $path = drupal_get_path('module', 'date_popup');
  if (module_exists('jquery_ui')) {
    jquery_ui_add('ui.datepicker');
    global $language;
    if ($language->language != 'en') {
      jquery_ui_add("i18n/ui.datepicker-{$language->language}");
    }
  }
  if (variable_get('date_popup_timepicker', 'default') == 'default') {
    drupal_add_js($path . '/lib/jquery.timeentry.pack.js');
  }

A função equivalente presente na versão Drupal 7 do módulo é date_popup_add () , que contém o seguinte código.

drupal_add_library('system', 'ui.datepicker');
drupal_add_library('date_popup', 'timeentry');

// Add the wvega-timepicker library if it's available.
$wvega_path = date_popup_get_wvega_path();
if ($wvega_path) {
  drupal_add_js($wvega_path . '/jquery.timepicker.js');
  drupal_add_css($wvega_path . '/jquery.timepicker.css');
} 

Essa função é chamada de date_popup_element_process () , que é a função #process usada no campo de formulário date_popup. Você pode escrever uma função #process contendo código semelhante ao executado a partir dessa função e anexá-la ao campo de formulário ao qual deseja adicionar o seletor de datas.


Isso funcionou como um encanto para meus propósitos, que era adicionar um datepicker personalizado a um formulário da web.
RevNoah
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.