jQuery - DateTime picker

Je plug-in pre JavaScriptobvou knižnicu jQuery napísaný mnou pre Saixon softvér. tento plug-in je použitý ako SUI v projekte Saixon. Zdrojové kódy sú dostupné k stiahnutiu pod týmto článkom. Kód je šírený pod MIT licenciou.

implementácia:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input')[0].datetime();
});
</script>

user options

.datetime({
        // Default calendar date. For null, true = actual day, false = it ain't,
        // UNIX timestamp * 1000 (converted to ms), date in mm/dd/YYYY format
        date: null,
        // Default handler value. TRUE = calendar date, FALSE = ain't, custom value
        defaultValue: true,
        // Date-time format. Useable d, m, j, n, Y, S, y, H, G, g, a, A, i, F
        // Significance: PHP manuál  (http://php.net/manual/en/function.date.php)
        format: 'F jS Y @ g:i a',
        // Calendar's handler
        handler: this,
        // Close calendar after select
        closeOnSelect: false,
        // Close calendar after submit
        closeOnSubmit: true,
        // Allow time selection
        allowTime: true,
        // Allow toolbar with buttons
        toolbar: true,
        // Buttons on toolbar. Sortable, if you want.
        tc: { close: true, today: true, submit: true },
        // Buttons text
        tcNames: { close: "Close", today: "Today", submit: "Submit" },
        // Calendar's horizontal offset (not handler offset)
        offsetX: 2,
        // Calendar's vertical offset (not handler offset)
        offsetY: 2,
        // Time -> ante meridiem or post meridiem
        ante: { pm: "pm", am: "am" },
        // Names of days (full)
        dayNames: ["Monday", "Tuesday", "Wendsday", "Thursday", "Friday", "Saturday", "Sunday"],
        // Names of months (full)
        monthNames: ["January", "February", "March", "April", "May", "June", "July", "August",
                     "September", "October", "November", "December"],
        // Short day names
        dayShort: 3,
        // Short month names
        monthShort: 3,
        // Function called after selected
        selected: function(calendar) {
            // Your awesome code here
            // Variable 'calendar' contains calendar element
        }
    }
});

Celý kód plug-inu:

/*
 * jQuery DateTime picker plug-in by Drahomir Hanak
 * Is an open-source jQuery plug-in developed for the Saixon corporation. This source code
 * is licensed under the MIT license, and the plug-in is used as a Saixon user interface.
 * Plug-in was tested on jQuery 1.6. If you'd use it, have to let here the comments.
 * (c) 2011 Drahomír Hanák and the Saixon corporation
 *
 * Actual version: 0.9b
 * File name: saixon-ui-datetime.js
 * Public date: November 7th 2011
 * Documentation: English (http://projects.drahak.eu/sui-date-time-picker/)
 * Comments: English
 */

