如何在<select>中放置uib-datepicker

时间:2017-05-04 13:46:08

标签: html angularjs html5

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

0 个答案:

没有答案