日付のセレクトボックスの作り方

開発環境：CakePHP2.5.1

日付のセレクトボックスを作るにはFormヘルパーを使うのが便利です。
ただし、初期状態では日本人には使いにくくなっていますので、少しカスタマイズが必要です。

日付のセレクトボックスの基本

まずは基本的な使い方です。

<?php
echo $this->Form->input('birthday', array(
    'type' => 'date',
));
?>

<?php

echo $this->Form->input('birthday', array(

'type' => 'date',

));

inputメソッドにtypeでdateを渡すだけで日付のセレクトボックスが作れます。
ですが、この状態だとJulyなど月が英語表記になっていて、並び順も月-日-年になっています。

日本的な日付のセレクトボックス

まずは日本的な並び順、そして月を数字に変更しましょう。

<?php
echo $this->Form->input('birthday', array(
    'type' => 'date',
    'dateFormat' => 'YMD',
    'monthNames' => false
));
?>

<?php

echo $this->Form->input('birthday', array(

'type' => 'date',

'dateFormat' => 'YMD',

'monthNames' => false

));

dateFormatが並び順、monthNames=falseが英語表記をやめる指定になります。

年の最小値と最大値を指定

上記の例だと誕生日のセレクトボックスなので、年の部分に未来の日付があるのはうれしくありません。
ですので、年の最大値および最小値も指定してみましょう。

<?php
echo $this->Form->input('birthday', array(
    'type' => 'date',
    'dateFormat' => 'YMD',
    'monthNames' => false,
    'maxYear' => date('Y'),
    'minYear' => date('Y') - 100,
));
?>

<?php

echo $this->Form->input('birthday', array(

'type' => 'date',

'dateFormat' => 'YMD',

'monthNames' => false,

'maxYear' => date('Y'),

'minYear' => date('Y') - 100,

));

最大値はmaxYear、最小値はminYearを使えば指定することができます。

ハイフンではなく年月日で表示

デフォルトの状態では年月日がハイフンで区切られています。
それを「年」「月」「日」で区切る形式に変更する方法です。
lib/Cake/View/Helper/FormHelper.phpを改造するので、ファイルをapp/View/Helper/にコピーします。
ファイル内のdateTimeメソッドにある下記の部分を改造します。

<?php $opt = implode($separator, $selects); ?>

1	<?php $opt = implode($separator, $selects); ?>

上記の部分を次のように変更します。

<?php
$opt = '';
if (is_array($separator)) {
    $i = 0;
    foreach($selects as $select) {
        $opt .= $select . $separator[$i];
        $i++;
    }
} else {
    $opt = implode($separator, $selects);
}
?>

<?php

$opt = '';

if (is_array($separator)) {

$i = 0;

foreach($selects as $select) {

$opt .= $select . $separator[$i];

$i++;

}

} else {

$opt = implode($separator, $selects);

}

そして、ビュー側で、次のように指定します。

<?php
echo $this->Form->input('birthday', array(
    'type' => 'date',
    'dateFormat' => 'YMD',
    'monthNames' => false,
    'maxYear' => date('Y'),
    'minYear' => date('Y') - 100,
    'separator' => array('年', '月', '日'),
));
?>

<?php

echo $this->Form->input('birthday', array(

'type' => 'date',

'dateFormat' => 'YMD',

'monthNames' => false,

'maxYear' => date('Y'),

'minYear' => date('Y') - 100,

'separator' => array('年', '月', '日'),

));

これで年月日の表示が日本語になります。

この記事を書いた人
最新の記事

柴田篤志

愛知県一宮市在住のWEBシステム屋（SE・プログラマ）。PHP、 CakePHPを利用して日々開発中。CakePHPをこれから始める方、ある程度CakePHPで開発をしている初級〜中級者の方を対象に、CakePHPでの開発をスピードアップするための情報をまとめています。CakePHPの案件のご依頼、御見積はこちらへご連絡ください。

日付のセレクトボックスの作り方

日付のセレクトボックスの基本

日本的な日付のセレクトボックス

年の最小値と最大値を指定

ハイフンではなく年月日で表示

柴田 篤志

最新記事 by 柴田 篤志 (全て見る)

柴田篤志

最新記事 by 柴田篤志 (全て見る)