jQuery - DateTime picker

JavaScript jQuery Zdrojákoviště jQuery - DateTime picker

Je plug-in pro JavaScriptobvou knihovnu jQuery napsán mnou pro Saixon software. tento plug-in je použitý jako SUI v projektu Saixon. Zdrojové kódy jsou dostupné ke stažení pod tímto článkem. Kód je šířen pod MIT licencí.

Implementace:

<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 );

Galerie


 

Stáhnout

Staženo 482x (15 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (2 hlasů) :
55555


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře

Avatar
samo007
Redaktor
Avatar
samo007:

Dá sa to použiť aj ako zobrazenie dôležitých dní? Napr. Narodeniny a pod.

 
Odpovědět 25.11.2012 23:11
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na samo007
Drahomír Hanák:

Už je to dlouho, co jsem napsal tenhle widget. Určitě by to šlo upravit, ale v základu to bohužel není.

Zvážil bych použití jQuery UI, které už obsahuje podobný plug-in. Tam by to možná šlo: http://jqueryui.com/datepicker/

 
Odpovědět 25.11.2012 23:18
Avatar
samo007
Redaktor
Avatar
samo007:

Ďakujem. Pozriem si ten odkaz.

 
Odpovědět 25.11.2012 23:28
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.