(function( $ ) {

  // Calendar render method
  var Calendar = new function() {

      /** Variables */
      this.cal = null;
      this.calTag = null;
      this.dd = {};
      this.mName = [];
      this.dName = [];
      this.settings = {};

      /** Initialize */
      this.init = function(settings)
      {
          this.settings = settings;
          this.calTag = '.dh_calendar';
          var useable = this.calTag.replace('.', '');
          $(this.settings.handler).after("<div class='"+useable+"'></div>");
          this.cal = $(this.calTag);
          this.dd = this.getDD(this.settings.date);
          this.mName = this.settings.monthNames;
          this.dName = this.settings.dayNames;
          this.cal.css({ display: 'none', marginLeft: this.settings.offsetX, marginTop: this.settings.offsetY });
          this.settings.closeHandler = this.settings.closeHandler == null || this.settings.closeHandler === true ? this.calTag + ' a.dh_close' : this.settings.closeHandler;
      };

      /** Number of days in month */
      this.daysInMonth = function(month, year)
      {
          var m = [31,28,31,30,31,30,31,31,30,31,30,31];
          if(month != 2) return m[month - 1];
          if(year%4 != 0) return m[1];
          if(year%100 == 0 && year%400 != 0) return m[1];
          return m[1] + 1;
      };

      /** Date info */
      this.getDD = function(dateTime)
      {
          var dd = { day: null, month: null, monthNum: null, year: null, daysInMonth: 0, ofWeek: null };
          var date = dateTime ? new Date(dateTime) : new Date();
          dd.day = date.getDate();
          dd.month = date.getMonth();
          dd.monthNum = date.getMonth()+1;
          dd.year = date.getFullYear();
          dd.daysInMonth = this.daysInMonth(dd.monthNum, dd.year);
          dd.ofWeek = this.settings.dayNames[0].substr(0, 3).toLowerCase() == "mon" ? (date.getDay()-1) : date.getDay();
          dd.inWeek = date.getDay();
          dd.serialNumber = this.getSerialNumber(dd.day);
          dd.hour = date.getHours() < 10 ? "0"+date.getHours() : date.getHours();
          dd.minute = date.getMinutes() < 10 ? "0"+date.getMinutes() : date.getMinutes();
          dd.second = date.getSeconds();
          return dd;
      };

      /** Render calendar date */
      this.renderDate = function()
      {
          Calendar.clear();
          var monthName = this.settings.monthNames[this.dd.month];
          var fd = new Date(this.dd.year, this.dd.month, 1);
          var skip = this.settings.dayNames[0].substr(0, 3).toLowerCase() == "mon" ? (fd.getDay()-1) : fd.getDay();
          var prepare = "";
          prepare += "<table>";
          prepare += "<tr>" +
                     " <th class='dateFormat dh_prev'><a href='javascript:;'>&lt;&lt;</a></th>" +
                     " <th class='dateFormat' colspan='5'>"+monthName+" "+this.dd.year+"</th>" +
                     " <th class='dateFormat dh_next'><a href='javascript:;'>&gt;&gt;</a></th>" +
                     "</tr><tr class='dh_days'>";
          for(var d = 1; d <= 7; d++) {
              prepare += "<th class='dh_day'>"+this.dName[d-1].substr(0, this.settings.dayShort)+"</th>";
          }
          prepare += "</tr>";
          var actualDay = 0;
          for(var columns = 1; columns <= 6; columns++) {
              prepare += "<tr>";
              for(var week = 1; week <= 7; week++) {
                  if(actualDay < this.dd.daysInMonth) {
                      if(columns > 1 || columns == 1 && week > skip) {
                          actualDay++;
                          activeClass = null;
                          if(this.getDD(null).year == this.dd.year && this.getDD(null).month == this.dd.month && actualDay == this.getDD(null).day) activeClass = 'active';
                          prepare += "<td><a href='javascript:;' class='dh_date "+activeClass+"'>"+(actualDay)+"</td>";
                      } else {
                          prepare += "<td class='dh_empty'></td>";
                      }
                  }
              }
              prepare += "</tr>";
          }
          prepare += "</tr>";
          prepare += "</tr></table>";
          this.cal.append(prepare);

          // toolbar
          this.toolbar();

          // User input
          $(this.settings.closeHandler).click(function(){ Calendar.clear(); Calendar.hide(); });
          $(this.calTag + ' .dh_prev').click(function(){ Calendar.previousMonth(); });
          $(this.calTag + ' .dh_next').click(function(){ Calendar.nextMonth(); });
          $(this.calTag + ' a.dh_date').click(function(){
              var append = Calendar.convert($(this).text(), Calendar.dd.month, Calendar.dd.year);
              if(!Calendar.settings.allowTime) {
                  Calendar.dd.day = $(this).text();
                  $(Calendar.settings.handler).val(append);
                  if(Calendar.settings.closeOnSelect) Calendar.hide();
                  Calendar.settings.selected(Calendar.cal);
              } else {
                  Calendar.dd.day = $(this).text();
                  $(Calendar.calTag + ' table').fadeOut(250, function() {
                      Calendar.renderTime(append);
                  });
              }
          });
      };

      /** Render calendar time */
      this.renderTime = function(date)
      {
          Calendar.clear();
          var prepare = "<table class='dh_time'><tr><th class='dateFormat'>"+date+"</th></tr>" +
                        "<tr><td class='timeInputs'>";
          prepare += "<input type='text' value='"+this.dd.hour+"' class='dh_hour' />:" +
                     "<input type='text' value='"+this.dd.minute+"' class='dh_minute' /></td></tr>" +
                     "</table>";
          this.cal.append(prepare);

          // toolbar
          this.toolbar();

          // User input
          $(this.calTag + ' .dateFormat').click(function(){
              Calendar.clear();
              Calendar.renderDate();
          });
          $(this.calTag + ' input.dh_hour').keyup(function() {
              if($(this).val().toString().length > 2) $(this).val($(this).val().substr(0, 2));
              if(parseInt($(this).val()) > 23) $(this).val(23);
              Calendar.dd.hour = Calendar.isInt($(this).val()) ? $(this).val() : "00";
              Calendar.dd.hour = parseInt(Calendar.dd.hour) < 10 && Calendar.dd.hour.toString().length == 1 ? "0"+Calendar.dd.hour : Calendar.dd.hour;
          });
          $(this.calTag + ' input.dh_minute').keyup(function() {
              if($(this).val().toString().length > 2) $(this).val($(this).val().substr(0, 2));
              if(parseInt($(this).val()) > 59) {
                  $(this).val(00);
                  var val = $(this.calTag + ' input.dh_hour').val();
                  if(parseInt(val) < 23)
                      $(this.calTag + ' input.dh_hour').val((val+1));
              }
              Calendar.dd.minute = Calendar.isInt($(this).val()) ? $(this).val() : "00";
              Calendar.dd.minute = parseInt(Calendar.dd.minute) < 10 && Calendar.dd.minute.toString().length == 1 ? "0"+Calendar.dd.minute : Calendar.dd.minute;
          });
      };

      /** Render toolbar */
      this.toolbar = function()
      {
          if(!this.settings.toolbar) return;
          var prepare = "";
          prepare += "<div class='toolbar'>";
          $.each(this.settings.tc, function(key, value) {
              if(value === true) {
                  var handler;
                  if(key == "close") handler = ["handler_close", Calendar.settings.tcNames.close];
                  else if(key == "today") handler = ["handler_today", Calendar.settings.tcNames.today];
                  else if(key == "submit") handler = ["handler_submit", Calendar.settings.tcNames.submit];
                  else alert('DH datepicker error: Can\'t find handler ' + key);
                  prepare += "<a href='javascript:;' class='"+handler[0]+"'>"+handler[1]+"</a>";
              }
          });
          prepare += "<br style='clear: both;' /></div>";
          this.cal.append(prepare);

          // User input
          $(this.calTag + ' a.handler_close').click(function(){ Calendar.hide(); });
          $(this.calTag + ' a.handler_today').click(function(){
              Calendar.dd = Calendar.getDD(null);
              Calendar.renderDate();
          });
          $(this.calTag + ' a.handler_submit').click(function(){
              $(Calendar.settings.handler).val(Calendar.convert(Calendar.dd.day, Calendar.dd.month, Calendar.dd.year, Calendar.dd.hour, Calendar.dd.minute));
              if(Calendar.settings.closeOnSubmit) Calendar.hide();
              Calendar.settings.selected(Calendar.cal);
          });
      }

      /** Previous month */
      this.previousMonth = function()
      {
          var prevMonth = this.dd.monthNum == 1 ? 12 : (this.dd.monthNum-1);
          var prevYear = prevMonth == 12 ? (this.dd.year-1) : this.dd.year;
          this.dd = this.getDD(prevMonth+'/01/'+prevYear);
          this.clear();
          this.renderDate();
          return true;
      };

      /** Next month */
      this.nextMonth = function()
      {
          var nextMonth = this.dd.monthNum == 12 ? 1 : (this.dd.monthNum+1);
          var nextYear = nextMonth == 1 ? (this.dd.year+1) : this.dd.year;
          this.dd = this.getDD(nextMonth+'/01/'+nextYear);
          this.clear();
          this.renderDate();
      };

      /** Get serial number string */
      this.getSerialNumber = function(day)
      {
          var serialNumber = "th";
          if(day == 1 || day.toString().substr(1) == 1 && day.toString().substr(0, 1) != 1) {
              serialNumber = "st";
          } else if(day == 2 || day.toString().substr(1) == 2 && day.toString().substr(0, 1) != 1) {
              serialNumber = "nd";
          } else if(day == 3 || day.toString().substr(1) == 3 && day.toString().substr(0, 1) != 1) {
              serialNumber = "rd";
          } else {
              serialNumber = "th";
          }
          return serialNumber;
      };

      /** Date string convert */
      this.convert = function(day, month, year, hour, minute)
      {
          day = !day ? this.dd.day : day;
          month = !month ? this.dd.month : month;
          year = !year ? this.dd.year : year;
          hour = !hour ? this.dd.hour : hour;
          minute = !minute ? this.dd.minute : minute;
          var dayIndex = new Date(month, day, year).getDay();
          var jDay = day.toString().length > 1 && parseInt(day) < 10 ? "0"+day : day;
          var gHour = hour.toString().substr(0, 1) == 0 ? hour.toString().substr(1) : hour;
          var glHour = parseInt(hour) > 12 ? (parseInt(hour)-12) : hour;
          var ante = hour > 11 ? this.settings.ante.pm : this.settings.ante.am;
          var date = new Date(month, day, year, hour, minute);
          if(this.settings.format.match("d")) day = day < 10 ? "0"+day : day;
          if(this.settings.format.match("m")) month = month < 10 ? "0"+(month+1) : (month+1);
          return this.settings.format
              // Date format
              .replace("d", day)
              .replace("m", month)
              .replace("j", jDay)
              .replace("n", month)
              .replace("Y", year)
              .replace("S", this.getSerialNumber(day))
              .replace("y", year.toString().substring(2))
              // Time format - ignore settings allowTime
              .replace("H", hour)
              .replace("G", gHour)
              .replace("g", glHour)
              .replace("a", ante.toLowerCase())
              .replace("A", ante.toUpperCase())
              .replace("i", minute)
              // Day and month names
              .replace("F", this.settings.monthNames[month]);
      };

      /** External click
       *  -- TODO
       */
      this.external = function(event)
      {
          var itarget = $(event.target);
          if(itarget[0].tagName != "input") {
              $.each(itarget, function(key, value) {
                  //Calendar.hide();
              });
          }
      };

      /** Is integer */
      this.isInt = function(intVal) {
          var val = intVal;
          return !isNaN(parseInt(val));
      };

      /** Element manipulation functions */
      this.clear = function() { this.cal.html(''); };
      this.show = function() { this.cal.fadeIn(300); };
      this.hide = function() { this.cal.fadeOut(300); };
  }

  // Date picker plug-in
  $.fn.datetime = function(options) {

      /** Settable options */
      var settings = {
          date: null,
          defaultValue: true,
          format: "F jS Y @ g:i a",
          handler: this,
          closeOnSelect: false,
          closeOnSubmit: true,
          allowTime: true,
          toolbar: true,
          tc: { close: true, today: true, submit: true },
          tcNames: { close: "Close", today: "Today", submit: "Submit" },
          offsetX: 2,
          offsetY: 2,
          ante: { pm: "pm", am: "am" },
          dayNames: ["Monday", "Tuesday", "Wendsday", "Thursday", "Friday", "Saturday", "Sunday"],
          monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
          dayShort: 3,
          monthShort: 3,
          selected: function(calendar) {}
      };

      // Each element
      return this.each(function() {
          // Make options
          if(options) $.extend( settings, options );
          Calendar.init(settings);

          // On focus active
          $(this).focus(function() {
              Calendar.clear();
              Calendar.renderDate();
              Calendar.show();
          });

          // Close on blur - TODO
          $(document).mousedown(Calendar.external);

          // Default value
          if(settings.defaultValue) {
              if(settings.defaultValue === true)
                  $(settings.handler).val(Calendar.convert());
              else
                  $(settings.handler).val(settings.defaultValue);
          }
      });
  };
})( jQuery );

Galéria