開発メモ

開発用のメモです。

EC CUBE で商品検索 ( /admin/products/? ) の登録日・更新日の検索項目を JQuery UI Datepicker に変更する。

<?php
# 中略
case "products/index.tpl" :
$layout = <<<EOL
<tr>
    <th>登録・更新日</th>
    <td colspan='3'>
        <input type="text" data-datepicker="1" name="start_date" value=""/>~
        <input type="text" data-datepicker="1" name="end_date"   value=""/>~
        
        <input type="hidden" name="search_startyear"  value="<!--{\$arrForm.search_startyear.value}-->"/>
        <input type="hidden" name="search_startmonth" value="<!--{\$arrForm.search_startmonth.value}-->"/>
        <input type="hidden" name="search_startday"   value="<!--{\$arrForm.search_startday.value}-->"/>
        
        <input type="hidden" name="search_endyear"    value="<!--{\$arrForm.search_endyear.value}-->"/>
        <input type="hidden" name="search_endmonth"   value="<!--{\$arrForm.search_endmonth.value}-->"/>
        <input type="hidden" name="search_endday"     value="<!--{\$arrForm.search_endday.value}-->"/>
        
        <script>
$(document).ready(function(){
    if ($("[name=search_startyear]").val() != "") {
        $("[name=start_date]").val( 
            $("[name=search_startyear]").val()  + "-" + 
            $("[name=search_startmonth]").val() + "-" + 
            $("[name=search_startday]").val()
        );
    }
    if ($("[name=search_endyear]").val() != "") {
        $("[name=end_date]").val( 
            $("[name=search_endyear]").val()  + "-" + 
            $("[name=search_endmonth]").val() + "-" + 
            $("[name=search_endday]").val()
        );
    }
    
    $("[name=start_date]").on("change",function(){
        $("[name=search_startyear]").val($(this).val().split("-")[0]);
        $("[name=search_startmonth]").val($(this).val().split("-")[1]);
        $("[name=search_startday]").val($(this).val().split("-")[2]);
    });
    $("[name=end_date]").on("change",function(){
        $("[name=search_endyear]").val($(this).val().split("-")[0]);
        $("[name=search_endmonth]").val($(this).val().split("-")[1]);
        $("[name=search_endday]").val($(this).val().split("-")[2]);
    });
});
        </script>
                                
    </td>
</tr>
EOL;
$objTransform -> select("form#search_form tr", 3, false) -> replaceElement($layout);
# 中略
Twitter: @asahina_alice