<div class="umb-editor umb-datepicker" ng-controller="Umbraco.PropertyEditors.DatepickerController">
    <ng-form name="datePickerForm">
        <div class="input-append date datepicker" style="position: relative;" id="datepicker{{model.alias}}">
            
            <input name="datepicker" data-format="{{model.config.format}}" id="{{model.alias}}" type="text"
                   ng-model="datetimePickerValue"
                   ng-required="model.validation.mandatory"
                   val-server="value"
                   class="datepickerinput" />

            <span class="add-on">
                <i class="icon-calendar"></i>
            </span>
            
        </div>

        <span class="help-inline" val-msg-for="datepicker" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
        <span class="help-inline" val-msg-for="datepicker" val-toggle-msg="valServer">{{datePickerForm.datepicker.errorMsg}}</span>
        <span class="help-inline" val-msg-for="datepicker" val-toggle-msg="pickerError"><localize key="validation_invalidDate">Invalid date</localize></span>
        
        <p ng-if="model.config.offsetTime === '1' && serverTimeNeedsOffsetting && model.value" class="muted">
            <small><localize key="content_scheduledPublishServerTime">This translates to the following time on the server:</localize> {{serverTime}}</small><br/>
            <small><localize key="content_scheduledPublishDocumentation">What does this mean?</localize></small>
        </p>
        <p ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
            <a href ng-click="clearDate()"><i class="icon-delete"></i><small><localize key="content_removeDate">Clear date</localize></small></a>
        </p>
         
    </ng-form>
</div>
