0

アライメントの問題があります。jqWidgetから datetimeinput ウィジェットを垂直方向に中央揃えにしたいと思います。datetimeinput をページの中央に配置し、その下に、選択した datetimeinput から中央の日付範囲を表示したいと考えています。

これまでに作成したもののイメージは次のとおりです。

ここに画像の説明を入力

datetimeinput をテキストの中央に移動したいと考えています。移動したい場所を示すために長方形を描きました：

ここに画像の説明を入力

これは私のJavaScriptです：

 $(document).ready(function () {



                var today = new Date();
                var dd = today.getDate()-1;
                var mm = today.getMonth(); //January is 0!
                var yyyy = today.getFullYear();


                $("#roomForStartDates").jqxDateTimeInput({ width: 300, height: 30, selectionMode: 'range', min: new Date(2014, 6, 15), max: new Date(yyyy, mm, dd) });
                $("#roomForStartDates").on('change', function (event)
                    {
                    var selection = $("#roomForStartDates").jqxDateTimeInput('getRange');
                     if (selection.from != null)
                      {
                        $("#roomForEndDates").html("<center><div>From: " +selection.from.toLocaleDateString() + " <br/>To: " + selection.to.toLocaleDateString() + "</div></center><br><br>");
                        alert("Selection: "+selection.from.toLocaleDateString() + " to "+selection.to.toLocaleDateString());
                      }


                });

              if(dd<10) {
                 dd='0'+dd;
               }

               //if today is the first of the month
                if(dd =='00'){
                //month is last month and day is last day of prevous month and fix year
                 var LastDayPrevMonth = new Date(yyyy, mm, 0).getDate();
                 dd = LastDayPrevMonth; //days in last month
                 mm--; //last month is now updated to be this month
                if(mm < 0)
                  { // if jan 1st then do december of last year
                     yyyy--;
                     mm=11;
                     dd=31;
                  }
                }


               if(mm<10) {
                 mm='0'+mm;
               }



                //today = mm+'/'+dd+'/'+yyyy;
                //alert(today);
                var date1 = new Date();
                date1.setFullYear(yyyy, mm, 1);
                var date2 = new Date();
                date2.setFullYear(yyyy, mm, dd);
                $("#roomForStartDates").jqxDateTimeInput('setRange', date1, date2);




      });//end document

そして、これは私のHTMLです:

<center>
    <div id="roomForStartDates" style='margin-top: 10px; font-size: 13px; font-family: Verdana;'></div>
     <br>
     <div id="roomForEndDates" style='margin-top: 10px; font-size: 13px; font-family: Verdana;' ></div>
</center>

どんな助けでも素晴らしいでしょう!! 前もって感謝します！！！！もっと詳しく説明する必要がある場合は、お知らせください!!!

アップデート：

私はそれを考え出した！！！以前考えていたよりもはるかに簡単でした。:)

答えのフィドル

4

1 に答える 1

1

非推奨の<center>タグを aに置き換えて<div class="wrapper">を追加することをお勧めし.wrapper {text-align:vertical;}ます。#roomForStartDatesを追加しmargin: 0 auto;ます。 それはうまくいくかもしれません。
小さなデモ -フィドル

そして、開始日/終了日と一緒に使用したかった2番目のフィドルの原因を追加しました： カレンダーとコピーを使用したフィドル 

<div class="wrapper">
 <div class="calendar"></div>
 <div class="startDate">From September 3rd</div>
 <div class="endDate">To October 23rd</div>
</div>

.wrapper {
  text-align:center;
}
.calendar {
 height:200px;
 width:200px;
 margin:0 auto;
}

残りの質問は、ウィジェットの CSS または JS がこれらの値を上書きできる可能性があるため、これが機能するかどうかですが、これは Firebug などの Web 開発者ツールを使用して簡単に確認できます。

于 2014-09-15T23:10:50.903 に答える