externschool.github.io/add_appointment.html at master · ExternSchool/externschool.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Форма попереднього запису для відвідувачів</title>
    <!--  jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

    <!-- Bootstrap Date-Picker Plugin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.uk.min.js" integrity="sha256-gJ+sB+muQyOKhTNx/XvtaXXkEr88FXSS3xMgtVR3V+E=" crossorigin="anonymous"></script>
    <meta charset="utf-8" />
</head>
<body>
<!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: white !important;} .asteriskField{color: red;}</style>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-2 col-lg-2">
                <p></p>
            </div>
            <div class="col-xs-10 col-sm-10 col-md-8 col-lg-8" style="background-color:ghostwhite">
                <div>
                    <h2>Попередній запис відвідувача</h2>
                </div>
                <form method="post">
                    <div class="form-group ">
                        <label class="control-label requiredField">
                            Записатися на:
                            <span class="asteriskField">
                                *
                            </span>
                        </label>
                        <div class="">
                            <div class="radio">
                                <label class="radio">
                                    <input name="radio" type="radio" value="Прийом до директора"/>
                                    Прийом до директора
                                </label>
                            </div>
                            <div class="radio">
                                <label class="radio">
                                    <input name="radio" type="radio" value="Прийом до заступника директора"/>
                                    Прийом до заступника директора
                                </label>
                            </div>
                            <div class="radio">
                                <label class="radio">
                                    <input name="radio" type="radio" value="Зустріч з психологом"/>
                                    Зустріч з психологом
                                </label>
                            </div>
                            <div class="radio">
                                <label class="radio">
                                    <input name="radio" type="radio" value="Консультацію до вчителя"/>
                                    Консультацію до вчителя
                                </label>
                            </div>
                            <div class="radio">
                                <label class="radio">
                                    <input name="radio" type="radio" value="Контрольну роботу"/>
                                    Контрольну роботу
                                </label>
                            </div>
                            <span class="help-block" id="hint_radio">
                                Оберіть один з наведених варіантів
                            </span>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label " for="select">
                            Прізвище, ім'я, по-батькові вчителя
                        </label>
                        <select class="select form-control" id="select" name="select">
                            <option value="Войтович Едуард Георгійович">
                                Войтович Едуард Георгійович
                            </option>
                            <option value="Стрельникова Світлана Миколаївна">
                                Стрельникова Світлана Миколаївна
                            </option>
                            <option value="Головня Таміла Олександрівна">
                                Головня Таміла Олександрівна
                            </option>
                            <option value="Фесюк Алла Костянтинівна">
                                Фесюк Алла Костянтинівна
                            </option>
                            <option value="Кучеренко Алла Василівна">
                                Кучеренко Алла Василівна
                            </option>
                        </select>
                    </div>
                    <div class="form-group ">
                        <label class="control-label " for="date">
                            Дата
                        </label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                Запис на:
                            </div>
                            <input class="form-control" id="date" name="date" placeholder="Число/Місяць/Рік" type="text"/>
                        </div>
                        <span class="help-block" id="hint_date">
                            Введіть дату у форматі ДД/ММ/РРРР, наприклад: 01/05/2018, або виберіть зі списка доступних
                        </span>
                    </div>

                    <div class="form-group" id="div_radio5">
                        <label class="control-label " for="radio5">
                            Виберіть час відвідування
                        </label>
                        <div class="">
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="09:00"/>
                                09:00
                            </label>
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="09:30"/>
                                09:30
                            </label>
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="10:00"/>
                                10:00
                            </label>
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="10:30"/>
                                10:30
                            </label>
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="11:00"/>
                                11:00
                            </label>
                            <label class="radio-inline">
                                <input name="radio5" type="radio" value="11:30"/>
                                11:30
                            </label>
                            <span class="help-block" id="hint_radio5">
                                часові проміжки виводяться для вибору після фільтрації відповідно встановленого працівником розкладу
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                            <a href="index.html" class="btn btn-info" role="button">
                                Назад
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-2 col-lg-2">
                <p></p>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        var options={
            format: 'dd/mm/yyyy',
            container: container,
            weekStart: 1,
            startDate: "01/09/2018",
            endDate: "30/05/2019",
            maxViewMode: 2,
            todayBtn: true,
            language: "uk",
            daysOfWeekDisabled: "0,3,4,6",
            daysOfWeekHighlighted: "1,2,5",
            todayHighlight: true,
            datesDisabled: ['04/09/2018', '14/09/2018'],
            autoclose: true
        };
        date_input.datepicker(options);
    })
</script>
</body>
</html>