JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Live Date Lite v1.08

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
essential essential is offline Offline Aug 12th, 2008, 12:01 pm |
0
A simple date picker with live 12/24hr clock, month/week names, 2/4 digits' year display and supported with configuration settings...
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
JavaScript / DHTML / AJAX Syntax
Toggle Plain Text
  1. <html>
  2. <head>
  3. <title>Live Date Lite v1.08</title>
  4. <script type="text/javascript">
  5. <!-- BEGIN HIDING
  6. /* By: essential -
  7. Title: Live Date Lite v1.08
  8. Supported with cofiguration settings. Save this as part of your .js files. */
  9. var show = new Boolean('true');
  10. var hide = null;
  11. var today = new Date();
  12. var cMonth = today.getMonth();
  13. var cDate = today.getDate();
  14. var cm = '';
  15. var date_separator = ' ';
  16. /*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  17. ////////CONFIGURATION/////////
  18. \\\\\\\\\\\SETTINGS\\\\\\\\\\\\
  19. ///////////////////////////////*/
  20. //Week Display -->
  21. var short_name = hide;
  22. //Month Display -->
  23. var short__name = hide;
  24. //Date Extention --> 
  25. var date_extention = show;
  26. //Setting this to show will-
  27. //convert all date items in numeric values.
  28. //Numeric Display -->
  29. var numeric_display = hide; 
  30. //12/24 Hour Format-->
  31. var twenty_four_hour = hide;
  32. Date.prototype.get_week_names = function( weekNames )
  33. { //--> WEEK NAMES <--\\
  34. var week_names = [ 'Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ];
  35. if ( weekNames )
  36. { 
  37.   return week_names[this.getDay()].substr( 0, 3 ); 
  38. }
  39. else
  40. {
  41.   return week_names[this.getDay()];
  42.   }
  43. } 
  44. Date.prototype.get_month_names = function( monthNames, numericMonth )
  45. { //--> MONTH NAMES <--\\
  46.   var month_names = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
  47. if ( numericMonth ) 
  48. { 
  49. cMonth = cMonth + 1;
  50. return cMonth = ( cMonth < 10 ? '0' : '' ) + cMonth; }
  51. if ( monthNames )
  52. { return month_names[this.getMonth()].substr( 0, 3 );
  53. }
  54. else 
  55. { return month_names[this.getMonth()];
  56.   }
  57. }
  58. Date.prototype.get_date = function( extended )
  59. { //--> DATE EXTENTION <--\\
  60.   var extention = ['', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st' ];
  61. cDate = ( cDate < 10 ? '0' : '' ) + cDate;
  62. if ( extended ) 
  63. {  
  64. return this.getDate() + extention[this.getDate()];
  65. }
  66. else
  67. { return cDate;
  68.   }
  69. }
  70. Date.prototype.get_year = function (numeric_year)
  71. { //--> TWO DIGITS <--\\
  72. if ( numeric_year ) 
  73. { var cYear = today.getYear();
  74.   cYear = cYear -100
  75. if ( cYear < 10 ) { return  cYear = '0' + cYear; } else { return cYear; }
  76. }
  77. else
  78. { return this.getFullYear();
  79.   }
  80. }
  81. Date.prototype.get_time = function(twenty_4)
  82. {
  83. var hour_12 = this.getHours();
  84. var hour_24 = this.getHours();
  85. var cMinute = this.getMinutes();
  86. var cSeconds = this.getSeconds();
  87. var ppoS = '';
  88. cMinute = ( cMinute < 10 ? '0' : '' ) + cMinute;
  89. cSeconds = ( cSeconds < 10 ? '0' : '' ) + cSeconds;
  90. apoS = ( hour_12 < 12 ) ? '.am ' : '.pm ';
  91. hour_12 = ( hour_12 > 12 ) ? hour_12 -12 : hour_12;
  92. hour_12 = ( hour_12 == 0 ) ? 12 : hour_12;
  93. hour_12 = ( hour_12 < 10 ? '0' : '' ) + hour_12;
  94. ppoS = ( hour_24 > 0 && hour_24 < 12 ) ? '.am\' ' : '.pm" ';
  95. if ( hour_24 >= 13 ) ppoS = '';
  96. hour_24 = ( hour_24 < 10 ? '0' : '' ) + hour_24;
  97. var hr12 = hour_12 + ':' + cMinute + ':' + cSeconds + apoS.fontcolor('#B42600');
  98. var hr24 = hour_24 + ':' + cMinute + ':' + cSeconds + ppoS.fontcolor('#B42600');
  99. if ( twenty_4 )
  100. { 
  101. return hr24 
  102. }
  103. else
  104. { 
  105. return hr12
  106.   }
  107. }
  108. function live_date()
  109. { var now = new Date(); 
  110.       var week = now.get_week_names(short_name)
  111.       var month = now.get_month_names( short__name, numeric_display);
  112.       var date = now.get_date(date_extention);
  113.       var year = now.get_year(numeric_display);
  114.       var time = now.get_time(twenty_four_hour);
  115. document.getElementById('clock').innerHTML = time;
  116. date_items.date_container.value = week + ' | ' + month + date_separator + date + cm + date_separator + year; 
  117. }
  118. cm = ( date_extention == null && numeric_display == null ) ? cm = ',' : cm;
  119. date_separator = ( numeric_display == true ) ? date_separator = '-' : date_separator;
  120. short__names = ( numeric_display == true ) ? short__names = hide : short__names; 
  121. date_extention = ( numeric_display == true ) ? date_extention = hide : date_extention;
  122. // DONE HIDING -->
  123. </script>
  124. <style type="text/css">
  125. <!--
  126. /* Live Date */
  127. * { margin: 0; padding: 0; }
  128. body { }
  129. #live { float: left; width: 270px; margin: 6px; padding: 2px; }
  130. #live fieldset { margin: 2px; padding: 2px; width: 262px; color: #36393D; font: 16px Arial; border: none; }
  131. #date_wrapper { margin: 0; padding: 1px; width: 240px; background: #000000; }
  132. #date_wrapper form {  margin: 0 2px 0 0; padding: 2px; height: 25px; width: 270px; background-color: #FFFFFF; color: #36393D; }
  133. #date_wrapper input { color: #36393D; background-color: #FFFFFF; height: 16px; text-align: center; margin-top: 4px; border: none; }
  134. #date_wrapper input[type=button] { background-color: #36393D; color: #CCE698; margin-top: 6px; }
  135. -->
  136. </style>
  137. </head>
  138. <body onLoad="setInterval('live_date()', 1000);">
  139. <div id="live">
  140. <fieldset>
  141. <legend>&nbsp;
  142. <div id="clock">&nbsp;</div>
  143. </legend>
  144. <div id="date_wrapper">
  145. <form name="date_items">&nbsp;&nbsp;<input name="date_container" type="text" size="28" />
  146. </form>
  147. </div>
  148. </fieldset>
  149. </div>
  150. </body>
  151. </html>
Code Snippet Comments
0
uringinteristi uringinteristi is offline Offline | Dec 28th, 2008
•
•
•
•
thank you
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser captchaformproblem cart child close codes column css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post problem programming prototype redirect safari scale scriptlets scroll search security select software sql toggle unicode variables w3c web website window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC