четверг, 19 сентября 2013 г.

Всплывающий календарь с указанием даты и времени


Файл index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="style/default/index.css" rel="stylesheet" type="text/css">
    <script data-main="js/index.js" src="js/lib/require/require.js"></script>
<title>Календарь</title>
</head>
<body>
<div id="grid">

    <div id="sessions-start-time" class="calendar">
        <input class="calendar-input" type="text" size="19" name="session-time" value="12/02/2012 23:12:30" data-date="12.02.2012.23.12.30"><span class="calendar-button"><i class="calendar-icon"></i></span>
        <div class="calendar-datepicker hidden">
            <div class="calendar-datepicker-border-arrow"></div>
            <table class="period-selector">
                <tr>
                    <td class="prev-month"><div class="arrow left"></div></td>
                    <td class="select-month"><select>
                                                                        <option value="1" selected="selected">Январь</option>
                                                                        <option value="2">Февраль</option>
                                                                        <option value="3">Март</option>
                                                                        <option value="4">Апрель</option>
                                                                        <option value="5">Май</option>
                                                                        <option value="6">Июнь</option>
                                                                        <option value="7">Июль</option>
                                                                        <option value="8">Август</option>
                                                                        <option value="9">Сентябрь</option>
                                                                        <option value="10">Октябрь</option>
                                                                        <option value="11">Ноябрь</option>
                                                                        <option value="12">Декабрь</option>
                                                                    </select></th>
                    <td class="next-month"><div class="arrow right"></div></td>
                    <td class="prev-year"><div class="arrow left"></div></td>
                    <td class="select-year"><select>
                                                    <option value="2014">2014</option>
                                                    <option value="2013">2013</option>
                                                    <option value="2012" selected="selected">2012</option>
                                                    <option value="2011">2011</option>
                                                    <option value="2010">2010</option>
                                                    <option value="1970">1970</option>
                                                </select></th>
                    <td class="next-year"><div class="arrow right"></div></td>
                </tr>
            </table>
            <table class="day-selector">
                <thead>
                    <tr>
                        <th class="dow">Пн</th>
                        <th class="dow">Вт</th>
                        <th class="dow">Ср</th>
                        <th class="dow">Чт</th>
                        <th class="dow">Пт</th>
                        <th class="dow">Сб</th>
                        <th class="dow">Вс</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="day old">29</td>
                        <td class="day old">30</td>
                        <td class="day old">31</td>
                        <td class="day">1</td>
                        <td class="day">2</td>
                        <td class="day">3</td>
                        <td class="day">4</td>
                    </tr>
                    <tr>
                        <td class="day">5</td>
                        <td class="day">6</td>
                        <td class="day">7</td>
                        <td class="day">8</td>
                        <td class="day">9</td>
                        <td class="day">10</td>
                        <td class="day">11</td>
                    </tr>
                    <tr>
                        <td class="day active">12</td>
                        <td class="day">13</td>
                        <td class="day">14</td>
                        <td class="day">15</td>
                        <td class="day">16</td>
                        <td class="day">17</td>
                        <td class="day">18</td>
                    </tr>
                    <tr>
                        <td class="day">19</td>
                        <td class="day">20</td>
                        <td class="day">21</td>
                        <td class="day">22</td>
                        <td class="day">23</td>
                        <td class="day">24</td>
                        <td class="day">25</td>
                    </tr>
                    <tr>
                        <td class="day">26</td>
                        <td class="day">27</td>
                        <td class="day">28</td>
                        <td class="day">29</td>
                        <td class="day new">1</td>
                        <td class="day new">2</td>
                        <td class="day new">3</td>
                    </tr>
                    <tr>
                        <td class="day new">4</td>
                        <td class="day new">5</td>
                        <td class="day new">6</td>
                        <td class="day new">7</td>
                        <td class="day new">8</td>
                        <td class="day new">9</td>
                        <td class="day new">10</td>
                    </tr>
                </tbody>
            </table>
            <table class="time-selector">
                <tr>
                    <td>&nbsp;</td>
                    <td class="next-hour"><div class="arrow up"></div></td>
                    <td>&nbsp;</td>
                    <td class="next-minute"><div class="arrow up"></div></td>
                    <td>&nbsp;</td>
                    <td class="next-second"><div class="arrow up"></div></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><div class="clock"></div></td>
                    <td class="select-hour"><select>
                                <option value="0" selected="selected">00</option>
                                <option value="1">01</option>
                                <option value="2">02</option>
                                <option value="3">03</option>
                                <option value="4">04</option>
                                <option value="5">05</option>
                                <option value="6">06</option>
                                <option value="7">07</option>
                                <option value="8">08</option>
                                <option value="9">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select></td>
                    <td>ч</td>
                    <td class="select-minute"><select>
                        <option value="0" selected="selected">00</option>
                        <option value="1">01</option>
                        <option value="2">02</option>
                        <option value="3">03</option>
                        <option value="4">04</option>
                        <option value="5">05</option>
                        <option value="6">06</option>
                        <option value="7">07</option>
                        <option value="8">08</option>
                        <option value="9">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                        <option value="49">49</option>
                        <option value="50">50</option>
                        <option value="51">51</option>
                        <option value="52">52</option>
                        <option value="53">53</option>
                        <option value="54">54</option>
                        <option value="55">55</option>
                        <option value="56">56</option>
                        <option value="57">57</option>
                        <option value="58">58</option>
                        <option value="59">59</option>
                    </select></td>
                    <td>м</td>
                    <td class="select-second"><select>
                        <option value="0" selected="selected">00</option>
                        <option value="1">01</option>
                        <option value="2">02</option>
                        <option value="3">03</option>
                        <option value="4">04</option>
                        <option value="5">05</option>
                        <option value="6">06</option>
                        <option value="7">07</option>
                        <option value="8">08</option>
                        <option value="9">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        <option value="32">32</option>
                        <option value="33">33</option>
                        <option value="34">34</option>
                        <option value="35">35</option>
                        <option value="36">36</option>
                        <option value="37">37</option>
                        <option value="38">38</option>
                        <option value="39">39</option>
                        <option value="40">40</option>
                        <option value="41">41</option>
                        <option value="42">42</option>
                        <option value="43">43</option>
                        <option value="44">44</option>
                        <option value="45">45</option>
                        <option value="46">46</option>
                        <option value="47">47</option>
                        <option value="48">48</option>
                        <option value="49">49</option>
                        <option value="50">50</option>
                        <option value="51">51</option>
                        <option value="52">52</option>
                        <option value="53">53</option>
                        <option value="54">54</option>
                        <option value="55">55</option>
                        <option value="56">56</option>
                        <option value="57">57</option>
                        <option value="58">58</option>
                        <option value="59">59</option>
                    </select></td>
                    <td>с</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="prev-hour"><div class="arrow down"></div></td>
                    <td>&nbsp;</td>
                    <td class="prev-minute"><div class="arrow down"></div></td>
                    <td>&nbsp;</td>
                    <td class="prev-second"><div class="arrow down"></div></td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="now" colspan="7">Сейчас</td>
                </tr>
            </table>
        </div>
    </div>
   
