前言

一份鲜花或是一磅蛋糕都一份温暖的心意，而这心意最重要的就是时效性，配送时间便尤为重要，这篇blog简述如何为您的订单页面添加配送时间插件，最终效果如下图

后台可在订单备注处查看顾客选择的配送时间

通用主题

下载并且解压缩日期选择插件文件（点击下载），

得到样式文件datetimepicker.css和脚本文件datetimepicker.js

① 将这些文件上传至 当前主题 --> 代码编辑 -->资源/Assets 文件夹内，具体位置如图所示

② 在 模版/Templates -->account/create_order.html 代码段中插入配送日期插件调用的代码

<!-- 配送时间插件 -->
<div class="wrapper">
  <div class="cont">
    <div class="mod order-create settings-text_color">
      <div class="order-create-inner settings-main_border">
        <h3 class="order-create-title settings-formTitle_background" id="delivery-time">指定配送时间(<span class="order-create-title-option">可选</span>)：<input type="text" class="order-create-title-time" id="datetimepicker" placeholder=" 点击选择日期"><input class="delivery-time" type="radio" name="delivery" value="全天" checked="checked">全天<input class="delivery-time" type="radio" name="delivery" value="上午">上午<input class="delivery-time" type="radio" name="delivery" value="下午">下午</h3>
      </div>
    </div>
  </div>
</div>

位置如下图所示

③ 将下图中所示代码替换为

<textarea class="settings-ipt_border" id="yhsd_orderCreate_remark-display" placeholder="订单补充说明" maxlength="100"></textarea>
<textarea id="yhsd_orderCreate_remark" style="display:none;"></textarea>

创建订单中的备注代码，顾客选择的配送日期即可在后台订单备注中注释说明。

④ 全代码段末尾插入脚本代码，位置如图所示

<!-- 配送时间脚本调用 -->
{{ 'datetimepicker.js' | asset_url | js_tag }}
{{ 'datetimepicker.css' | asset_url | css_tag }}
<script type="text/javascript">
    $(document).ready(function(){
        $('#datetimepicker').datetimepicker({ //日期插件
            lang:'ch',
            timepicker:false,
            format:'Y-m-d',
        });

    addRemark();
    function addRemark(){
            var deliveryTime = $('#datetimepicker'); //获取时间输入框
            var yhsdOrderCreateRemark = $('#yhsd_orderCreate_remark'); //获取提交备注框
            var submitBtn = $('#yhsd_orderCreate_submit'); //获取提交表单按钮
            var yhsdOrderCreateRemarkDsiplay = $('#yhsd_orderCreate_remark-display'); //获取用户输入备注框
            submitBtn.click(function() {
                if(deliveryTime.val()){
                    yhsdOrderCreateRemark.val('[' + '配送日期：'+ deliveryTime.val() + $('.delivery-time:checked').attr('value') + '] ' + '\n' + yhsdOrderCreateRemarkDsiplay.val());
                } else {
                    yhsdOrderCreateRemark.val(yhsdOrderCreateRemarkDsiplay.val());
                }
            });
        }
    });
</script>

希望能帮助你更有效地完成工作。