ste ste - 5 months ago 85
AngularJS Question

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

I'm trying to use this library to implement dateTimePicker in AngularJS: Angular-Datetimepicker

I install the library with Bower, injected the module and I copy/pasted the example code.

Controller:

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


View:

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


The problem is that the date field is empty and in the console I have those two errors:

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


UPDATE: this is the new html, I sourrounded the tag with a element:

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


The whole html of the form is the following:

<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

Taken from my comment:

Make sure to include the ui.bootstrap dependency in your application, as well as well as the ui-bootstrap-tpls.js file which includes the html templates for the directives themselves.