Woocommerce 日期选择器始终开启答案

【问题标题】：Woocommerce Datepicker Always OnWoocommerce 日期选择器始终开启
【发布时间】：2018-07-11 13:06:04
【问题描述】：

请注意，我使用插件“灵活的 Woocommerce 结帐字段编辑器”在结帐表单中添加了一个自定义字段。现在我试图让日期选择器始终显示在页面上。为此，我尝试了以下方法：

#ui-datepicker-div
{display: block;}

或者

jQuery(window).on("load", function(){
                jQuery("#ui-datepicker-div").show();
});

但是似乎没有任何效果。非常感谢您的帮助。您可以在 twomoms.kitchen 上查看网站

感谢您的帮助。

【问题讨论】：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 在关闭 <head> 标记之前添加。 Jquery 仅在函数尝试运行后调用，在 windows load 上。认为它应该有所帮助。
添加脚本使页面空白。不知道为什么？你有什么想法吗？
可能是因为以前的版本在您的页脚中，请尝试将 Jquery 添加为以下答案，以便在加载文档时运行该函数，因为那时 jquery 已经加载，并且那么不需要再次添加它作为我上面的评论。
试过了。不工作:(

标签： php jquery css woocommerce datepicker

【解决方案1】：

让我尝试帮助，所以在您的控制台中，您会看到 Uncaught ReferenceError: jquery is not defined at (index):137，这意味着 JQuery 未被识别。

jquery 与 jQuery

不同

在头部替换这个：

<script type="text/javascript" language="javascript">

 jQuery(function () {
 jQuery(window).scroll(sticky_relocate);
 sticky_relocate();

 jQuery(this).scrollTop();
 });

 function sticky_relocate() { 
 if ( jQuery(this).scrollTop() > 300) {
 jQuery('#sticky').addClass('stick');
 } else {
 jQuery('#sticky').removeClass('stick');
 }
 }

    jQuery(function() {
         jQuery('#datepicker').datepicker({
             altField: '#wc_order_field_2563', //setting alternate field
             altFormat: 'dd-MM-yy', //setting alternate date format
             fielddateFormat: 'mm-dd-yy' //this is the date format for datepicker field
         });
    });

</script>

然后对于 datepicker ：

    jQuery(function() {
         jQuery('#datepicker').datepicker({
             altField: '#wc_order_field_2563', //setting alternate field
             altFormat: 'dd-MM-yy', //setting alternate date format
             fielddateFormat: 'mm-dd-yy' //this is the date format for datepicker field
         });
    });

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="search"], textarea {
    border: none;
    border-bottom: 1px solid #dadada;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 2;
    padding-left: 10px;
    transition: all 0.3s ease;
    width: 100%;
}

.woocommerce-billing-fields label, .woocommerce-shipping-fields label, .woocommerce-account-fields label, .woocommerce-additional-fields__field-wrapper label {
    display: none;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
 <ul>
 <li>i took your HTML from the site, twomoms.kitchen, dont need to make modification to it</li>
 <li>just add this new #datepicker div on top of the html as below</li>
 <li>in the jQuery function the input fields id gets called as can see below</li>
 <li>You can add this Jquery in the <em>script</em> tag in your header ,should work</li>
 <li><strong>goodluck</strong>, comment if you need me</li>
 </ul>


<!-- ADD this div -->
<div id="datepicker"></div>
<!-- ADD this div -->

<div class="woocommerce-additional-fields__field-wrapper">
<p class="form-row form-row-first validate-required" id="wc_order_field_2563_field" data-priority="">
<label for="wc_order_field_2563" class="">Pickup Date <abbr class="required" title="required">*</abbr>
</label>
<input type="text" class="input-text  hasDatepicker" name="wc_order_field_2563" id="wc_order_field_2563" placeholder="Click here to choose your pickup date*: (Tuesday - Saturday)" value="">
</p>
</div>
 
 
</body>
</html>

【讨论】：

伊拉玛，再次感谢。但是当我进行这些更改时，页面变为空白:(。不知道为什么。我应该在所有这些代码之前添加 jquery 吗？
清除你的缓存，也许只是一个 Ctrl + F5 应该做的。也请用我添加的准备好的文档替换脚本`jquery（function（）{`。
已完成多次 Ctrl+F5 但页面仍为空白。感谢您的所有帮助，但这不起作用。需要帮助
我在那里删除了这段代码，并将#ui-datepicker-div 与 jquery 而不是 documnet 一起放置。准备好。页面已加载，但页面上没有任何反应。请问有什么建议吗？
更新再次使页面空白。你现在可以看到了。

【解决方案2】：

尝试在文档就绪功能上插入日期选择器。

$(document).ready(function(){
  $( "#ui-datepicker-div" ).datepicker( "show" );
});

【讨论】：

是的，基兰。确实是。我只需要让它在没有点击事件的情况下不断显示。喜欢它应该一直显示。
你能提供你想要实现它的链接吗？ :)
它在最初的帖子中。然而它是twomoms.kitchen
@maddysanoo 这个<div id="ui-datepicker-div"></div>在你的页面上的什么位置？
还有@maddysanoo 在你的head 标记之前<script type="text/javascript" language="javascript"> 你有一个结束</style> 标记，删除。