Question

我一直在处理表单，并且在表单中有这个日期选择器。由于我已经从网络上尝试了足够多的东西，但是由于某种原因它还是失败了，或者我必须说根本无法正常工作。我已遵循此JQuery UI Date Picker

这是我的代码，我非常确定自己已经正确实现了它，但是仍然无法正常工作。

主题。液体

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale 
}}"> <!--<![endif]-->
<head>
  <!-- Date Picker -->
  <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>
</head>
</html>

formpage.liquid

<form>
   <div class="form-group">
      <label for="date">Date of Purchase (dd/mm/YYYY)</label>
      <input type="text" class="form-control" id="date" placeholder=''>
   </div>
</form>

<script>
  $(function() {
    $( "#date" ).datepicker();
  });
</script>

formpage.liquid 是不同的页面，而 theme.liquid 实际上是shopify主题的全局html页面。请帮我。谢谢：）

编辑

我尝试按照相同的方式在购物车页面上添加交货日期，以为可以解决。 Delivery Date on Cart Page Shopify

制作了一个片段 date-picker ，并添加了以下代码：

date-picker.liquid

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}

<input id="date" type="text" name="attributes[date]" value="" />


<script>
  jQuery(function() {
    jQuery("#date").datepicker( { 
      minDate: +1, 
      maxDate: '+2M',
      beforeShowDay: jQuery.datepicker.noWeekends
    } );
  });
</script>

{% comment %}
  To remove days of the week that aren't Saturday and Sunday, use this:
  http://stackoverflow.com/questions/2968414/disable-specific-days-of- 
  the-week-on-jquery-ui-datepicker
{% endcomment %}

以div形式添加了代码段：

<div class="form-group">
  <label for="date">Date of Purchase (dd/mm/YYYY)</label>
  {% include 'date-picker' %}
</div>

但是对我来说仍然行不通。

日期选择器在Shopify中的页面上不起作用

0 个答案: