web-dev-qa-db-ja.com

同じページに複数の日付ピッカーが機能しないjavascript

フォームで行の追加と行の削除機能を使用しました。 date picker機能を備えた日付フィールドがあります。問題は、複数の行を追加してから日付ピッカーをクリックすると、正しく機能しないことです。デモについては、こちらをご覧ください http://jsfiddle.net/KN7Hd/ .

 $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.png",
      buttonImageOnly: true,
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });

これを修正する方法は？

jqueryhtml5jquery-uidatepickerjquery-ui-datepicker
9
marsweb

以下の例を見てください。

http://jsfiddle.net/fMD62/

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

脚本：

 $('.datepick').each(function(){
    $(this).datepicker();
});

完全なコード：

<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>
10
Systematix Infotech
<script type="text/javascript">
        $(document).on('focus', '.datepicker',function(){
            $(this).datepicker({
                todayHighlight:true,
                format:'yyyy-mm-dd',
                autoclose:true
            })
        });
    </script>

<input type="text" class="datepicker" />
<input type="text" class="datepicker" />
<input type="text" class="datepicker" />
3
Ye Maung Maung