eccube

ec-cube preferd shipping date picker.

2013.9.3

ec-cube 2.11.2

お届け時間の指定にDatepicker

LC_Page_Shopping_Payment_Ex.phpで、action()をoverride。

Datepickerで使うため、新しく

$arrDelivFirstDate
$arrDelivLastDate
$arrDelivDateSelected

を定義する。

// お届け日一覧の取得
/* Add for Datepicker ---------------------------- */
$array_deliverDates = $objPurchase->getDelivDate($objCartSess, $cart_key);
$this->arrDelivDate = $array_deliverDates;

$num=0;
foreach ($array_deliverDates as $key => $value) {
    if($num===0){
        $this->arrDelivFirstDate = $value; 
    }
    if($num===(count($array_deliverDates)-1)){
        $this->arrDelivLastDate = $value;
    }
    $num++;
}

$this->arrDelivDateSelecter = $_SESSION['shipping'][0]['shipping_date'];
/* ----- */

payment.tplで、上で定義した変数を使って、datepickerを呼び出す。

下の記述がある辺りで、

お届け時間：
<select name="<!--{$key}-->" id="<!--{$key}-->" style="<!--{$arrErr[$key]|sfGetErrorColor}-->">
    <option value="" selected="">指定なし</option>
    <!--{assign var=shipping_time_value value=$arrForm[$key].value|default:$shippingItem.time_id}-->
    <!--{html_options options=$arrDelivTime selected=$shipping_time_value}-->
</select>

以下へ変更。

<!--add for datepicker-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var minDate = '<!--{$arrDelivFirstDate}-->';
var maxDate = '<!--{$arrDelivLastDate}-->';
minDate = minDate.replace(/[^0-9\/]/g, "");
maxDate = maxDate.replace(/[^0-9\/]/g, "");
//console.log(minDate);
//console.log(maxDate);
var opt = {
    'dateFormat' : 'yy/mm/dd',
    'minDate' : minDate,
    'maxDate' : maxDate,
    'showAnim': 'clip'
};
$(function() {
$( "#datepicker" ).datepicker(opt);
});
</script>
<input type="text" id="datepicker"  id="<!--{$key}-->"  name="<!--{$key}-->" value="<!--{$arrDelivDateSelecter}-->"/>
<!-- / -->

jsやcssの読み込みは適宜調整。

BLOG TOP