</div>
</body>
</html>

Файл index.css

/******************************************************************\
  Reset CSS
\******************************************************************/

html {
    font-size: 100.01%;  /* Bug fix for Opera */
}

body {
    width: 1000px;
    position: relative; /* Bug fix for IE 6 */
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    background-color: #ffffff;
    color: #333333;
}

div,h1,h2,h3,h4,h5,h6,p,img,ol,ul,li,table,th,td,form,select,fieldset {
    margin: 0;
    padding: 0;
    text-align: left;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol,ul {
    list-style: none;
}

table {
    border: 0px; /* border="0" */
    border-collapse: collapse; /* cellspacing="0" */
}

table tr th {
    padding: 0px; /* cellpadding="0" */
}

table tr td {
padding: 0px; /* cellpadding="0" */
}

input,textarea,select {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    color: #333333;
}

textarea {
    resize: none;
}

a img {
    border: none;
}

a {
    color: #333333;
    text-decoration: underline;
}

a:link {
    color: #333333;
    text-decoration: underline;
}

a:visited {
    color: #333333;
    text-decoration: underline;
}

a:hover {
    color: #333333;
    text-decoration: none;
}

a:active {
    color: #333333;
    text-decoration: none;
}

a:active,a:focus,img {
    outline: 0; /* Firefox anchor border remove */
}

/*****************************************************************\
  Common classes
\*****************************************************************/

.hidden {
    display: none !important;
}

/******************************************************************\
  Grid
\******************************************************************/

 div#grid {
     font-size: 1.2em;
 }

/******************************************************************\
  Selectbox
\******************************************************************/

div.selectbox {
    position: relative;
    zoom: 1;
    display: inline-block;
    *display: inline;
    _display: inline;
    width: 100%;
    height: 20px;
    line-height: 20px;
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
    vertical-align: top;
    cursor: default;
}

div.selectbox div.selectbox-label {
    overflow: hidden;
    height: 20px;
    margin-right: 20px;
    text-indent: 5px;
}

div.selectbox div.selectbox-button {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    background: url(img/icons/selectbox.png) no-repeat 0 0;
}

div.selectbox ul.selectbox-dropbox {
    display: none;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    z-index: 100;
    width: 100%;
    max-height: 150px;
    _height: expression(this.scrollHeight > 150 ? '150px' : 'auto');
    line-height: 1.5em;
    margin-left: -1px;
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
}

div.selectbox ul.selectbox-dropbox li.selectbox-option {
    position: relative;
    display: block;
    padding: 1px 5px;
}

div.selectbox ul.selectbox-dropbox li.hover {
    background: #40c0c0;
    color: #ffffff;
}

/******************************************************************\
  Calendar
\******************************************************************/

div.calendar {
    position: relative;
    display: inline-block;
    *display: inline;
    _display: inline;
}

div.calendar input.calendar-input {
    display: inline-block;
    *display: inline;
    _display: inline;
    width: 150px;
    height: 20px;
    line-height: 20px;
    padding: 4px 6px;
    border: 1px solid #cccccc;
    font-size: 1.2em;
    vertical-align: top;
}

div.calendar span.calendar-button {
    display: inline-block;
    *display: inline;
    _display: inline;
    height: 20px;
    line-height: 20px;
    width: 16px;
    margin-left: -1px;
    padding: 4px 5px;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    vertical-align: top;
    font-size: 1.2em;
    text-align: center;
    cursor: pointer;
}

div.calendar span.calendar-button i.calendar-icon {
    display: block;
    width: 11px;
    height: 12px;
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    background: url(img/icons/calendar.gif) no-repeat 0 0;
}

div.calendar div.calendar-datepicker {
    position: absolute;
    margin-top: 6px;
    padding: 4px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    z-index: 1000;
}

div.calendar div.calendar-datepicker-border-arrow {
    width: 14px;
    height: 7px;
    margin-top: -11px;
    margin-left: auto;
    margin-right: auto;
    background: url(img/icons/border-arrow.gif) no-repeat 0 0;
}

