<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Angular Bootstrap - Date Time Picker Demo</title>
    <base href="..">

    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="src/css/datetimepicker.css">
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="node_modules/angular/angular.js"></script>
    <script type="text/javascript" src="node_modules/moment/moment.js"></script>
    <script type="text/javascript" src="node_modules/moment/locale/de.js"></script>
    <script type="text/javascript" src="node_modules/moment/locale/zh-cn.js"></script>
    <script type="text/javascript" src="demo/demo-app.js"></script>
    <script type="text/javascript" src="demo/demo-controller.js"></script>
    <script type="text/javascript" src="src/js/datetimepicker.js"></script>
    <script type="text/javascript" src="src/js/datetimepicker.templates.js"></script>
    <script type="text/javascript" src="node_modules/angular-date-time-input/src/dateTimeInput.js"></script>
    <style>
        .datetimepicker {
            width: 400px;
        }
    </style>
</head>
<body data-ng-app="demo">
<div class="container" data-ng-controller="demoController">


    <ul class="nav nav-pills">
        <li data-ng-class="{active: getLocale() === 'en'}"><a data-ng-click="setLocale('en')">English</a></li>
        <li data-ng-class="{active: getLocale() === 'de'}"><a data-ng-click="setLocale('de')">German</a></li>
        <li data-ng-class="{active: getLocale() === 'zh-cn'}"><a data-ng-click="setLocale('zh-cn')">Chinese</a></li>
    </ul>

    <div class="row">
        <div class="col-sm-6">
            <h3>Drop-down Datetime with input box</h3>
            <h4>No formatting</h4>

            <p>Notice that you cannot enter a date with the keyboard.</p>

            <p><code>dropdownSelector: '#dropdown1'</code> to toggle the dropdown.</p>

            <div class="well">
                <p>Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}</p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group">
                            <input type="text" class="form-control" data-ng-model="data.dateDropDownInputNoFormatting">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="data.dateDropDownInputNoFormatting"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }"></datetimepicker>
                    </ul>
                </div>
            </div>


        </div>
        <div class="col-sm-6">
            <h3>Drop-down Datetime with input box</h3>
            <h4>Localized formatting using <a href="https://github.com/dalelotts/angular-date-time-input"><code>angular-date-time-input</code></a>
                directive</h4>

            <p>Notice that you CAN enter a date with the keyboard.</p>

            <p><code>dropdownSelector: '#dropdown2'</code> to toggle the dropdown.</p>

            <div class="well">
                <p>Formatted Date: {{ data.dateDropDownInput | date:'medium' }}</p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group">
                            <input type="text" class="form-control" data-ng-model="data.dateDropDownInput"
                                   data-date-time-input="YYYY-MM-DD HH:mm a">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="data.dateDropDownInput"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <h3>Drop-down Datetime with input box</h3>

            <p>Default configuration</p>

            <p><code>data-on-set-time='inputOnTimeSet()'</code> to toggle the dropdown.</p>

            <div class="well">
                <p>Formatted Date: {{ data.inputOnTimeSet | date:'medium' }}</p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="dropdown3" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group">
                            <input type="text" class="form-control" data-ng-model="data.inputOnTimeSet">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="data.inputOnTimeSet"
                                        data-on-set-time="inputOnTimeSet(newDate)"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <h3>Drop-down Datetime form integration</h3>

            <p><code>dropdownSelector: '#dropdown4'</code> to toggle the dropdown.</p>

            <p>This example shows a date picker that has the required attribute.
                Note that the user must type into the input to toggle dirty/pristine. </p>

            <div class="well">
                <form name="datePickerWithInputForm" novalidate>
                    <p>Formatted Date: {{ data.dateDropDownWithInput | date:'yyyy-MM-dd h:mm a' }}</p>

                    <p>
                        <span class="label label-warning"
                              data-ng-show="datePickerWithInputForm.formDateValue.$dirty">dirty</span>
                        <span class="label label-info"
                              data-ng-show="datePickerWithInputForm.formDateValue.$pristine">pristine</span>
                        <span class="label label-success"
                              data-ng-show="datePickerWithInputForm.formDateValue.$valid">valid</span>
                        <span class="label label-danger"
                              data-ng-show="datePickerWithInputForm.formDateValue.$invalid">invalid</span>
                    </p>

                    <p>
                        <button type="button" class="btn btn-default" data-ng-click="data.dateDropDownWithInput = null">
                            Set to null
                        </button>
                    </p>

                    <div class="dropdown">
                        <a class="dropdown-toggle" id="dropdown4" role="button" data-toggle="dropdown" data-target="#"
                           href="#">
                            <div class="input-group">
                                <input type="text" class="form-control" name="formDateValue" data-ng-required="true"
                                       data-ng-model="data.dateDropDownWithInput">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                            <datetimepicker data-ng-model="data.dateDropDownWithInput"
                                            data-datetimepicker-config="{ dropdownSelector: '#dropdown4' }"></datetimepicker>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-sm-6">
            <h3>Drop-down using text link</h3>

            <p><code>dropdownSelector: '#dropdown5'</code> to toggle the dropdown.</p>

            <div class="well">
                <p>Formatted Date: {{ data.linkCalendar | date:'medium' }}</p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="dropdown5" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        Click here to show calendar
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="data.linkCalendar"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdown5' }"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <h3>Show / hide with check box</h3>

            <p><code>startView: 'day'</code> and <code>minuteStep: 15</code></p>

            <p><code>data-on-set-time='checkboxOnTimeSet()'</code> to toggle visibility.</p>

            <div class="well">
                <p>Formatted Date: {{ data.checkboxCalendar | date:'medium' }}</p>
                Click me to show/hide via ng-show: <input type="checkbox" data-ng-model="data.checked"><br/>
                <datetimepicker data-ng-model="data.checkboxCalendar" data-ng-show="data.checked"
                                data-datetimepicker-config="{ startView: 'day', minuteStep: 15 }"
                                data-on-set-time="checkboxOnTimeSet(newDate)"></datetimepicker>
            </div>
        </div>


    </div>

    <div class="row">
        <div class="col-sm-6">
            <h3>Embedded calendar</h3>

            <p>Default configuration</p>

            <div class="well">
                <p>Formatted Date: {{ data.embeddedYear | date:'yyyy-MM-dd h:mm a' }}</p>

                <datetimepicker data-ng-model="data.embeddedYear"></datetimepicker>
            </div>
        </div>

        <div class="col-sm-6">
            <h3>Embedded calendar form integration</h3>

            <p>This example shows a date picker that has the required attribute.
                Note that without an input, only validity is tracked by ngModel. </p>

            <div class="well">
                <form name="datePickerForm" novalidate>
                    <p>Formatted Date: {{ data.formDate | date:'yyyy-MM-dd h:mm a' }}</p>

                    <p>
                        <span class="label label-warning"
                              data-ng-show="datePickerForm.formDateValue.$dirty">dirty</span>
                        <span class="label label-info"
                              data-ng-show="datePickerForm.formDateValue.$pristine">pristine</span>
                        <span class="label label-success"
                              data-ng-show="datePickerForm.formDateValue.$valid">valid</span>
                        <span class="label label-danger"
                              data-ng-show="datePickerForm.formDateValue.$invalid">invalid</span>
                    </p>

                    <button type="button" class="btn btn-default" data-ng-click="data.formDate = null">Set to null
                    </button>
                    <datetimepicker data-ng-model="data.formDate" data-ng-required="true"
                                    name="formDateValue"></datetimepicker>
                </form>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-6">
            <h3>Embedded calendar with property configuration</h3>

            <p><code>data-datetimepicker-config="config.datetimePicker"</code></p>

            <p>which returns <code>{ startView: 'year' }</code></p>

            <div class="well">
                <p>Formatted Date: {{ data.embeddedPropertyConfig | date:'yyyy-MM-dd h:mm a' }}</p>

                <datetimepicker data-ng-model="data.embeddedPropertyConfig"
                                data-datetimepicker-config="config.datetimePicker"></datetimepicker>
            </div>
        </div>
        <div class="col-sm-6">
            <h3>Embedded calendar with function configuration</h3>

            <p><code>data-datetimepicker-config="configFunction()"</code></p>

            <p>which returns <code>{ startView: 'month' }</code></p>

            <div class="well">
                <p>Formatted Date: {{ data.embeddedFunctionConfig | date:'yyyy-MM-dd h:mm a' }}</p>

                <datetimepicker data-ng-model="data.embeddedFunctionConfig"
                                data-datetimepicker-config="configFunction()"></datetimepicker>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6">
            <h3>ng-repeat with drop-down using text link</h3>

            <p><code>data-on-set-time="guardianOnSetTime($index, guardian, newDate, oldDate)"</code></p>

            <div class="well" data-ng-repeat="guardian in data.guardians">
                <p>{{ guardian.name }}</p>

                <p>DOB: {{ guardian.dob | date:'yyyy-MM-dd' }} </p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="guardian{{ $index }}" role="button" data-toggle="dropdown"
                       data-target="#"
                       href="#">
                        Click here to show calendar
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="guardian.dob"
                                        data-on-set-time="guardianOnSetTime($index, guardian, newDate, oldDate)"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <h3>Drop-down Datetime with restricted dates</h3>
            <h4>One date - somewhere near the middle of the display - is disabled on each view</h4>

            <p><code>dropdownSelector: '#dropdown6'</code> to toggle the dropdown.</p>

            <div class="well">
                <p>Formatted Date: {{ data.dateDropDownInputNoFormatting | date:'medium' }}</p>

                <div class="dropdown">
                    <a class="dropdown-toggle" id="dropdown6" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group">
                            <input type="text" class="form-control" data-ng-model="data.dateDropDownInputNoFormatting">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="data.dateDropDownInputNoFormatting"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdown6' }"
                                        data-before-render="beforeRender($dates)"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-6">
            <h3>Embedded calendar with configureOn</h3>
            <h4>Every time you click the button, the startView is changed</h4>

            <p><code>configureOn: 'config-changed'</code> to cause the directive to re-read its configuration.</p>

            <p>
                <button class="btn btn-default" data-ng-click="changeConfig()">Click me to change startView</button>
            </p>

            <div class="well">
                <p>Start View: {{ config.configureOnConfig.startView }}</p>

                <datetimepicker data-ng-model="data.configureOnDate"
                                data-datetimepicker-config="config.configureOnConfig"></datetimepicker>

            </div>
        </div>

        <div class="col-sm-6">
            <h3>Embedded calendar with renderOn</h3>
            <h4>Every time you click the button, the selectable attribute is toggled.</h4>

            <p><code>renderOn: 'valid-dates-changed'</code> to cause the directive to re-render.</p>

            <p>
                <button class="btn btn-default" data-ng-click="renderOnClick()">Click me to re-render</button>
            </p>

            <div class="well">

                <datetimepicker data-ng-model="data.renderOnDate"
                                data-before-render='renderOnBeforeRender($dates)'
                                data-datetimepicker-config="config.renderOnConfig"></datetimepicker>

            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6">
            <h3>Date range picker</h3>
            <h4>Every time you select a start date, dates before the start date are disabled in the end date.</h4>

            <p>This is a little more complex than the other examples.</p>
            <p><strong>Start Date:</strong> <code>renderOn: 'end-date-changed'</code> to cause the directive to re-render when the end date changes,
            and <code>data-on-set-time="startDateOnSetTime()"</code> to broadcast when the start date changes,
            and finally <code>data-before-render="beforeRenderStartDate($dates)"</code>
                to disable the dates after the selected end date.</p>

            <p><strong>End Date:</strong> <code>renderOn: 'start-date-changed'</code> to cause the directive to re-render when the start date changes,
                and <code>data-on-set-time="endDateOnSetTime()"</code> to broadcast when the end date changes,
                and finally <code>data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)"</code>
                to disable the dates before the selected start date.</p>

            <p>NB: It is possible that data coming from the server (or via a defect in the controller) that the start date is after the end date.
                To allow the user to get themselves out of this situation, your implementation might not disable any dates if the start date is greater than the end date.
            </p>

            <div class="well">
                <div class="dropdown form-group">
                    <label>Start Date</label>
                    <a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group date">
                            <input type="text" class="form-control" data-ng-model="dateRangeStart">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="dateRangeStart"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }"
                                        data-on-set-time="startDateOnSetTime()"
                                        data-before-render="startDateBeforeRender($dates)"></datetimepicker>
                    </ul>
                </div>

                <div class="dropdown form-group">
                    <label>End Date</label>
                    <a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
                       href="#">
                        <div class="input-group date">
                            <input type="text" class="form-control" data-ng-model="dateRangeEnd">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="dateRangeEnd"
                                        data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed' }"
                                        data-on-set-time="endDateOnSetTime()"
                                        data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
