jquery的pickmeup插件不起作用答案

【问题标题】：pickmeup plugin of jquery not workingjquery的pickmeup插件不起作用
【发布时间】：2017-02-24 13:38:33
【问题描述】：

我希望在单击输入文本框后立即显示日历。我到处搜索，但找不到任何帮助。如果您能帮助我，我将非常感激，因为我是初学者。

这是我的代码：

<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () { 
        $(function () { 
            $('.Reservation .demo').pickmeup({ flat: true }); 
            var input= $('input'); 
            input.pickmeup({ position: 'right', before_show: function(){
                input.pickmeup('set_date', input.val(), true);
            }, change: function(formated){
                input.val(formated);
            }});
        }); 
    });
</script>
This is my asp.net code
<div class="Reservation"> 
    <p style=" float:left; font-size:24px;">Check In:</p> &nbsp;
    <input  type="text" style="width: 160px; height: 22px" value="17-11-2013" /> 
</div>

【问题讨论】：

您的行 "$('.Reservation .demo').pickmeup({ flat: true }); " 指的是具有类 "demo" 的元素，但您没有该类的元素。
$(document).ready(function () { }) 和 $(function(){}) 是 the same thing - 使用其中之一，而不是两者。

标签： javascript jquery css css-selectors

【解决方案1】：

我已经完成了你的代码和这个库，现在你犯的错误是你使用这个库作为 jQuery 插件，这不是基于 jQuery 的插件，这就是为什么如果你想用你的输入初始化日历然后像这样使用它：pickmeup('input', <optionObj>);,

您的其中一行也没有任何意义，因为您的要求是在用户单击输入时显示日历以及您编写的代码行：

$('.Reservation .demo').pickmeup({ flat: true })

首先Reservation dom 下没有demo 类，另一件事是根据pickme 框架，如果你想在UI 上显示一个calnder（它将用calander 替换你的UI 元素）然后你需要初始化它，不像 jquery 插件，下面的例子

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function () {
        pickmeup('.Reservation',{ flat: true });         
    });
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->

顺便说一句，这里是您的代码，我对其进行了改进并开始显示日历：

解决办法：

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function () {
        //$('.Reservation .demo').pickmeup({ flat: true }); 
        var input= $('input'); 
        pickmeup('input',{ position: 'right', before_show: function(){
            input.pickmeup('set_date', input.val(), true);
        }, change: function(formated){
            input.val(formated);
        }});
    });
</script>
This is my asp.net code
<div class="Reservation"> 
    <p style=" float:left; font-size:24px;">Check In:</p> &nbsp;
    <input  type="text" style="width: 160px; height: 22px" value="17-11-2013" /> 
</div>

【讨论】：

感谢您的帮助，它成功了。我只想让我的结帐日期默认选择下一个入住日期，并且我希望上一个日期变得模糊，以便用户无法选择它。提前致谢。
使用 JS Date 函数在 Check in 日期中添加 1 天，并使用 disabled 属性模糊或淡出之前的日期。
执行此操作时出现错误。所以请你帮我写代码，因为我是初学者。请...
如果它对您有帮助，请接受此答案，以便对其他用户也有帮助。对于您的进一步查询，您可能可以开始一个新线程（新问题），在评论中进行讨论可能不太好。
好的，感谢您的帮助。

【解决方案2】：

我希望这会达到您的要求.. 为样式应用 css。

<!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>
  <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>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>
</html>

【讨论】：