div.calendar div.calendar-datepicker table {
    margin-top: 4px;
}

div.calendar div.calendar-datepicker table tr td select  {
    height: 20px;
    line-height: 20px;
    border: 1px solid #cccccc;
}

div.calendar div.selectbox {
    height: 18px;
    line-height: 18px;
}

div.calendar div.selectbox div.selectbox-label {
    height: 18px;
    margin-right: 5px;
    text-indent: 5px;
}

div.calendar div.selectbox div.selectbox-button {
    width: 17px;
    height: 18px;
    background: url(img/icons/selectbox-small.png) no-repeat 0 0;
}

div.calendar div.selectbox ul.selectbox-dropbox li.selectbox-option {
    padding: 1px 5px;
}

div.calendar div.calendar-datepicker table tr td.select-month select {
    width: 80px;
}

div.calendar div.calendar-datepicker table tr td.select-month div.selectbox {
    width: 80px;
}

div.calendar div.calendar-datepicker table tr td.select-month div.selectbox ul.selectbox-dropbox {
    width: 80px;
}

div.calendar div.calendar-datepicker table tr td.select-year select {
    width: 55px;
}

div.calendar div.calendar-datepicker table tr td.select-year div.selectbox {
    width: 55px;
}

div.calendar div.calendar-datepicker table tr td.select-year div.selectbox ul.selectbox-dropbox {
    width: 55px;
}

div.calendar div.calendar-datepicker table tr td.select-hour select,
div.calendar div.calendar-datepicker table tr td.select-minute select,
div.calendar div.calendar-datepicker table tr td.select-second select {
    width: 40px;
}

div.calendar div.calendar-datepicker table tr td.select-hour div.selectbox,
div.calendar div.calendar-datepicker table tr td.select-minute div.selectbox,
div.calendar div.calendar-datepicker table tr td.select-second div.selectbox {
    width: 40px;
}

div.calendar div.calendar-datepicker table tr td.select-hour div.selectbox ul.selectbox-dropbox,
div.calendar div.calendar-datepicker table tr td.select-minute div.selectbox ul.selectbox-dropbox,
div.calendar div.calendar-datepicker table tr td.select-second div.selectbox ul.selectbox-dropbox {
    width: 40px;
}

div.calendar div.calendar-datepicker table tr td div.arrow {
    width: 10px;
    height: 10px;
    background: url(img/icons/arrows.gif) no-repeat;
}

div.calendar div.calendar-datepicker table tr td div.left {
    background-position: 0px 0px;
}

div.calendar div.calendar-datepicker table tr td div.right {
    background-position: -10px 0px;
}

div.calendar div.calendar-datepicker table tr td div.up {
    background-position: -20px 0px;
}

div.calendar div.calendar-datepicker table tr td div.down {
    background-position: -30px 0px;
}

div.calendar div.calendar-datepicker table tr td div.clock {
    width: 12px;
    height: 12px;
    background: url(img/icons/clock.gif) no-repeat 0px 0px;
}

div.calendar div.calendar-datepicker table.period-selector tr td {
    width: 20px;
    height: 20px;
    padding: 4px 5px;
    text-align: center;
}

div.calendar div.calendar-datepicker table.period-selector tr td.prev-month,
div.calendar div.calendar-datepicker table.period-selector tr td.next-month,
div.calendar div.calendar-datepicker table.period-selector tr td.prev-year,
div.calendar div.calendar-datepicker table.period-selector tr td.next-year {
    cursor: pointer;
}

div.calendar div.calendar-datepicker table.period-selector tr td.prev-month:hover,
div.calendar div.calendar-datepicker table.period-selector tr td.next-month:hover,
div.calendar div.calendar-datepicker table.period-selector tr td.prev-year:hover,
div.calendar div.calendar-datepicker table.period-selector tr td.next-year:hover {
    background-color: #eeeeee;
}

div.calendar div.calendar-datepicker table.day-selector {
    margin-left: auto;
    margin-right: auto;
}

div.calendar div.calendar-datepicker table.day-selector tr th,
div.calendar div.calendar-datepicker table.day-selector tr td {
    width: 24px;
    height: 24px;
    padding: 4px 5px;
    text-align: center;
}

div.calendar div.calendar-datepicker table.day-selector tr td.day {
    cursor: pointer;
}

div.calendar div.calendar-datepicker table.day-selector tr td.day:hover {
    background-color: #eeeeee;
}

div.calendar div.calendar-datepicker table.day-selector tr td.old,
div.calendar div.calendar-datepicker table.day-selector tr td.new {
    color: #999999;
}

div.calendar div.calendar-datepicker table.day-selector tr td.active,
div.calendar div.calendar-datepicker table.day-selector tr td.active:hover {
    background-color: #40c0c0;
    color: #ffffff;
}

div.calendar div.calendar-datepicker table.time-selector tr td {
    width: 24px;
    height: 24px;
    padding: 4px 5px;
    text-align: center;
    font-weight: bold;
}

div.calendar div.calendar-datepicker table tr td.select-hour,
div.calendar div.calendar-datepicker table tr td.select-minute,
div.calendar div.calendar-datepicker table tr td.select-second {
    font-weight: normal;
}

div.calendar div.calendar-datepicker table.time-selector tr td.next-hour,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-hour,
div.calendar div.calendar-datepicker table.time-selector tr td.next-minute,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-minute,
div.calendar div.calendar-datepicker table.time-selector tr td.next-second,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-second,
div.calendar div.calendar-datepicker table.time-selector tr td.now {
    cursor: pointer;
}

