2 * Provides functions for displaying and updating date/time element.
3 * Use following snippet to include component in your `index.html` file:
5 * <script type='text/javascript' src='./css/car/components/dateTime/dateTime.js'></script>
6 * <link rel="stylesheet" href="./css/car/components/dateTime/dateTime.css" />
8 * and following code to initialize:
10 * $("#clockElement").ClockPlugin('init',5); // initialize clockElement, timer interval is set as 5 seconds
11 * $("#clockElement").ClockPlugin('startTimer'); // start timer
21 * Contains actual time and date strings.
24 * @param {string} timeStr Holds actual time string.
25 * @param {string} dateStr Holds actual date string.
26 * @param {string} dayStr Holds actual day string.
28 Clock.prototype.status = {
35 * Listener for timer events.
36 * @method handleTimerEv
37 * @param clockSelector {string} Define clock selector in document.
38 * @param dateSelector {string} Define date selector in document.
40 Clock.prototype.handleTimerEv = function (clockSelector, dateSelector) {
42 var monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
43 var date = new Date();
44 var hour = date.getHours();
45 var minute = date.getMinutes();
46 var ampm = hour >= 12 ? 'PM' : 'AM';
49 hour = 12; // the hour '0' should be '12'
51 minute = minute < 10 ? '0' + minute : minute;
52 hour = hour < 10 ? '0' + hour : hour;
53 this.status.timeStr = hour + ":" + minute + " " + ampm;
54 this.status.dateStr = monthsShort[date.getMonth().toString()].toUpperCase() + " " + date.getDate().toString();
55 if (clockSelector !== null) {
56 $(clockSelector).empty();
57 $(clockSelector).append(this.status.timeStr);
59 if (dateSelector !== null) {
60 $(dateSelector).empty();
61 $(dateSelector).append(this.status.dateStr);
68 * Provides functions for dateTime JQuery Plugin panel.
74 * Holds ID for clock document element.
81 * Holds ID for date document element.
88 * Holds timer for clock actualization interval.
95 * Holds clock actualization interval in miliseconds.
96 * @property miliSeconds
102 * Holds Clock object after initialization.
109 * Provides initialization of dateTime plugin.
111 * @param seconds {int} Define clock actualization interval in seconds.
113 init: function (seconds) {
115 var appendText = '<div id="clock" class="clockElemnt fontSizeXXLarge fontColorDark fontWeightBold">TIME</div>';
116 appendText += '<div id="date" class="dateElemnt fontSizeXXLarge fontColorDark fontWeightBold">DATE</div>';
117 this.append(appendText);
118 ClockPlugin.clockDiv = "#clock";
119 ClockPlugin.dateDiv = "#date";
120 ClockPlugin.miliSeconds = seconds * 1000;
121 ClockPlugin.clockObj = new Clock();
122 ClockPlugin.clockObj.handleTimerEv(ClockPlugin.clockDiv, ClockPlugin.dateDiv);
125 * Provides initialization of clock actualization timer.
128 startTimer: function () {
129 ClockPlugin.timer = setInterval(function () {
130 ClockPlugin.clockObj.handleTimerEv(ClockPlugin.clockDiv, ClockPlugin.dateDiv);
131 }, ClockPlugin.miliSeconds);
134 * Provides clearing of clock actualization timer.
137 stopTimer: function () {
138 clearInterval(ClockPlugin.timer);
142 * jQuery extension method for {{#crossLink "ClockPlugin"}}{{/crossLink}} plugin.
143 * @param method {Object|jQuery selector} Identificator (name) of method or jQuery selector.
144 * @method ClockPlugin
146 * @return Result of called method.
148 $.fn.ClockPlugin = function (method) {
149 // Method calling logic
150 if (ClockPlugin[method]) {
151 return ClockPlugin[method].apply(this, Array.prototype.slice.call(arguments, 1));
152 } else if (typeof method === 'object' || !method) {
153 return ClockPlugin.init.apply(this, arguments);
155 $.error('Method ' + method + ' does not exist on jQuery.ClockPlugin');