jQuery UI 日期选择器无法正常工作答案

【问题标题】：jQuery UI datepicker doesn't work properlyjQuery UI 日期选择器无法正常工作
【发布时间】：2015-10-11 08:52:30
【问题描述】：

我有问题。我想创建一个日历，在下面的输入框中显示点击的日期，但我似乎无法正常工作。

HTML

<div id="step3">
    <p> Choose a start date </p>
    <div id="calendar"></div>
</div>
</br>
<input type="text" name="something" value="thevalue" />

Javascript

$("#calendar").datepicker({
    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});
$(function(){
    $('#calendar').datepicker({
        onSelect: function(dateText, inst) {
            $("input").val(dateText);
        }
    });
});

任何人都对我的代码有什么问题有任何提示。这也是我的 jsbin http://jsbin.com/najunexipe/edit?html,js,output

【问题讨论】：

你为什么把它分成两个调用，一个在文档准备好之前，一个在文档准备好之后？

标签： javascript jquery html datepicker

【解决方案1】：

这行得通：

$("#calendar").datepicker({
    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    onSelect: function(dateText, inst) {
      $("input").val(dateText);
    }
});

你好像不能初始化插件两次。

【讨论】：

非常感谢，我不知道为什么我没有把它放在第一位。现在可以正常使用了

【解决方案2】：

查看更改.....

html

<!doctype html>
<html>
 <head>
 <title>Deadline Calculator</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="main.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 <script type="text/javascript" src="script.js"></script>
 </head>

 <body>
   <input type="text" class="datepicker" id="importantthing" name="importantthing" value="" />
 </body>
</html>

javascript

$(function(){

    $('.datepicker').datepicker({
        inline: true,
        firstDay: 1,
        showOtherMonths: true,
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        onSelect: function(dateText, inst) {
         //$("input").val(dateText);
        }
    });
});

【讨论】：

为了让它看起来很漂亮，你需要为 Jqyery-ui 添加 css