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

我建议尝试用 a和 add替换已弃用的<center>标签。对于 添加. 那可以工作。 小演示-小提琴<div class="wrapper">.wrapper {text-align:vertical;}#roomForStartDatesmargin: 0 auto;

并且刚刚添加了第二个小提琴，因为我想将它与开始/结束日期一起使用： 带日历和复制的小提琴 

<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 可能会覆盖这些值，但这可以使用 Web 开发人员工具（例如 Firebug）轻松检查。

于 2014-09-15T23:10:50.903 回答