我使用AngularJs并喜欢显示< select>如果日期可用,如果不是,我喜欢将uib-datepicker放在< select>内。
让我再解释一下,如果日期可用,请点击< select>如果日期不可用,请点击< select>将使uib-datepicker显示。
我有multi-datepicker.tpl.html的html代码。
< div class =" uib-datepicker" NG-开关=" datepickerMode"角色="应用" NG-KEYDOWN =" KEYDOWN($事件)">
< uib-daypicker ng-switch-when =" day"的tabindex =" 0"模板-URL ="应用程序/行进/视图/多day.tpl.html">< / UIB-daypicker>
< uib-monthpicker ng-switch-when =" month"的tabindex =" 0">< / UIB-monthpicker>
< uib-yearpicker ng-switch-when =" year"的tabindex =" 0">< / UIB-yearpicker>
< / DIV>
为此,我在我的HTML代码中所做的是
< div class =" row travel-reviews">
< select ng-model =" selectedSeats" NG-变化=" totalAmountCal()" ng-options ="座位为seat.seat座位在座位上">
< option value =""已选择已停用>选择座位数< / option>
< /选择>
< select ng-show =" dateLength" NG-模型=" selectedDate" ng-options ="日期为selectedDates的日期日期">
< option value =""已选择已停用>选择日期< /选项>
< /选择>
< select ng-show ="!dateLength" >
< uib-datepicker ng-model =' selectedDate'多选=' selectedDates'模板-URL ='应用程序/行进/视图/多datepicker.tpl.html'>< / UIB-日期选择器>
< /选择>
< / DIV>
现在的问题是(1)datepicker不在select中,而(2)第二个覆盖第一个。
如何解决问题?当日期可用时,$ scope.dateLength为true且不可用$ scope.dateLength为false。
编辑:
< div class =" row travel-reviews">
< select ng-model =" selectedSeats" NG-变化=" totalAmountCal()" ng-options ="座位为seat.seat座位在座位上">
< option value =""已选择已停用>选择座位数< / option>
< /选择>
< select ng-show =" dateLength" NG-模型=" selectedDate" ng-options ="日期为selectedDates的日期日期">
< option value =""已选择已停用>选择日期< /选项>
< /选择>
< div ng-show ="!dateLength">
< b style =" font-size:15px;颜色:蓝色">请选择日期< / b>
<节>
<表>
< TR>
< TD>
< uib-datepicker ng-model =' selectedDate'多选=' selectedDates'模板-URL ='应用程序/行进/视图/多datepicker.tpl.html'>< / UIB-日期选择器>
< / TD>
< td style =' width:10px'>< / td>
< / TR>
< /表>
< /节>
< / DIV>
< / DIV>
多day.tpl.html
< table class =" uib-daypicker"角色="网格"咏叹调-labelledby =" {{:: UNIQUEID}} - 标题"咏叹调-activedescendant =" {{activeDateId}}">
< THEAD>
< TR>
&LT的第i;
< button type =" button" class =" btn btn-default btn-sm pull-left uib-left"纳克单击="移动(-1)"的tabindex =" -1">
< i class =" glyphicon glyphicon-chevron-left">< / i>
< /按钮>
< /第>
< th colspan =" {{:: 5 + showWeeks}}">
< button id =" {{:: uniqueId}} - title"角色="标题"咏叹调活="自信"咏叹调原子="真"类型="按钮" class =" btn btn-default btn-sm uib-title"纳克单击=" toggleMode()" ng-disabled =" datepickerMode === maxMode"的tabindex =" -1">
<强> {{TITLE}}< /强>
< /按钮>
< /第>
&LT的第i;
< button type =" button" class =" btn btn-default btn-sm pull-right uib-right"纳克单击="移动(1)" tabindex =" -1">< i class =" glyphicon glyphicon-chevron-right">< / i>< / button>
< /第>
< / TR>
< TR>
< th ng-if =" showWeeks"类="文本的中心">< /第>
< th ng-repeat ="标签:::标签跟踪$ index"类="文本的中心">
< small aria-label =" {{:: label.full}}"> {{:: label.abbr}}< / small>
< /第>
< / TR>
< / THEAD>
< TBODY>
< tr class =" uib-weeks" ng-repeat ="行中的行跟踪$ index">
< td ng-if =" showWeeks" class =" text-center h6">
< em> {{weekNumbers [$ index]}}< / em>
< / TD>
< td ng-repeat =" dt in row" class =" uib-day text-center"角色="栅格单元" ID =" {{:: dt.uid}}"纳克级=" :: dt.customClass">
< button type =" button" class =" btn btn-default btn-sm" ng-class =" {' btn-info':dt.selected,active:isActive(dt)}"纳克单击="选择(dt.date)" NG-禁用=" :: dt.disabled"的tabindex =" -1">
< span ng-class =" :: {' text-muted':dt.secondary,' text-info&#39 ;: dt.current}"> {{:: dt.label}}< /跨度>
< /按钮>
< / TD>
< / TR>
< / tbody的>
< /表>