Question

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

我用Bower安装库，注入模块并复制/粘贴示例代码。

控制器：

// 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'的模板必须只有一个根元素

1 个答案: