adm-dtp/src/ADM-dateTimePicker_view.html

Pure AngularJs Gregorian and Jalali smart dateTimePicker

<div class="ADMdtp ADMdtp-container" ng-class="{rtl: (calType=='jalali'), touch: option.isDeviceTouch, disable: disable}">
    <div class="clickOutContainer" click-out="closeCalendar()" alias="{{dtpId}}">
        <ng-transclude></ng-transclude> 
        <div ng-if="defaultTemplate" class="ADMdtpInput masterInput" ng-class="{touch: option.isDeviceTouch, disable: disable, open: showCalendarStat}">
            <input type="text" name="{{name}}" ng-model="dtpValue.formated" 
                ng-focus="openCalendar()" 
                ng-keyup="onKeydown($event)"
                ng-click="openCalendar()" 
                ng-required="ngRequired"
                ng-readonly="option.freezeInput || option.isDeviceTouch || disable" ng-blur="modelChanged()" >
            <div class="dtp-ig" ng-click="toggleCalendar()">
                <svg class="dtp-i fakeIcon" viewBox="0 0 24 24">
                    <use xlink:href="#dtp-i-right" />
                </svg>
                <svg class="dtp-i calendarIcon" viewBox="0 0 24 24">
                    <use xlink:href="#dtp-i-calendar" />
                </svg>
                <svg class="dtp-i closeIcon" viewBox="0 0 24 24">
                    <use xlink:href="#dtp-i-off" />
                </svg>
            </div>
            <svg class="removeIcon" viewBox="0 0 24 24" ng-if="dtpValue.formated" ng-click="destroy()">
                <use xlink:href="#dtp-i-close" />
            </svg>
        </div>
    </div>
    
    <svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <defs>
          <g id="dtp-i-calendar">
              <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/>
              <path d="M0 0h24v24H0z" fill="none"/>
          </g>
           <g id="dtp-i-clock">
               <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
               <path d="M0 0h24v24H0z" fill="none"/>
               <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
           </g>
           <g id="dtp-i-right">
               <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
               <path d="M0 0h24v24H0z" fill="none"/>
           </g>
           <g id="dtp-i-close">
               <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
               <path d="M0 0h24v24H0z" fill="none"/>
           </g>
           <g id="dtp-i-off">
               <path d="M0 0h24v24H0z" fill="none"/>
               <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
            </g>
        </defs>
    </svg> 
</div>