Question

我是相当新的，所以请忍受...... 我正在使用教程@ http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html 允许用户从日历中选择日期

然而我似乎无法让它工作，如果有人请告诉我是否以错误的方式解决这个问题......

'jquery.datePicker.js＆amp; datePicker.css'可以在页面顶部附近下载... http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

在我的视图中复制我的标签内的'•jquery.datePicker.js'中的代码
将datePicker.css代码复制到我的css文件

将以下内容粘贴到我的视图页面顶部：

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- required plugins -->
<script type="text/javascript" src="scripts/date.js"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->

<!-- jquery.datePicker.js -->
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>

这不起作用... iv尝试进行第一个演示并使用

<script>

 $(function()
    {
        $('.date-pick').datePicker();
    });

and then adding the following to .css

    /* located in demo.css and creates a little calendar icon
     * instead of a text link for "Choose date"
     */
    a.dp-choose-date {
        float: left;
        width: 16px;
        height: 16px;
        padding: 0;
        margin: 5px 3px 0;
        display: block;
        text-indent: -2000px;
        overflow: hidden;
        background: url(calendar.png) no-repeat; 
    }
    a.dp-choose-date.dp-disabled {
        background-position: 0 -20px;
        cursor: default;
    }
    /* makes the input field shorter once the date picker code
     * has run (to allow space for the calendar icon
     */
    input.dp-applied {
        width: 140px;
        float: left;
    }

有人可以告诉我我做错了吗？

Answer 1

要添加的资源

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css

<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Test date picker form</legend>
<ol>
<li>
<label for="date1">Date 1:</label>
<input name="date1" id="date1" class="date-pick" /></li>
<li>
<label for="date2">Date 2:</label>
<input name="date2" id="date2" class="date-pick" />
</li>
<li>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
</li>
</ol>
</fieldset>
</form>

的Javascript

$('.date-pick').datePicker();

CSS

 a.dp-choose-date {
     float: left;
     width: 16px;
     height: 16px;
     padding: 0;
     margin: 5px 3px 0;
     display: block;
     text-indent: -2000px;
     overflow: hidden;
     background: url(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/images/calendar.png)
 no-repeat;  }4 a.dp-choose-date.dp-disabled {
     background-position: 0 -20px;
     cursor: default; } /* makes the input field shorter once the date picker code  * has run (to allow space for the calendar icon  */
 input.dp-applied {
     width: 140px;
     float: left; }

检查我已经设置了演示的小提琴手还记得检查我添加的资源

http://jsfiddle.net/imranpk/DNFuB/4/

Answer 2

感谢您的回复，我明白了必须...将以下内容添加到我的布局页面

<script src="@Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js")" type="text/javascript"></script>
    <script src="@Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js")" type="text/javascript"></script>

    <link href="@Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css")" rel="stylesheet" type="text/css" />

然后在我的.cshtml文件中，我在编辑后添加（下面）参考。

<script>
            $("#HolidayDate").addClass('date-pick');
            $('.date-pick').datePicker();
</script>

Jquery datepicker不工作

2 个答案: