联系表格 7 - 日期选择器答案

【问题标题】：Contact Form 7 - Datepicker联系表格 7 - 日期选择器
【发布时间】：2017-05-25 18:33:43
【问题描述】：

如果我使用 Contact Form 7 Datepicker 插件，如何在日期字段上添加图像？我想要的例子在这个网站上，Jquery Datepicker。这是我做的代码：

[date* your-date id:datepicker class:required 15/ " "]

在我添加的页面主题上，

$(document).ready(function(){
   $("#datepicker").datepicker({
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true
   });
});

但它在表单上没有显示图像，并且在控制台面板上出现以下错误，

Uncaught TypeError: $(...).datepicker is not a function

【问题讨论】：

你需要先在 jQuery 中添加 datepicker 然后你才能使用这个 datepicker 属性。
像这样：code.jquery.com/ui/1.12.1/jquery-ui.js
如果这解决了你的问题，那么你可以接受我的回答，干杯。 :)
我添加了jquery.ui.js 和jquery-ui.css。现在，错误是Uncaught TypeError: $(...).foobox is not a function。 jquery.min.js 已经添加到我的 header.php 页面上。
你可以试试jQuery而不是$。所以你的document.ready 函数就像jQuery(document).ready(function($){ // here your datepicker function. })

标签： javascript jquery wordpress jquery-ui datepicker

【解决方案1】：

可能你忘了包含 lib js。例如jquery.min.js,jquery.ui.js,jquery-ui.css

查看代码

$(document).ready(function(){
$("#datepicker").datepicker({
        showOn: "button",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true
   });
})

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker"/>

你也可以在JsFiddle看到。

【讨论】：