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>

<script>これは機能しません... iv 最初のデモを実行して、タグ内の .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 に答える