EC CUBE 日付範囲検索で入力楽チンバー化する

search_date_time_value.tpl の内容

<div class="attention">
    <!--{$arrErr[$year]}-->
    <!--{$arrErr[$year2]}-->
</div>
<div style="<!--{$arrErr[$year]|sfGetErrorColor}-->;<!--{$arrErr[$year2]|sfGetErrorColor}-->">
    <div style="display: inline">
        <span>
            <select name="<!--{$year}-->" id="<!--{$year}-->">
                <option value="" selected="selected">------</option>
                <!--{html_options options=$arrYear selected=$arrForm[$year].value}-->
            </select>年</span>
    </div>
    <div style="display: inline">
        <span>
            <select name="<!--{$month}-->" id="<!--{$month}-->">
                <option value="" selected="selected">--</option>
                <!--{html_options options=$arrMonth selected=$arrForm[$month].value}-->
            </select>月</span>
    </div>
    <div style="display: inline">
        <span>
            <select name="<!--{$day}-->" id="<!--{$day}-->">
                <option value="" selected="selected">--</option>
                <!--{html_options options=$arrDay selected=$arrForm[$day].value}-->
            </select>日～</span>
    </div>
    <div style="display: inline">
        <span>
            <select name="<!--{$year2}-->" id="<!--{$year2}-->">
                <option value="" selected="selected">------</option>
                <!--{html_options options=$arrYear2 selected=$arrForm[$year2].value}-->
            </select>年</span>
    </div>
    <div style="display: inline">
        <span>
            <select name="<!--{$month2}-->" id="<!--{$month2}-->">
                <option value="" selected="selected">--</option>
                <!--{html_options options=$arrMonth2 selected=$arrForm[$month2].value}-->
            </select>月</span>
    </div>
    <div style="display: inline">
        <span>
            <select name="<!--{$day2}-->" id="<!--{$day2}-->">
                <option value="" selected="selected">--</option>
                <!--{html_options options=$arrDay2 selected=$arrForm[$day2].value}-->
            </select>日</span>
    </div>

    <a href="#" id="<!--{$year}-->_1" class="btn btn-action-m">今日</a>
    <a href="#" id="<!--{$year}-->_2" class="btn btn-action-m">先日</a>
    <a href="#" id="<!--{$year}-->_3" class="btn btn-action-m">今週</a>
    <a href="#" id="<!--{$year}-->_4" class="btn btn-action-m">先週</a>
    <a href="#" id="<!--{$year}-->_5" class="btn btn-action-m">今月</a>
    <a href="#" id="<!--{$year}-->_6" class="btn btn-action-m">先月</a>
    <a href="#" id="<!--{$year}-->_7" class="btn btn-action-m">来月</a>
    <a href="#" id="<!--{$year}-->_8" class="btn btn-action-m">クリア</a>

    <script>
       $(document).ready(function() {
           $("#<!--{$year}-->_1").click(function() {
               // 今日
               var now = new Date();

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_2").click(function() {
               // 先日
               var now = new Date();
               now.setDate(now.getDate() - 1);

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_3").click(function() {
               // 今週
               var now = new Date();

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               now.setDate(now.getDate() - now.getDay());

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_4").click(function() {
               // 先週
               var now = new Date();
               now.setDate(now.getDate() - now.getDay() - 1);

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               now.setDate(now.getDate() - now.getDay());

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_5").click(function() {
               // 今月
               var now = new Date();

               now.setMonth(now.getMonth() + 1);
               now.setDate(0);

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               now.setDate(1);

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_6").click(function() {
               // 先月
               var now = new Date();
               now.setDate(0);

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               now.setDate(1);

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_7").click(function() {
               // 来月
               var now = new Date();

               now.setMonth(now.getMonth() + 2);
               now.setDate(0);

               $("#<!--{$year2}-->").val(now.getFullYear());
               $("#<!--{$month2}-->").val(now.getMonth() + 1);
               $("#<!--{$day2}-->").val(now.getDate());

               now.setDate(1);

               $("#<!--{$year}-->").val(now.getFullYear());
               $("#<!--{$month}-->").val(now.getMonth() + 1);
               $("#<!--{$day}-->").val(now.getDate());
               return false;
           });
           $("#<!--{$year}-->_8").click(function() {
               // クリア
               $("#<!--{$year2}-->").val("");
               $("#<!--{$month2}-->").val("");
               $("#<!--{$day2}-->").val("");
               $("#<!--{$year}-->").val("");
               $("#<!--{$month}-->").val("");
               $("#<!--{$day}-->").val("");
               return false;
           });
       });
   </script>
</div>

インクルードページでの記述

<!--{include
file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`adminparts/search_date_time_value.tpl"
    year="search_startyear"  month="search_startmonth" day="search_startday"
    year2="search_endyear"   month2="search_endmonth"  day2="search_endday"

    arrYear=$arrStartYear arrMonth=$arrStartMonth arrDay=$arrStartDay
    arrYear2=$arrEndYear  arrMonth2=$arrEndMonth  arrDay2=$arrEndDay
}-->