0

我对此相当陌生，所以请耐心等待...我正在使用教程@ http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html 允许用户从中选择日期日历

但是我似乎无法让它工作，如果我以错误的方式处理这个问题，请有人告诉我......

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

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

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

    <!-- 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>标签中的.js数据

 $(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;
    }

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

4

2 回答 2

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/

于 2012-12-03T17:51:28.130 回答
0

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

<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 文件中，我在 ref 的编辑器之后添加（如下）。

<script>
            $("#HolidayDate").addClass('date-pick');
            $('.date-pick').datePicker();
</script>
于 2012-12-04T13:07:31.077 回答