Angular Datetimepicker: 指令模板 'uibTimepicker' 必须只有一个根元素

Question

我正在尝试使用此库在 AngularJS 中实现 dateTimePicker：Angular-Datetimepicker

我用 Bower 安装库，注入模块和 copy/pasted 示例代码。

控制器：

// Disable weekend selection
$scope.isDisabledDate = function(currentDate, mode) {
  return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
};

查看：

<datetimepicker ng-model="date" 
                date-format="dd-MMM-yyyy" 
                date-options="dateOptions" 
                date-disabled="isDisabledDate(date, mode)">
</datetimepicker>

问题是日期字段为空，在控制台中我有这两个错误：

angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepicker' must have exactly one root element. uib/template/datepicker/datepicker.html

angular.js:12520 Error: [$compile:tplrt] Template for directive 'uibDatepickerPopupWrap' must have exactly one root element. uib/template/datepicker/popup.html

更新：这是新的 html，我用一个元素包围了标签：

    <div class='form-group'>
        <datetimepicker ng-model="appointment.date" 
        date-format="dd-MMM-yyyy" 
        date-options="dateOptions" 
        date-disabled="isDisabledDate(date, mode)">
        </datetimepicker>
    </div>

整个html表格如下：

<div ng-controller='createAppointmentCtrl'>
    <div class="row">
        <div class="col-xs-12">
            <div class='form-group'>
                <label class="control-label">Select client</label>
                <select ng-model="appointment.customer" class='form-control'>
                    <option value='0'>New client</option>
                    <option ng-repeat="client in clients_list" value="{{client.id}}">{{client.name}} {{client.surname}}</option>
                </select>
            </div>
            <div ng-show="appointment.customer == 0">
                <div class='form-group'>
                    <label>Name</label>
                    <input ng-model="appointment.name" type="text" placeholder="name" class="form-control">
                </div>
                <div class='form-group'>
                    <label>Surname</label>
                    <input ng-model="appointment.surname" type="text" placeholder="surname" class='form-control'>
                </div>
            </div>
            <label class='control-label'>Date</label><br>
            <!--<input ng-model="appointment.date" id="expiry" name="expiry" type="datetime-local" required><br>-->
            <datetimepicker ng-model="appointment.date" 
                date-format="dd-MMM-yyyy" 
                date-options="dateOptions" 
                date-disabled="isDisabledDate(date, mode)">
            </datetimepicker>
            <label class='control-label'>Price</label>
            <input ng-model="appointment.price" type="number" placeholder="price" class='form-control'>

            <button class='btn btn-primary' ng-click="create(appointment)" style='margin-top: 25px'>Generate appointment</button>
        </div>
    </div>
    <div class='row'>
        <div class="col-xs-12" ng-show="generated_link" style='margin-top: 25px'>
                <label class="control-label">Generated link</label>
                <input type="text" readonly="readonly" value="{{ generated_link }}" class='form-control'>
            <div class="row">{{message}}</div>
        </div>
    </div>
</div>

Answer 1

摘自我的评论：

确保在您的应用程序中包含 ui.bootstrap 依赖项，以及包含指令本身的 html 模板的 ui-bootstrap-tpls.js 文件。

Angular Datetimepicker: 指令模板 'uibTimepicker' 必须只有一个根元素

Angular Datetimepicker: Template for directive 'uibTimepicker' must have exactly one root element

html

javascript

datetimepicker

angularjs