2016-10-12 16 views
0

私の学校のプロジェクトで使用する予定のこの日付ピッカーに関する助けが必要です。2番目の日付ピッカーを追加する

<!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> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <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" name='cout' id="datepicker"></p> 
 
    
 
    
 
</body> 
 
</html>

私は私のプロジェクトは、ホテルの予約ですので、別の日付ピッカーを作成したいです。チェックインとチェックアウトの日付を入力してください。しかし、チェックアウトでこれが発生します。

2nd Datepicker

+1

第2の日付ピッカー – kerv

+0

のコードは同じコードです。私は2番目のdatepickerの名前とIDを変更しようとしましたが、うまく機能しませんでした –

+0

だから、2度も機能を実行していますか?あなたのコードを見せてくれれば、他の人にとって助けになる方がずっと良いでしょう。彼らはあなたが見ることができる問題を見るかもしれない – kerv

答えて

0

これを試してみてください:

<p>Date1: <input type="text" id="datepicker1"></p> 
<p>Date2: <input type="text" id="datepicker2"></p> 
<script> 
    $(function() { 
    $("#datepicker1,#datepicker2").datepicker(); 
    }); 
    </script> 
+0

これはありがとう。 –

1

あなたは日付の入力を定義する代わりにidclassを使用できます。

すなわち:

<!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> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <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" name='cout' class="datepicker" id="start_date"></p> 
    <p>Date: <input type="text" name='cout' class="datepicker" id="end_date"></p> 
</body> 
</html> 

はそれが役に立てば幸い。

0

私はAdrien Leberに、複数の日付ピッカーがあればクラスを簡単にすることができることに同意します。私はあなたが.each()を使用する必要があると思う。

$(function() { 
    $(".datepicker").each(function(i, val) { 
     $(this).datepicker(); 
    }); 
}); 
関連する問題