pip-webui/pip-webui-controls/cordova/www/date_sample/date.html

HTML5 UI for LOB applications

<h2 class="text-title tm0 bm24">{{'DATE' | translate}}:</h2>
<pip-date  pip-time-mode="past" ng-model="specialDate" >
</pip-date>
<p class="text-body1 tm16 bm16"><strong>{{ 'VALUE' | translate }}:</strong> {{ specialDate || 'NULL'  }}</p>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date</strong>  pip-time-mode="past" ng-model="specialDate"&gt;
            &lt;/<strong>pip-date</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h3 class="text-subhead2">{{ 'DISABLED' | translate }} </h3>
<pip-date ng-model="specialDate" ng-disabled="true">
</pip-date>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date</strong>  ng-model="specialDate" ng-disabled="true"&gt;
            &lt;/<strong>pip-date</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h2 class="text-title tm24 bm24">{{ 'TIME_EDIT_TIME_VIEW' | translate }}:</h2>

<pip-time-edit pip-start-date="startDate" pip-end-date="endDate"></pip-time-edit>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-time-edit</strong> pip-start-date="startDate" pip-end-date="endDate"&gt;
            &lt;/<strong>pip-time-edit</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<pip-time-view pip-start-date="startDate" pip-end-date="endDate" pip-rebind="true"></pip-time-view>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-time-view</strong> pip-start-date="startDate" pip-end-date="endDate" pip-rebind="true"&gt;
            &lt;/<strong>pip-time-view</strong>&gt;
</pre>
<h3 class="text-subhead2">{{ 'DISABLED' | translate }}</h3>
<pip-time-edit pip-start-date="startDate" pip-end-date="endDate" ng-disabled="true"></pip-time-edit>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-time-edit</strong> pip-start-date="startDate" pip-end-date="endDate" ng-disabled="true"&gt;
            &lt;/<strong>pip-time-edit</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h2 class="text-title tm24 bm24">{{ 'DATE_RANGE' | translate }}:</h2>
<h3 class="text-subhead2">{{ 'DAILY' | translate }}: </h3>
<pip-date-range pip-date-range-type="daily" ng-model="daily"></pip-date-range>
<p class="text-body1 tm16 bm16"><strong>{{ 'VALUE' | translate }}:</strong> {{ daily }}</p>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date-range</strong> pip-date-range-type="daily" ng-model="daily"&gt;
            &lt;/<strong>pip-date-range</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h3 class="text-subhead2">{{ 'WEEKLY' | translate}}: </h3>
<pip-date-range pip-date-range-type="weekly" ng-model="weekly"></pip-date-range>
<p class="text-body1 tm16 bm16"><strong>{{ 'VALUE' | translate }}: </strong>{{ weekly }}</p>
<md-button ng-click="onNextWeek()">
    {{ 'NEXT_WEEK' | translate }}
</md-button>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date-range</strong> pip-date-range-type="weekly" ng-model="weekly"&gt;
            &lt;/<strong>pip-date-range</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h3 class="text-subhead2">{{ 'MONTHLY' | translate }}: </h3>
<pip-date-range pip-date-range-type="monthly" ng-model="monthly"></pip-date-range>
<p class="text-body1 tm16 bm16"><strong>{{ 'VALUE' | translate }}: </strong>{{ monthly }}</p>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date-range</strong> pip-date-range-type="monthly" ng-model="monthly"&gt;
            &lt;/<strong>pip-date-range</strong>&gt;
</pre>

<md-divider class="tm8 pip-list-divider"></md-divider>

<h3 class="text-subhead2">{{ 'YEARLY' | translate}}: </h3>
<pip-date-range pip-date-range-type="yearly" ng-model="yearly"></pip-date-range>
<p class="text-body1 tm16 bm16"><strong>{{ 'VALUE' | translate }}: </strong>{{ yearly }}</p>

<h3 class="text-subhead2">{{:: 'CODE' | translate}}</h3>
<pre class="text-body1 color-window-bg p16">
            &lt;<strong>pip-date-range</strong> pip-date-range-type="yearly" ng-model="yearly"&gt;
            &lt;/<strong>pip-date-range</strong>&gt;
</pre>