1

このウェブサイトのタイムピッカーを使用しています

私のページには時々のように複数のフィールドがあります。このために動的な名前とIDを作成しています。

ここに画像の説明を入力

PHP コード:

<?php
$i=1;
foreach($locations as $location)
{

 ?>
<tr>
  <td><?php echo $location['name'];?>
  </td>
  <td>
  <input type="text" name="txtFromDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtFromDate_<?php echo $i;?>"/>
  </td>
  <td>
  <input type="text" name="txtToDate_<?php echo $location['pk_locationid'];?>"  class="field" style="width:80px;" id="txtToDate_<?php echo $i;?>"/>
 </td>
 <td>
 <input type="text" name="txtFromTime_<?php echo $location['pk_locationid'];?>"  class="time-pick field" style="width:80px;" />
 </td>
 <td>
 <input type="text" name="txtToTime_<?php echo $location['pk_locationid'];?>"  class="time-pick field" style="width:80px;"/>
 </td>

 </tr>
 <?php
 $i++;
 }
 ?>

Jquery コード:

<script type="text/javascript">
        $(document).ready(function(){
            var count=0;
            count=<?php echo count($locations);?>;

            for(i=1;i<=count;i++)
            {
                (function(i) {
                    $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
                        defaultDate: new Date(),
                        changeMonth: true,
                        changeYear: true,
                        dateFormat: 'dd-mm-yy',
                        onSelect: function(selectedDate) {
                            var option, otherPicker;
                            if (this.id == "txtFromDate_"+i) {
                               otherPicker = $("#txtToDate_"+i);
                               option = "minDate";
                            } else {
                               otherPicker = $("#txtFromDate_"+i);
                               option = "maxDate";
                            }
                            var instance = $(this).data("datepicker");
                            var date = $.datepicker.parseDate(instance.settings.dateFormat ||     $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                            otherPicker.datepicker("option", option, date);
                        }
                    });
                })(i);
            }

        $('.time-pick').timepicker({});
        $("#frmSubmitArtwork").validate({
                errorClass: 'jqueryError',
                validClass: 'jqueryValid',
                errorElement: 'label',
                success: 'jqueryValid',
                messages: {
                    txtTitle: {
                        required: 'Please enter title'
                    },
                    cmbType: {
                        required: 'Please choose type',
                    },
                    txtDescription: {
                        required: 'Please enter description'

                    }

                }
            });
        });

    </script>

fromdate フィールドと todate フィールドで行ったのと同じように、to time は常に from time よりも大きくする必要があります。datepicker のドキュメントに fromdate と todate の検証の例がありましたが、timepicker のドキュメントを読みましたが、これを達成する方法がわかりませんか?

4

2 に答える 2

2

朗報です。

timepicker の作成者がプラグイン ホームページのコード (バージョン 0.2.5 に) と例を更新しました。ここで確認してください。

于 2011-09-14T12:43:51.617 に答える
1

私が正しく理解している場合、あなたのシナリオは次のようになります。

  1. ユーザーがfromTimeフィールドに入力します

  2. 彼がtoTimeフィールドに入力したら、検証が必要です。

解決策は次のようになります。

  1. そのフィールドにイベントを配置するだけです。onfocusout（わからない..）のようなものをチェックしてください。ユーザーがtoTimeボックスを離れたときにトリガーされる最適なイベントを見つけます。

  2. このイベントで、入力された値をfromTimeフィールドで見つかった値と比較する関数を配置します。その些細な日付を比較してください！

これがあなたが求めているものであることを願っています。また、もう1つのヒントとして、日付フィールドにそのようなものがすでに実装されている場合は、そこでどのように行われるかを確認してください。

于 2011-09-13T13:46:40.347 に答える