div.calendar div.calendar-datepicker table.time-selector tr td.next-hour:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-hour:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.next-minute:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-minute:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.next-second:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.prev-second:hover,
div.calendar div.calendar-datepicker table.time-selector tr td.now:hover {
    background-color: #eeeeee;
}

div.calendar div.calendar-datepicker table.time-selector tr td div {
    margin-left: auto;
    margin-right: auto;
}

Файл index.js

require.config({
    paths: {
        jquery: 'lib/jquery/jquery'
    }
});

require(
    [
        'jquery'
    ]
    , function(
        $
    ) {
   
        // Всплывающий календарь
        function createCalendar (calendarId) {
       
            // Вспомогательные функции
            function isLeapYear (year) {
                return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
            }
           
            function getDaysInMonth (year, month) {
                return [31, (isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
            }
           
            function addLeadingZero (value) {
                return value < 10 ? '0' + value : value;
            }
           
            function removeLeadingZero (value) {
                return parseInt(value, 10);
            }
           
            function normalizeYear (year) {
                return year < 1000 ? year += 1900 : year;
            }
           
            function normalizeMonth (month) {
                return month + 1;
            }
           
            function getCurrentDate () {
                return new Date();
            }

            function getCurrentYear () {
                return normalizeYear(getCurrentDate().getYear());
            }

            function getCurrentMonth () {
                return normalizeMonth(getCurrentDate().getMonth());
            }

            function getCurrentDay () {
                return getCurrentDate().getDate();
            }
           
            function getCurrentHour () {
                return getCurrentDate().getHours();
            }
           
            function getCurrentMinute () {
                return getCurrentDate().getMinutes();
            }
           
            function getCurrentSecond () {
                return getCurrentDate().getSeconds();
            }

            function getNumberOfDayOfTheWeek (year, month, day) {
                var dayNumber = new Date(year, month - 1, day).getDay();
                return dayNumber === 0 ? dayNumber = 7 : dayNumber;
            }
           
            function createYearSelect (name, startYear, endYear) {
                var select = '<select name="' + name + '">'
                    , i;
                for (i = endYear; i >= startYear; i--) {
                    select += '<option value="' + i + '">' + i + '</option>';
                }
                select += '</select>'
                return select;
            }
           
            function createMonthSelect (name) {
                var select = '<select name="' + name + '">'
                    , months = [
                          'Январь', 'Февраль', 'Март'
                        , 'Апрель', 'Май', 'Июнь'
                        , 'Июль', 'Август', 'Сентябрь'
                        , 'Октябрь', 'Ноябрь', 'Декабрь'
                      ]
                    , len = months.length
                    , i;
                for (i = 0; i < len; i++) {
                    select += '<option value="' + (i+1) + '">' + months[i] + '</option>';
                }
                select += '</select>'
                return select;
            }

            function createTimeSelect (name, startTime, endTime) {
                var len = endTime - startTime
                    , select = '<select name="' + name + '">'
                    , i;
                for (i = 0; i <= len; i++) {
                    select += '<option value="' + i + '">' + addLeadingZero (i) + '</option>';
                }
                select += '</select>'
                return select;
            }
           
            // Изменение дизайна элемента <select>  
            function replaceStandartSelect (select) {

                var selectOptions = select.find('option')
                    , selectOptionsLength = selectOptions.length
                    , selectedOptionText = ''
                    , selectbox  = ''
                    , selectboxOptions = ''
                    , i;

                selectOptions.eq(0).prop('selected', true);

                for (i = 0; i < selectOptionsLength; i++) {
                    if (selectOptions.eq(i).is(':selected')) {
                        selectedOptionText = selectOptions.eq(i).text();
                    }
                    selectboxOptions += '<li class="selectbox-option">' + selectOptions.eq(i).text() + '</li>';
                }

                selectbox = '<div class="selectbox">'
                              + '<div class="selectbox-label">' + selectedOptionText + '</div>'
                              + '<div class="selectbox-button"></div>'
                              + '<ul class="selectbox-dropbox">'
                              + selectboxOptions
                              + '</ul>'
                              + '</div>';

                select.hide();

                selectbox = $(selectbox);
               
                selectbox.insertAfter(select);

                selectbox.find('.selectbox-label, .selectbox-button').click(function(event){
                    event.stopPropagation();
                    if (selectbox.find('.selectbox-dropbox').is(':visible')) {
                        selectbox.find('.selectbox-dropbox').hide();
                    } else {
                        selectbox.find('.selectbox-dropbox').show();
                    }
                });

                selectbox.find('.selectbox-option').hover(function(){
                    selectbox.find('.selectbox-option').removeClass('hover');
                    $(this).addClass('hover');
                });

                selectbox.find('.selectbox-dropbox .selectbox-option').click(function(event){
                    event.stopPropagation();
                    selectOptions.removeAttr('selected');
                    selectOptions.eq($(this).index()).attr('selected', true);
                    selectbox.find('.selectbox-label').text($(this).text());
                    selectbox.find('.selectbox-dropbox').hide();
                    // Установить дату и время
                    if (selectbox.parent().hasClass('select-month')) {
                        selectedMonth = $(this).index() + 1;
                        $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                        selectedDay = 1;
                        renderDays();
                        $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                        updateInputValue();
                    } else if (selectbox.parent().hasClass('select-year')) {
                        selectedYear = parseInt($(this).text(), 10);
                        $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                        selectedDay = 1;
                        renderDays();
                        $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                        updateInputValue();
                    } else if (selectbox.parent().hasClass('select-hour')) {
                        selectedHour = parseInt($(this).text(), 10);
                        updateInputValue();
                    } else if (selectbox.parent().hasClass('select-minute')) {
                        selectedMinute = parseInt($(this).text(), 10);
                        updateInputValue();
                    } else if (selectbox.parent().hasClass('select-second')) {
                        selectedSecond = parseInt($(this).text(), 10);
                        updateInputValue();
                    }
                });

            }

            // Переменные, хранящие текущую выбранную дату и время
            var selectedYear = getCurrentYear()
                , selectedMonth = getCurrentMonth()
                , selectedDay = getCurrentDay()
                , selectedHour = getCurrentHour()
                , selectedMinute = getCurrentMinute()
                , selectedSecond = getCurrentSecond();
               
            // Одноразовая запись первоначальных значений текущей даты и времени после загрузки страницы
            updateInputValue();
           
            // Функция обновления данных в input и data-date          
            function updateInputValue () {
                var value = addLeadingZero(selectedDay) + '/'
                              + addLeadingZero(selectedMonth) + '/'
                                                     + selectedYear + ' '
                              + addLeadingZero(selectedHour) + ':'
                              + addLeadingZero(selectedMinute) + ':'
                              + addLeadingZero(selectedSecond)
                             
                    , date = addLeadingZero(selectedDay) + '.'
                             + addLeadingZero(selectedMonth) + '.'
                                                    + selectedYear + '.'
                             + addLeadingZero(selectedHour) + '.'
                             + addLeadingZero(selectedMinute) + '.'
                             + addLeadingZero(selectedSecond);
                   
                $('#' + calendarId + ' .calendar-input').val(value).data('date', date);
            }
           
            // Функция отрисовки всего календаря
            function renderCalendar () {
           
                var date = $('#' + calendarId + ' .calendar-input').data('date').split('.');
               
                selectedYear = removeLeadingZero(date[2]);
                selectedMonth = removeLeadingZero(date[1]);
                selectedDay = removeLeadingZero(date[0]);
                selectedHour = removeLeadingZero(date[3]);
                selectedMinute = removeLeadingZero(date[4]);
                selectedSecond = removeLeadingZero(date[5]);
               
                var calendar = '<div class="calendar-datepicker">'
                                  + '<div class="calendar-datepicker-border-arrow"></div>'
                                  + '<table class="period-selector">'
                                  + '<tr>'
                                  + '<td class="prev-month"><div class="arrow left"></div></td>'
                                  + '<td class="select-month">' + createMonthSelect ('months') + '</th>'
                                  + '<td class="next-month"><div class="arrow right"></div></td>'
                                  + '<td class="prev-year"><div class="arrow left"></div></td>'
                                  + '<td class="select-year">' + createYearSelect ('years', 1970, getCurrentYear() + 1) + '</th>'
                                  + '<td class="next-year"><div class="arrow right"></div></td>'
                                  + '</tr>'
                                  + '</table>'
                                  + '<table class="day-selector">'
                                  + '<thead>'
                                  + '<tr>'
                                  + '<th class="dow">Пн</th>'
                                  + '<th class="dow">Вт</th>'
                                  + '<th class="dow">Ср</th>'
                                  + '<th class="dow">Чт</th>'
                                  + '<th class="dow">Пт</th>'
                                  + '<th class="dow">Сб</th>'
                                  + '<th class="dow">Вс</th>'
                                  + '</tr>'
                                  + '</thead>'
                                  + '<tbody>'
                                  + '</tbody>'
                                  + '</table>'
                                  + '<table class="time-selector">'
                                  + '<tr>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="next-hour"><div class="arrow up"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="next-minute"><div class="arrow up"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="next-second"><div class="arrow up"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '</tr>'
                                  + '<tr>'
                                  + '<td><div class="clock"></div></td>'
                                  + '<td class="select-hour">' + createTimeSelect ('hours', 0, 23) + '</td>'
                                  + '<td>ч</td>'
                                  + '<td class="select-minute">' + createTimeSelect ('minutes', 0, 59) + '</td>'
                                  + '<td>м</td>'
                                  + '<td class="select-second">' + createTimeSelect ('seconds', 0, 59) + '</td>'
                                  + '<td>с</td>'
                                  + '</tr>'
                                  + '<tr>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="prev-hour"><div class="arrow down"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="prev-minute"><div class="arrow down"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '<td class="prev-second"><div class="arrow down"></div></td>'
                                  + '<td>&nbsp;</td>'
                                  + '</tr>'
                                  + '<tr>'
                                  + '<td class="now" colspan="7">Сейчас</td>'
                                  + '</tr>'
                                  + '</table>'
                                  + '</div>';

                $('#' + calendarId + ' .calendar-datepicker').replaceWith(calendar);
               
                renderDays();
                $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(selectedDay - 1).addClass('active');
               
                $('#' + calendarId + ' .select-month select option').eq(selectedMonth - 1).prop('selected', true);
                $('#' + calendarId + ' .select-year select option[value="' + selectedYear + '"]').prop('selected', true);
                $('#' + calendarId + ' .select-hour select option').eq(selectedHour).prop('selected', true);
                $('#' + calendarId + ' .select-minute select option').eq(selectedMinute).prop('selected', true);
                $('#' + calendarId + ' .select-second select option').eq(selectedSecond).prop('selected', true);
               
                replaceStandartSelect($('#' + calendarId + ' .select-month select'));
                replaceStandartSelect($('#' + calendarId + ' .select-year select'));
                replaceStandartSelect($('#' + calendarId + ' .select-hour select'));
                replaceStandartSelect($('#' + calendarId + ' .select-minute select'));
                replaceStandartSelect($('#' + calendarId + ' .select-second select'));
               
                $('#' + calendarId + ' .select-month .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-year .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-hour .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-minute .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-second .selectbox-option').removeClass('hover');
               
                $('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).addClass('hover');
                $('#' + calendarId + ' .select-year .selectbox-option:contains(' + selectedYear + ')').addClass('hover');
                $('#' + calendarId + ' .select-hour .selectbox-option').eq(selectedHour).addClass('hover');
                $('#' + calendarId + ' .select-minute .selectbox-option').eq(selectedMinute).addClass('hover');
                $('#' + calendarId + ' .select-second .selectbox-option').eq(selectedSecond).addClass('hover');
               
                $('#' + calendarId + ' .select-month .selectbox-label').text($('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).text());
                $('#' + calendarId + ' .select-year .selectbox-label').text(selectedYear);
                $('#' + calendarId + ' .select-hour .selectbox-label').text(addLeadingZero(selectedHour));
                $('#' + calendarId + ' .select-minute .selectbox-label').text(addLeadingZero(selectedMinute));
                $('#' + calendarId + ' .select-second .selectbox-label').text(addLeadingZero(selectedSecond));
               
                // Скрытие селектов при клике по календарю и блокирование закрытия календаря при клике по нему
                $('#' + calendarId + ' .calendar-datepicker').click(function(e){
                    $('#' + calendarId + ' .selectbox-dropbox').hide();
                    e.stopPropagation();
                });
               
                // Функции кликов по стрелкам календаря
                $('#' + calendarId + ' .prev-month').click(function(){
                    if (selectedMonth === 1) {
                        selectedMonth = 12;
                        selectedYear -= 1;
                    } else {
                        selectedMonth -= 1;
                    }
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    $('#' + calendarId + ' .select-month select option').eq(selectedMonth - 1).prop('selected', true);
                    $('#' + calendarId + ' .select-month .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).addClass('hover');
                    $('#' + calendarId + ' .select-month .selectbox-label').text($('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).text());
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .next-month').click(function(){
                    $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                    if (selectedMonth === 12) {
                        selectedMonth = 1;
                        selectedYear += 1;
                    } else {
                        selectedMonth += 1;
                    }
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    $('#' + calendarId + ' .select-month select option').eq(selectedMonth - 1).prop('selected', true);
                    $('#' + calendarId + ' .select-month .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).addClass('hover');
                    $('#' + calendarId + ' .select-month .selectbox-label').text($('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).text());
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .prev-year').click(function(){
                    if (selectedYear === 1970) {
                        selectedYear = 1970;
                    } else {
                        selectedYear -= 1;
                    }
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    $('#' + calendarId + ' .select-year select option[value="' + selectedYear + '"]').prop('selected', true);
                    $('#' + calendarId + ' .select-year .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-option:contains(' + selectedYear + ')').addClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-label').text(selectedYear);
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .next-year').click(function(){
                    if (selectedYear === getCurrentYear() + 1) {
                        selectedYear === getCurrentYear() + 1;
                    } else {
                        selectedYear += 1;
                    }
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    $('#' + calendarId + ' .select-year select option[value="' + selectedYear + '"]').prop('selected', true);
                    $('#' + calendarId + ' .select-year .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-option:contains(' + selectedYear + ')').addClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-label').text(selectedYear);
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .prev-hour').click(function(){
                    if (selectedHour === 0) {
                        selectedHour = 23;
                    } else {
                        selectedHour -= 1;
                    }
                    $('#' + calendarId + ' .select-hour select option').eq(selectedHour).prop('selected', true);
                    $('#' + calendarId + ' .select-hour .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-option').eq(selectedHour).addClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-label').text(addLeadingZero(selectedHour));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .next-hour').click(function(){
                    if (selectedHour === 23) {
                        selectedHour = 0;
                    } else {
                        selectedHour += 1;
                    }
                    $('#' + calendarId + ' .select-hour select option').eq(selectedHour).prop('selected', true);
                    $('#' + calendarId + ' .select-hour .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-option').eq(selectedHour).addClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-label').text(addLeadingZero(selectedHour));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .prev-minute').click(function(){
                    if (selectedMinute === 0) {
                        selectedMinute = 59;
                    } else {
                        selectedMinute -= 1;
                    }
                    $('#' + calendarId + ' .select-minute select option').eq(selectedMinute).prop('selected', true);
                    $('#' + calendarId + ' .select-minute .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-option').eq(selectedMinute).addClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-label').text(addLeadingZero(selectedMinute));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .next-minute').click(function(){
                    if (selectedMinute === 59) {
                        selectedMinute = 0;
                    } else {
                        selectedMinute += 1;
                    }
                    $('#' + calendarId + ' .select-minute select option').eq(selectedMinute).prop('selected', true);
                    $('#' + calendarId + ' .select-minute .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-option').eq(selectedMinute).addClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-label').text(addLeadingZero(selectedMinute));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .prev-second').click(function(){
                    if (selectedSecond === 0) {
                        selectedSecond = 59;
                    } else {
                        selectedSecond -= 1;
                    }
                    $('#' + calendarId + ' .select-second select option').eq(selectedSecond).prop('selected', true);
                    $('#' + calendarId + ' .select-second .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-option').eq(selectedSecond).addClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-label').text(addLeadingZero(selectedSecond));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .next-second').click(function(){
                    if (selectedSecond === 59) {
                        selectedSecond = 0;
                    } else {
                        selectedSecond += 1;
                    }
                    $('#' + calendarId + ' .select-second select option').eq(selectedSecond).prop('selected', true);
                    $('#' + calendarId + ' .select-second .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-option').eq(selectedSecond).addClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-label').text(addLeadingZero(selectedSecond));
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .now').click(function(){
                    selectedYear = getCurrentYear();
                    selectedMonth = getCurrentMonth();
                    selectedDay = getCurrentDay();
                    selectedHour = getCurrentHour();
                    selectedMinute = getCurrentMinute();
                    selectedSecond = getCurrentSecond();
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(selectedDay - 1).addClass('active');
                    $('#' + calendarId + ' .select-month select option').eq(selectedMonth - 1).prop('selected', true);
                    $('#' + calendarId + ' .select-year select option[value="' + selectedYear + '"]').prop('selected', true);
                    $('#' + calendarId + ' .select-hour select option').eq(selectedHour).prop('selected', true);
                    $('#' + calendarId + ' .select-minute select option').eq(selectedMinute).prop('selected', true);
                    $('#' + calendarId + ' .select-second select option').eq(selectedSecond).prop('selected', true);

                    $('#' + calendarId + ' .select-month .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-option').removeClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-option').removeClass('hover');
                   
                    $('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).addClass('hover');
                    $('#' + calendarId + ' .select-year .selectbox-option:contains(' + selectedYear + ')').addClass('hover');
                    $('#' + calendarId + ' .select-hour .selectbox-option').eq(selectedHour).addClass('hover');
                    $('#' + calendarId + ' .select-minute .selectbox-option').eq(selectedMinute).addClass('hover');
                    $('#' + calendarId + ' .select-second .selectbox-option').eq(selectedSecond).addClass('hover');
                   
                    $('#' + calendarId + ' .select-month .selectbox-label').text($('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).text());
                    $('#' + calendarId + ' .select-year .selectbox-label').text(selectedYear);
                    $('#' + calendarId + ' .select-hour .selectbox-label').text(addLeadingZero(selectedHour));
                    $('#' + calendarId + ' .select-minute .selectbox-label').text(addLeadingZero(selectedMinute));
                    $('#' + calendarId + ' .select-second .selectbox-label').text(addLeadingZero(selectedSecond));

                    updateInputValue();
                });
               
                // Функции изменения значений селектов календаря
                $('#' + calendarId + ' .select-month select').change(function(){
                    selectedMonth = parseInt($(this).find('option:selected').val(), 10);
                    $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .select-year select').change(function(){
                    selectedYear = parseInt($(this).find('option:selected').val(), 10);
                    $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                    selectedDay = 1;
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(0).addClass('active');
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .select-hour select').change(function(){
                    selectedHour = parseInt($(this).find('option:selected').val(), 10);
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .select-minute select').change(function(){
                    selectedMinute = parseInt($(this).find('option:selected').val(), 10);
                    updateInputValue();
                });
               
                $('#' + calendarId + ' .select-second select').change(function(){
                    selectedSecond = parseInt($(this).find('option:selected').val(), 10);
                    updateInputValue();
                });
               
            }
           
            // Одноразовая отрисовка и скрытие календаря после загрузки страницы
            renderCalendar();
            $('#' + calendarId + ' .calendar-datepicker').addClass('hidden');
           
            // Функция отрисовки дней календаря
            function renderDays () {
           
                // Получение значений предыдущего, следующего месяца и года относительно текущей выбранной даты
                var previousMonth = selectedMonth
                    , nextMonth = selectedMonth
                    , previousMonthYear = selectedYear
                    , nextMonthYear = selectedYear;
               
                if (selectedMonth === 12) {
                    previousMonth -= 1;
                    nextMonth = 1;
                    nextMonthYear += 1;
                } else if (selectedMonth === 1) {
                    previousMonth = 12;
                    nextMonth += 1;
                    previousMonthYear -= 1;
                } else {
                    previousMonth -= 1;
                    nextMonth += 1;
                }
               
                // Получение числа дней в предыдущем и текущем месяце
                var daysInPreviousMonth = getDaysInMonth(previousMonthYear, previousMonth)
                    , daysInSelectedMonth = getDaysInMonth(selectedYear, selectedMonth);
               
                // Общее число ячеек в таблице дней календаря и общее число дней в неделе
                var totalDayCells = 42
                    , daysInTheWeek = 7;

                // Определение числа дней в календаре, стоящих перед днями текущего месяца, по порядковому номеру последнего дня в последней неделе
                var daysNumberForPreviousMonth = getNumberOfDayOfTheWeek(previousMonthYear, previousMonth, daysInPreviousMonth);
               
                // Определение числа дней в календаре, стоящих после дней текущего месяца
                var daysNumberForNextMonth = totalDayCells - daysInSelectedMonth - daysNumberForPreviousMonth;

                // Создание таблицы дней для календаря
                var i
                    , daysArray = [];

                for (i = daysNumberForPreviousMonth; i > 0; i--, daysInPreviousMonth--) {
                    daysArray.push('<td class="day old">' + daysInPreviousMonth + '</td>');
                }
               
                daysArray.reverse();
               
                for (i = 1; i <= daysInSelectedMonth; i++) {
                    daysArray.push('<td class="day">' + i + '</td>');
                }
               
                for (i = 1; i <= daysNumberForNextMonth; i++) {
                    daysArray.push('<td class="day new">' + i + '</td>');
                }
               
                var days = '<tbody>'
               
                var tableRowsNumber = Math.round(totalDayCells / daysInTheWeek);

                var j
                    , cellCounterStart = 0
                    , cellCounterStop = daysInTheWeek
                    , row = '';

                for (i = 0; i < tableRowsNumber; i++) {
                    for (j = cellCounterStart; j < cellCounterStop; j++) {
                        row += daysArray[j];
                    }
                    days += '<tr>' + row + '</tr>';
                    row = '';
                    cellCounterStart = j;
                    cellCounterStop = j + daysInTheWeek;
                }
               
                days += '</tbody>';
               
                // Вставка дней в календарь
                $('#' + calendarId + ' .day-selector tbody').replaceWith(days);
               
                // Навешивание функции кликов по дням календаря. Функция определена ниже
                $('#' + calendarId + ' .day').click(dayClick);
             
            }
           
            // Функция кликов по дням календаря. Вызывается выше во время отрисовки дней календаря
            // Выделено в отдельную функцию, чтобы срабатывали клики на днях при использовании кода $(document).on('click', function(){...});
            // написанного ниже
            function dayClick () {
                var day = $(this);
                selectedDay = parseInt(day.text(), 10);
                if (day.hasClass('old')) {
                    if (selectedMonth === 1) {
                        selectedMonth = 12;
                        if (selectedYear === 1970) {
                            selectedYear = 1970;
                        } else {
                            selectedYear -= 1;
                        }
                    } else {
                        selectedMonth -= 1;
                    }
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(selectedDay - 1).addClass('active');
                } else if (day.hasClass('new')) {
                    if (selectedMonth === 12) {
                        selectedMonth = 1;
                        if (selectedYear === getCurrentYear() + 1) {
                            selectedYear === getCurrentYear() + 1;
                        } else {
                            selectedYear += 1;
                        }
                    } else {
                        selectedMonth += 1;
                    }
                    renderDays();
                    $('#' + calendarId + ' .day-selector tr td.day').not('.old').not('.new').eq(selectedDay - 1).addClass('active');
                } else {
                    $('#' + calendarId + ' .day-selector tr td').removeClass('active');
                    day.addClass('active');
                }
                $('#' + calendarId + ' .select-month select option').eq(selectedMonth - 1).prop('selected', true);
                $('#' + calendarId + ' .select-year select option[value="' + selectedYear + '"]').prop('selected', true);
               
                $('#' + calendarId + ' .select-month .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).addClass('hover');
                $('#' + calendarId + ' .select-month .selectbox-label').text($('#' + calendarId + ' .select-month .selectbox-option').eq(selectedMonth - 1).text());

                $('#' + calendarId + ' .select-year .selectbox-option').removeClass('hover');
                $('#' + calendarId + ' .select-year .selectbox-option:contains(' + selectedYear + ')').addClass('hover');
                $('#' + calendarId + ' .select-year .selectbox-label').text(selectedYear);
               
                updateInputValue();
            }

            // Функции показа и скрытия календаря
            $('#' + calendarId + ' .calendar-button').click(function(e){
                var calendar = $(this).next();
                if (calendar.hasClass('hidden')) {
                    calendar.removeClass('hidden');
                    renderCalendar();
                } else {
                    calendar.addClass('hidden');
                }
                $('#' + calendarId + ' .selectbox-dropbox').hide();
                e.stopPropagation();
            });

            $(document).on('click', function(){
                var calendar = $('#' + calendarId + ' .calendar-datepicker');
                if (!calendar.hasClass('hidden')) {
                    calendar.addClass('hidden');
                }
                $('#' + calendarId + ' .selectbox-dropbox').hide();
            });
           
            // Функции удаления символов, недопустимых при вводе даты в поле input календаря
           
            // Удаление всех символов из времени начала сессии кроме цифр, пробела, символов "/", ":"
            // и замена значения даты, если данные введены правильно
            $('#' + calendarId + ' .calendar-input').keyup(function(){
                deleteNotDateSymbols(this);
                replaceDataDate(this);
            }).change(function(){
                deleteNotDateSymbols(this);
                replaceDataDate(this);
            });

            // Удаление всех символов, кроме цифр, пробела, символов / и :
            function deleteNotDateSymbols (input) {
                var value = $(input).val();
                value = value.replace(/[^0-9\s\/:]/gi, '');
                value = $.trim(value);
                $(input).val(value);
            }

            // Замена значения даты, если данные введены в правильном формате
            function replaceDataDate (input) {
                var value = $(input).val()
                    , date
                    , day
                    , month
                    , year
                    , hour
                    , minute
                    , second;
               
                if ( value.length === 19 && (/(\d{2}\/\d{2}\/\d{4}\s\d{2}:\d{2}:\d{2}){1}/gi).test(value) ) {
                    value = value.replace(/[\s\/:]/gi, '.');
                    date = value.split('.');
                    day = removeLeadingZero(date[0]);
                    month = removeLeadingZero(date[1]);
                    year = removeLeadingZero(date[2]);
                    hour = removeLeadingZero(date[3]);
                    minute = removeLeadingZero(date[4]);
                    second = removeLeadingZero(date[5]);
                    if (
                              (day > 0 && day < getDaysInMonth(year, month) + 1)
                        && (month > 0 && month < 13)
                        && (year > 1969 && year < getCurrentYear() + 2)
                        && (hour > -1 && hour < 24)
                        && (minute > -1 && minute < 60)
                        && (second > -1 && second < 60)
                    ) {
                        $(input).data('date', value);
                    }
                }
            }
           
        }
           
        // Создание календаря для времени начала сессии
        createCalendar('sessions-start-time');    
       
    }

);

Комментариев нет:

Отправить комментарий