slash_admin 0.1.0

data/config/locales/slash_admin.fr.yml

@@ -0,0 +1,72 @@
+fr:
+  slash_admin:
+    controller:
+      create:
+        success: "%{model_name} créé(e)."
+        error: "Erreur lors de la création d'un(e) %{model_name}"
+      update:
+        success: "%{model_name} mis(e) à jour."
+        error: "Erreur lors de la mise à jour d'un(e) %{model_name}"
+      delete:
+        success: "%{model_name} supprimé(e)."
+      nestable:
+        error: Impossible de trier '%{model_name}'
+        success: Opération réussi.
+    view:
+      administration: Administration
+      home: Accueil
+      welcome: Vous permet d'administrer votre application
+      login: 'SE CONNECTER'
+      create: "Création d'un(e) %{model_name}"
+      create_success: "%{model_name} créé(e) avec succès"
+      add: "Ajouter un(e) %{model_name}"
+      cancel: Annuler
+      save: Enregistrer
+      delete: Supprimer
+      new: Nouveau
+      edit: "Édition: %{model_name}"
+      show: "Affichage: %{model_name}"
+      see: Voir
+      tools: Outils
+      order: Trier
+      erase: Effacer
+      ordering: "Trier les %{model_name}"
+      export_xls: Export XLS
+      export_csv: Export CSV
+      save_and_return_html: Enregistrer & Retourner à la liste
+      save_and_add_html: Enregistrer & Ajouter un nouveau
+      actions: Actions
+      batch_actions: Actions groupées
+      total_of: Total de
+      of: sur
+      result_found: résultats trouvé(s)
+      show_by: Voir par
+      be_careful: Vous ne serez pas capable de revenir en arrière.
+      selected_elements: élément(s) sélectionné(s)
+      page: Page
+      yes: Oui
+      no: Non
+      filter: Filtrer
+      reset: Réinitialiser
+      select_model: "Sélectionner un(e) %{model_name}"
+      list: "Liste des %{model_name}"
+      return_to_list: Retour à la liste
+      no_image: Aucune Image
+      close: Fermer
+      associations: Associations
+      no_associations: Pas d'associations
+      translations: Traductions
+      add_tag: Ajouter un tag
+      confirm: Êtes-vous sûr ?
+      no_back: Vous ne serez pas capable de revenir en arrière
+      yes_delete: Oui, supprimer
+      enable_javascript_html: '
+      Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript.
+      Voici les <a href="http://www.enable-javascript.com/fr/" target="_blank">
+      instructions pour activer JavaScript dans votre navigateur Web</a>.'
+      administration_login: Administration - Login
+      json_not_valid: Le JSON n'est pas valide
+      username: Nom d'utilisateur
+      password: Mot de passe
+    sessions:
+      login_required: Vous devez êtres connecté pour accéder à cette page.

data/config/routes.rb

@@ -0,0 +1,16 @@
+SlashAdmin::Engine.routes.draw do
+  scope :admin do
+    get '/' => 'dashboard#home', as: 'dashboard'
+    get 'login' => 'security/sessions#new'
+    post 'login', to: 'security/sessions#create'
+    get 'logout' => 'security/sessions#destroy'
+    get 'dashboard/toggle' => 'dashboard#toggle', as: 'toggle_dashboard'
+
+    get 'search' => 'selectize#search', as: 'remote_selectize'
+
+    # Batch actions
+
+    # DELETE
+    post 'batch_actions/delete/:model_class', to: 'batch_actions#delete', as: 'batch_delete'
+  end
+end

data/db/migrate/20170512104248_create_slash_admin_admins.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+class CreateSlashAdminAdmins < ActiveRecord::Migration[5.0]
+  def change
+    create_table :slash_admin_admins do |t|
+      ## Database authenticatable
+      t.string :username,           null: false, default: ''
+      t.string :email,              null: false, default: ''
+      t.string :password_digest,    null: false, default: ''
+      t.string :avatar
+      t.string :roles
+
+      ## Recoverable
+      t.string   :reset_password_token
+      t.datetime :reset_password_sent_at
+
+      t.timestamps null: false
+    end
+  end
+end

data/lib/batch_translation.rb

@@ -0,0 +1,19 @@
+# Do not forget to set accepts_nested_attributes_for :translations in the translated model.
+
+module ActionView
+  module Helpers
+    class FormBuilder
+      def globalize_fields_for(locale, *args, &proc)
+        raise ArgumentError, 'Missing block' unless block_given?
+        options = args.extract_options!
+        @index = @index ? @index + 1 : 1
+        object_name = "#{@object_name}[translations_attributes][#{@index}]"
+        form_object = @object || @object_name.to_s.camelize.constantize.new
+        object = form_object.translations.select{ |t| t.locale.to_s == locale.to_s }.first
+        @template.concat @template.hidden_field_tag("#{object_name}[id]", object ? object.id : '')
+        @template.concat @template.hidden_field_tag("#{object_name}[locale]", locale)
+        @template.fields_for(object_name, object, options, &proc)
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/controllers/controllers_generator.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module Generators
+    class ControllersGenerator < Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+      argument :model, required: true,
+                       desc: 'The model concerned'
+
+      def create_controller
+        @model_name = model.camelize
+        template 'controllers.erb',
+                 "app/controllers/slash_admin/models/#{model}_controller.rb"
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/controllers/templates/controllers.erb

@@ -0,0 +1,9 @@
+module SlashAdmin
+  module Models
+    class <%= @model_name %>Controller < SlashAdmin::ModelsController
+      def list_params
+        []
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/install/install_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+
+      def install
+        template 'install.erb',
+                 'app/helpers/slash_admin/menu_helper.rb'
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/install/templates/install.erb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module MenuHelper
+    def menu_entries
+      [
+        {
+          title: 'Dashboard',
+          path: slash_admin.dashboard_path,
+          icon: 'icon-home',
+        },
+      ]
+    end
+  end
+end

data/lib/generators/slash_admin/override_admin/override_admin_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module Generators
+    class OverrideAdminGenerator < Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+
+      def override_admin
+        template 'admin.erb',
+                 'app/models/slash_admin/admin.rb'
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/override_admin/templates/admin.erb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+module SlashAdmin
+  class Admin < ApplicationRecord
+    include CanCan::Ability
+
+    has_secure_password
+
+    attr_accessor :login
+
+    EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i
+    USERNAME_REGEX = /^[a-zA-Z0-9_\.]*$/
+    validates :username, presence: true, uniqueness: true, length: {in: 3..20}
+    validates :email, presence: true, uniqueness: true
+    validates_length_of :password, in: 6..20, on: :create
+    validates_format_of :email, with: EMAIL_REGEX, multiline: true
+    validates_format_of :username, with: USERNAME_REGEX, multiline: true
+
+    before_create :handle_default_role
+
+    serialize :roles, JSON
+
+    def has_role?(role)
+      if roles.blank?
+        false
+      else
+        roles.include?(role)
+      end
+    end
+
+    def handle_default_role
+      self.roles = 'superadmin' unless roles.present?
+    end
+
+    def login=(login)
+      @login = login
+    end
+
+    def login
+      @login || self.username || self.email
+    end
+
+    def identicon
+      RubyIdenticon.create_base64(email, grid_size: 5, border_size: 150, square_size: 50, background_color: 0xf0f0f0ff)
+    end
+  end
+end

data/lib/generators/slash_admin/override_session/override_session_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module Generators
+    class OverrideSessionGenerator < Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+
+      def override_session
+        template 'session.erb',
+                 'app/controllers/slash_admin/security/sessions_controller.rb'
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/override_session/templates/session.erb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+module SlashAdmin
+  class Security::SessionsController < ActionController::Base
+    layout 'slash_admin/admin_user'
+
+    def new
+    end
+
+    def create
+      admin = Admin.where('username = :value OR lower(email) = lower(:value)', value: params[:admin][:login]).first
+      if admin&.authenticate(params[:admin][:password])
+        session[:admin_id] = admin.id
+        flash[:notice] = 'Vous êtes à présent connecté.'
+        redirect_to slash_admin.dashboard_path
+      else
+        @error_messages = 'Merci de vérifier vos identifiants'
+        render :new and return
+      end
+    end
+
+    def destroy
+      session[:admin_id] = nil
+      flash[:notice] = 'Déconnecté avec succès.'
+      redirect_to slash_admin.login_url
+    end
+  end
+end

data/lib/generators/slash_admin/permissions/permissions_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+module SlashAdmin
+  module Generators
+    class PermissionsGenerator < Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+
+      def create_permissions
+        template 'permissions.erb',
+                 'app/models/slash_admin/admin_ability.rb'
+      end
+    end
+  end
+end

data/lib/generators/slash_admin/permissions/templates/permissions.erb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+module SlashAdmin
+  class AdminAbility
+    include CanCan::Ability
+
+    def initialize(user)
+      @user = user
+      can :manage, :all
+    end
+  end
+end

data/lib/slash_admin.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+require 'slash_admin/engine'
+require 'cancancan'
+require 'kaminari'
+require 'groupdate'
+require 'ruby_identicon'
+require 'bcrypt'
+require 'chartkick'
+require 'chart-js-rails'
+require 'highcharts-rails'
+require 'selectize-rails'
+require 'font-awesome-rails'
+require 'js-routes'
+require 'i18n-js'
+require 'bootstrap'
+require 'cocoon'
+require 'datetime_picker_rails'
+require 'jquery-rails'
+require 'bootstrap-datepicker-rails'
+require 'jquery-minicolors-rails'
+require 'momentjs-rails'
+require 'sass-rails'
+require 'tether-rails'
+require 'sweetalert-rails'
+require 'http_accept_language'
+require 'batch_translation'
+
+module SlashAdmin
+end

data/lib/slash_admin/engine.rb

@@ -0,0 +1,8 @@
+module SlashAdmin
+  class Engine < ::Rails::Engine
+    isolate_namespace SlashAdmin
+    config.to_prepare do
+      Rails.application.config.assets.precompile += %w( slash_admin/* )
+    end
+  end
+end

data/lib/slash_admin/version.rb

@@ -0,0 +1,3 @@
+module SlashAdmin
+  VERSION = '0.1.0'
+end

data/lib/tasks/slash_admin_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :slash_admin do
+#   # Task goes here
+# end

data/vendor/assets/javascripts/bootstrap-material-datetimepicker.js

@@ -0,0 +1,1295 @@
+(function ($, moment)
+{
+   var pluginName = "bootstrapMaterialDatePicker";
+   var pluginDataName = "plugin_" + pluginName;
+
+   moment.locale('en');
+
+   function Plugin(element, options)
+   {
+      this.currentView = 0;
+
+      this.minDate;
+      this.maxDate;
+
+      this._attachedEvents = [];
+
+      this.element = element;
+      this.$element = $(element);
+
+
+      this.params = {date: true, time: true, format: 'YYYY-MM-DD', minDate: null, maxDate: null, currentDate: null, lang: 'en', weekStart: 0, disabledDays: [], shortTime: false, clearButton: false, nowButton: false, cancelText: 'Cancel', okText: 'OK', clearText: 'Clear', nowText: 'Now', switchOnClick: false, triggerEvent: 'focus', monthPicker: false, year:true};
+      this.params = $.fn.extend(this.params, options);
+
+      this.name = "dtp_" + this.setName();
+      this.$element.attr("data-dtp", this.name);
+
+      moment.locale(this.params.lang);
+
+      this.init();
+   }
+
+   $.fn[pluginName] = function (options, p)
+   {
+      this.each(function ()
+      {
+         if (!$.data(this, pluginDataName))
+         {
+            $.data(this, pluginDataName, new Plugin(this, options));
+         } else
+         {
+            if (typeof ($.data(this, pluginDataName)[options]) === 'function')
+            {
+               $.data(this, pluginDataName)[options](p);
+            }
+            if (options === 'destroy')
+            {
+               delete $.data(this, pluginDataName);
+            }
+         }
+      });
+      return this;
+   };
+
+   Plugin.prototype =
+           {
+              init: function ()
+              {
+                 this.initDays();
+                 this.initDates();
+
+                 this.initTemplate();
+
+                 this.initButtons();
+
+                 this._attachEvent($(window), 'resize', this._centerBox.bind(this));
+                 this._attachEvent(this.$dtpElement.find('.dtp-content'), 'click', this._onElementClick.bind(this));
+                 this._attachEvent(this.$dtpElement, 'click', this._onBackgroundClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('.dtp-close > a'), 'click', this._onCloseClick.bind(this));
+                 this._attachEvent(this.$element, this.params.triggerEvent, this._fireCalendar.bind(this));
+              },
+              initDays: function ()
+              {
+                 this.days = [];
+                 for (var i = this.params.weekStart; this.days.length < 7; i++)
+                 {
+                    if (i > 6)
+                    {
+                       i = 0;
+                    }
+                    this.days.push(i.toString());
+                 }
+              },
+              initDates: function ()
+              {
+                 if (this.$element.val().length > 0)
+                 {
+                    if (typeof (this.params.format) !== 'undefined' && this.params.format !== null)
+                    {
+                       this.currentDate = moment(this.$element.val(), this.params.format).locale(this.params.lang);
+                    } else
+                    {
+                       this.currentDate = moment(this.$element.val()).locale(this.params.lang);
+                    }
+                 } else
+                 {
+                    if (typeof (this.$element.attr('value')) !== 'undefined' && this.$element.attr('value') !== null && this.$element.attr('value') !== "")
+                    {
+                       if (typeof (this.$element.attr('value')) === 'string')
+                       {
+                          if (typeof (this.params.format) !== 'undefined' && this.params.format !== null)
+                          {
+                             this.currentDate = moment(this.$element.attr('value'), this.params.format).locale(this.params.lang);
+                          } else
+                          {
+                             this.currentDate = moment(this.$element.attr('value')).locale(this.params.lang);
+                          }
+                       }
+                    } else
+                    {
+                       if (typeof (this.params.currentDate) !== 'undefined' && this.params.currentDate !== null)
+                       {
+                          if (typeof (this.params.currentDate) === 'string')
+                          {
+                             if (typeof (this.params.format) !== 'undefined' && this.params.format !== null)
+                             {
+                                this.currentDate = moment(this.params.currentDate, this.params.format).locale(this.params.lang);
+                             } else
+                             {
+                                this.currentDate = moment(this.params.currentDate).locale(this.params.lang);
+                             }
+                          } else
+                          {
+                             if (typeof (this.params.currentDate.isValid) === 'undefined' || typeof (this.params.currentDate.isValid) !== 'function')
+                             {
+                                var x = this.params.currentDate.getTime();
+                                this.currentDate = moment(x, "x").locale(this.params.lang);
+                             } else
+                             {
+                                this.currentDate = this.params.currentDate;
+                             }
+                          }
+                          this.$element.val(this.currentDate.format(this.params.format));
+                       } else
+                          this.currentDate = moment();
+                    }
+                 }
+
+                 if (typeof (this.params.minDate) !== 'undefined' && this.params.minDate !== null)
+                 {
+                    if (typeof (this.params.minDate) === 'string')
+                    {
+                       if (typeof (this.params.format) !== 'undefined' && this.params.format !== null)
+                       {
+                          this.minDate = moment(this.params.minDate, this.params.format).locale(this.params.lang);
+                       } else
+                       {
+                          this.minDate = moment(this.params.minDate).locale(this.params.lang);
+                       }
+                    } else
+                    {
+                       if (typeof (this.params.minDate.isValid) === 'undefined' || typeof (this.params.minDate.isValid) !== 'function')
+                       {
+                          var x = this.params.minDate.getTime();
+                          this.minDate = moment(x, "x").locale(this.params.lang);
+                       } else
+                       {
+                          this.minDate = this.params.minDate;
+                       }
+                    }
+                 } else if (this.params.minDate === null)
+                 {
+                    this.minDate = null;
+                 }
+
+                 if (typeof (this.params.maxDate) !== 'undefined' && this.params.maxDate !== null)
+                 {
+                    if (typeof (this.params.maxDate) === 'string')
+                    {
+                       if (typeof (this.params.format) !== 'undefined' && this.params.format !== null)
+                       {
+                          this.maxDate = moment(this.params.maxDate, this.params.format).locale(this.params.lang);
+                       } else
+                       {
+                          this.maxDate = moment(this.params.maxDate).locale(this.params.lang);
+                       }
+                    } else
+                    {
+                       if (typeof (this.params.maxDate.isValid) === 'undefined' || typeof (this.params.maxDate.isValid) !== 'function')
+                       {
+                          var x = this.params.maxDate.getTime();
+                          this.maxDate = moment(x, "x").locale(this.params.lang);
+                       } else
+                       {
+                          this.maxDate = this.params.maxDate;
+                       }
+                    }
+                 } else if (this.params.maxDate === null)
+                 {
+                    this.maxDate = null;
+                 }
+
+                 if (!this.isAfterMinDate(this.currentDate))
+                 {
+                    this.currentDate = moment(this.minDate);
+                 }
+                 if (!this.isBeforeMaxDate(this.currentDate))
+                 {
+                    this.currentDate = moment(this.maxDate);
+                 }
+              },
+              initTemplate: function ()
+              {
+                  var yearPicker = "";
+                  var y =this.currentDate.year();
+                  for (var i = y-3; i < y + 4; i++) {
+                      yearPicker += '<div class="year-picker-item" data-year="' + i + '">' + i + '</div>';
+                  }
+                  this.midYear=y;
+                  var yearHtml =
+                      '<div class="dtp-picker-year hidden" >' +
+                      '<div><a href="javascript:void(0);" class="btn btn-default dtp-select-year-range before" style="margin: 0;"><i class="material-icons">keyboard_arrow_up</i></a></div>' +
+                      yearPicker +
+                      '<div><a href="javascript:void(0);" class="btn btn-default dtp-select-year-range after" style="margin: 0;"><i class="material-icons">keyboard_arrow_down</i></a></div>' +
+                      '</div>';
+
+                 this.template = '<div class="dtp hidden" id="' + this.name + '">' +
+                         '<div class="dtp-content">' +
+                         '<div class="dtp-date-view">' +
+                         '<header class="dtp-header">' +
+                         '<div class="dtp-actual-day">Lundi</div>' +
+                         '<div class="dtp-close"><a href="javascript:void(0);"><i class="material-icons">clear</i></a></div>' +
+                         '</header>' +
+                         '<div class="dtp-date hidden">' +
+                         '<div>' +
+                         '<div class="left center p10">' +
+                         '<a href="javascript:void(0);" class="dtp-select-month-before"><i class="material-icons">chevron_left</i></a>' +
+                         '</div>' +
+                         '<div class="dtp-actual-month p80">MAR</div>' +
+                         '<div class="right center p10">' +
+                         '<a href="javascript:void(0);" class="dtp-select-month-after"><i class="material-icons">chevron_right</i></a>' +
+                         '</div>' +
+                         '<div class="clearfix"></div>' +
+                         '</div>' +
+                         '<div class="dtp-actual-num">13</div>' +
+                         '<div>' +
+                         '<div class="left center p10">' +
+                         '<a href="javascript:void(0);" class="dtp-select-year-before"><i class="material-icons">chevron_left</i></a>' +
+                         '</div>' +
+                         '<div class="dtp-actual-year p80'+(this.params.year?"":" disabled")+'">2014</div>' +
+                         '<div class="right center p10">' +
+                         '<a href="javascript:void(0);" class="dtp-select-year-after"><i class="material-icons">chevron_right</i></a>' +
+                         '</div>' +
+                         '<div class="clearfix"></div>' +
+                         '</div>' +
+                         '</div>' +
+                         '<div class="dtp-time hidden">' +
+                         '<div class="dtp-actual-maxtime">23:55</div>' +
+                         '</div>' +
+                         '<div class="dtp-picker">' +
+                         '<div class="dtp-picker-calendar"></div>' +
+                         '<div class="dtp-picker-datetime hidden">' +
+                         '<div class="dtp-actual-meridien">' +
+                         '<div class="left p20">' +
+                         '<a class="dtp-meridien-am" href="javascript:void(0);">AM</a>' +
+                         '</div>' +
+                         '<div class="dtp-actual-time p60"></div>' +
+                         '<div class="right p20">' +
+                         '<a class="dtp-meridien-pm" href="javascript:void(0);">PM</a>' +
+                         '</div>' +
+                         '<div class="clearfix"></div>' +
+                         '</div>' +
+                         '<div id="dtp-svg-clock">' +
+                         '</div>' +
+                         '</div>' +
+                         yearHtml+
+                         '</div>' +
+                         '</div>' +
+                         '<div class="dtp-buttons">' +
+                         '<button class="dtp-btn-now btn btn-flat hidden">' + this.params.nowText + '</button>' +
+                         '<button class="dtp-btn-clear btn btn-flat hidden">' + this.params.clearText + '</button>' +
+                         '<button class="dtp-btn-cancel btn btn-flat">' + this.params.cancelText + '</button>' +
+                         '<button class="dtp-btn-ok btn btn-flat">' + this.params.okText + '</button>' +
+                         '<div class="clearfix"></div>' +
+                         '</div>' +
+                         '</div>' +
+                         '</div>';
+
+                 if ($('body').find("#" + this.name).length <= 0)
+                 {
+                    $('body').append(this.template);
+
+                    if (this)
+                       this.dtpElement = $('body').find("#" + this.name);
+                    this.$dtpElement = $(this.dtpElement);
+                 }
+              },
+              initButtons: function ()
+              {
+                 this._attachEvent(this.$dtpElement.find('.dtp-btn-cancel'), 'click', this._onCancelClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('.dtp-btn-ok'), 'click', this._onOKClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-month-before'), 'click', this._onMonthBeforeClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-month-after'), 'click', this._onMonthAfterClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-year-before'), 'click', this._onYearBeforeClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-year-after'), 'click', this._onYearAfterClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('.dtp-actual-year'), 'click', this._onActualYearClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-year-range.before'), 'click', this._onYearRangeBeforeClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('a.dtp-select-year-range.after'), 'click', this._onYearRangeAfterClick.bind(this));
+                 this._attachEvent(this.$dtpElement.find('div.year-picker-item'), 'click', this._onYearItemClick.bind(this));
+
+                 if (this.params.clearButton === true)
+                 {
+                    this._attachEvent(this.$dtpElement.find('.dtp-btn-clear'), 'click', this._onClearClick.bind(this));
+                    this.$dtpElement.find('.dtp-btn-clear').removeClass('hidden');
+                 }
+
+                 if (this.params.nowButton === true)
+                 {
+                    this._attachEvent(this.$dtpElement.find('.dtp-btn-now'), 'click', this._onNowClick.bind(this));
+                    this.$dtpElement.find('.dtp-btn-now').removeClass('hidden');
+                 }
+
+                 if ((this.params.nowButton === true) && (this.params.clearButton === true))
+                 {
+                    this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-xs');
+                 } else if ((this.params.nowButton === true) || (this.params.clearButton === true))
+                 {
+                    this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-sm');
+                 }
+              },
+              initMeridienButtons: function ()
+              {
+                 this.$dtpElement.find('a.dtp-meridien-am').off('click').on('click', this._onSelectAM.bind(this));
+                 this.$dtpElement.find('a.dtp-meridien-pm').off('click').on('click', this._onSelectPM.bind(this));
+              },
+              initDate: function (d)
+              {
+                 this.currentView = 0;
+
+                 if (this.params.monthPicker === false)
+                 {
+                    this.$dtpElement.find('.dtp-picker-calendar').removeClass('hidden');
+                 }
+                 this.$dtpElement.find('.dtp-picker-datetime').addClass('hidden');
+                 this.$dtpElement.find('.dtp-picker-year').addClass('hidden');
+
+                 var _date = ((typeof (this.currentDate) !== 'undefined' && this.currentDate !== null) ? this.currentDate : null);
+                 var _calendar = this.generateCalendar(this.currentDate);
+
+                 if (typeof (_calendar.week) !== 'undefined' && typeof (_calendar.days) !== 'undefined')
+                 {
+                    var _template = this.constructHTMLCalendar(_date, _calendar);
+
+                    this.$dtpElement.find('a.dtp-select-day').off('click');
+                    this.$dtpElement.find('.dtp-picker-calendar').html(_template);
+
+                    this.$dtpElement.find('a.dtp-select-day').on('click', this._onSelectDate.bind(this));
+
+                    this.toggleButtons(_date);
+                 }
+
+                 this._centerBox();
+                 this.showDate(_date);
+              },
+              initHours: function ()
+              {
+                 this.currentView = 1;
+
+                 this.showTime(this.currentDate);
+                 this.initMeridienButtons();
+
+                 if (this.currentDate.hour() < 12)
+                 {
+                    this.$dtpElement.find('a.dtp-meridien-am').click();
+                 } else
+                 {
+                    this.$dtpElement.find('a.dtp-meridien-pm').click();
+                 }
+
+                 var hFormat = ((this.params.shortTime) ? 'h' : 'H');
+
+                 this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden');
+                 this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden');
+                 this.$dtpElement.find('.dtp-picker-year').addClass('hidden');
+
+                 var svgClockElement = this.createSVGClock(true);
+
+                 for (var i = 0; i < 12; i++)
+                 {
+                    var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 12))));
+                    var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 12))));
+
+                    var fill = ((this.currentDate.format(hFormat) == i) ? "#8BC34A" : 'transparent');
+                    var color = ((this.currentDate.format(hFormat) == i) ? "#fff" : '#000');
+
+                    var svgHourCircle = this.createSVGElement("circle", {'id': 'h-' + i, 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': i});
+
+                    var svgHourText = this.createSVGElement("text", {'id': 'th-' + i, 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-hour': i});
+                    svgHourText.textContent = ((i === 0) ? ((this.params.shortTime) ? 12 : i) : i);
+
+                    if (!this.toggleTime(i, true))
+                    {
+                       svgHourCircle.className += " disabled";
+                       svgHourText.className += " disabled";
+                       svgHourText.setAttribute('fill', '#bdbdbd');
+                    } else
+                    {
+                       svgHourCircle.addEventListener('click', this._onSelectHour.bind(this));
+                       svgHourText.addEventListener('click', this._onSelectHour.bind(this));
+                    }
+
+                    svgClockElement.appendChild(svgHourCircle)
+                    svgClockElement.appendChild(svgHourText)
+                 }
+
+                 if (!this.params.shortTime)
+                 {
+                    for (var i = 0; i < 12; i++)
+                    {
+                       var x = -(110 * (Math.sin(-Math.PI * 2 * (i / 12))));
+                       var y = -(110 * (Math.cos(-Math.PI * 2 * (i / 12))));
+
+                       var fill = ((this.currentDate.format(hFormat) == (i + 12)) ? "#8BC34A" : 'transparent');
+                       var color = ((this.currentDate.format(hFormat) == (i + 12)) ? "#fff" : '#000');
+
+                       var svgHourCircle = this.createSVGElement("circle", {'id': 'h-' + (i + 12), 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': (i + 12)});
+
+                       var svgHourText = this.createSVGElement("text", {'id': 'th-' + (i + 12), 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '22', x: x, y: y + 7, fill: color, 'data-hour': (i + 12)});
+                       svgHourText.textContent = i + 12;
+
+                       if (!this.toggleTime(i + 12, true))
+                       {
+                          svgHourCircle.className += " disabled";
+                          svgHourText.className += " disabled";
+                          svgHourText.setAttribute('fill', '#bdbdbd');
+                       } else
+                       {
+                          svgHourCircle.addEventListener('click', this._onSelectHour.bind(this));
+                          svgHourText.addEventListener('click', this._onSelectHour.bind(this));
+                       }
+
+                       svgClockElement.appendChild(svgHourCircle)
+                       svgClockElement.appendChild(svgHourText)
+                    }
+
+                    this.$dtpElement.find('a.dtp-meridien-am').addClass('hidden');
+                    this.$dtpElement.find('a.dtp-meridien-pm').addClass('hidden');
+                 }
+
+                 this._centerBox();
+              },
+              initMinutes: function ()
+              {
+                 this.currentView = 2;
+
+                 this.showTime(this.currentDate);
+
+                 this.initMeridienButtons();
+
+                 if (this.currentDate.hour() < 12)
+                 {
+                    this.$dtpElement.find('a.dtp-meridien-am').click();
+                 } else
+                 {
+                    this.$dtpElement.find('a.dtp-meridien-pm').click();
+                 }
+
+                 this.$dtpElement.find('.dtp-picker-year').addClass('hidden');
+                 this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden');
+                 this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden');
+
+                 var svgClockElement = this.createSVGClock(false);
+
+                 for (var i = 0; i < 60; i++)
+                 {
+                    var s = ((i % 5 === 0) ? 162 : 158);
+                    var r = ((i % 5 === 0) ? 30 : 20);
+
+                    var x = -(s * (Math.sin(-Math.PI * 2 * (i / 60))));
+                    var y = -(s * (Math.cos(-Math.PI * 2 * (i / 60))));
+
+                    var color = ((this.currentDate.format("m") == i) ? "#8BC34A" : 'transparent');
+
+                    var svgMinuteCircle = this.createSVGElement("circle", {'id': 'm-' + i, 'class': 'dtp-select-minute', 'style': 'cursor:pointer', r: r, cx: x, cy: y, fill: color, 'data-minute': i});
+
+                    if (!this.toggleTime(i, false))
+                    {
+                       svgMinuteCircle.className += " disabled";
+                    } else
+                    {
+                       svgMinuteCircle.addEventListener('click', this._onSelectMinute.bind(this));
+                    }
+
+                    svgClockElement.appendChild(svgMinuteCircle)
+                 }
+
+                 for (var i = 0; i < 60; i++)
+                 {
+                    if ((i % 5) === 0)
+                    {
+                       var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 60))));
+                       var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 60))));
+
+                       var color = ((this.currentDate.format("m") == i) ? "#fff" : '#000');
+
+                       var svgMinuteText = this.createSVGElement("text", {'id': 'tm-' + i, 'class': 'dtp-select-minute-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-minute': i});
+                       svgMinuteText.textContent = i;
+
+                       if (!this.toggleTime(i, false))
+                       {
+                          svgMinuteText.className += " disabled";
+                          svgMinuteText.setAttribute('fill', '#bdbdbd');
+                       } else
+                       {
+                          svgMinuteText.addEventListener('click', this._onSelectMinute.bind(this));
+                       }
+
+                       svgClockElement.appendChild(svgMinuteText)
+                    }
+                 }
+
+                 this._centerBox();
+              },
+              animateHands: function ()
+              {
+                 var H = this.currentDate.hour();
+                 var M = this.currentDate.minute();
+
+                 var hh = this.$dtpElement.find('.hour-hand');
+                 hh[0].setAttribute('transform', "rotate(" + 360 * H / 12 + ")");
+
+                 var mh = this.$dtpElement.find('.minute-hand');
+                 mh[0].setAttribute('transform', "rotate(" + 360 * M / 60 + ")");
+              },
+              createSVGClock: function (isHour)
+              {
+                 var hl = ((this.params.shortTime) ? -120 : -90);
+
+                 var svgElement = this.createSVGElement("svg", {class: 'svg-clock', viewBox: '0,0,400,400'});
+                 var svgGElement = this.createSVGElement("g", {transform: 'translate(200,200) '});
+                 var svgClockFace = this.createSVGElement("circle", {r: '192', fill: '#eee', stroke: '#bdbdbd', 'stroke-width': 2});
+                 var svgClockCenter = this.createSVGElement("circle", {r: '15', fill: '#757575'});
+
+                 svgGElement.appendChild(svgClockFace)
+
+                 if (isHour)
+                 {
+                    var svgMinuteHand = this.createSVGElement("line", {class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#bdbdbd', 'stroke-width': 2});
+                    var svgHourHand = this.createSVGElement("line", {class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#8BC34A', 'stroke-width': 8});
+
+                    svgGElement.appendChild(svgMinuteHand);
+                    svgGElement.appendChild(svgHourHand);
+                 } else
+                 {
+                    var svgMinuteHand = this.createSVGElement("line", {class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#8BC34A', 'stroke-width': 2});
+                    var svgHourHand = this.createSVGElement("line", {class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#bdbdbd', 'stroke-width': 8});
+
+                    svgGElement.appendChild(svgHourHand);
+                    svgGElement.appendChild(svgMinuteHand);
+                 }
+
+                 svgGElement.appendChild(svgClockCenter)
+
+                 svgElement.appendChild(svgGElement)
+
+                 this.$dtpElement.find("#dtp-svg-clock").empty();
+                 this.$dtpElement.find("#dtp-svg-clock")[0].appendChild(svgElement);
+
+                 this.animateHands();
+
+                 return svgGElement;
+              },
+              createSVGElement: function (tag, attrs)
+              {
+                 var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+                 for (var k in attrs)
+                 {
+                    el.setAttribute(k, attrs[k]);
+                 }
+                 return el;
+              },
+              isAfterMinDate: function (date, checkHour, checkMinute)
+              {
+                 var _return = true;
+
+                 if (typeof (this.minDate) !== 'undefined' && this.minDate !== null)
+                 {
+                    var _minDate = moment(this.minDate);
+                    var _date = moment(date);
+
+                    if (!checkHour && !checkMinute)
+                    {
+                       _minDate.hour(0);
+                       _minDate.minute(0);
+
+                       _date.hour(0);
+                       _date.minute(0);
+                    }
+
+                    _minDate.second(0);
+                    _date.second(0);
+                    _minDate.millisecond(0);
+                    _date.millisecond(0);
+
+                    if (!checkMinute)
+                    {
+                       _date.minute(0);
+                       _minDate.minute(0);
+
+                       _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X")));
+                    } else
+                    {
+                       _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X")));
+                    }
+                 }
+
+                 return _return;
+              },
+              isBeforeMaxDate: function (date, checkTime, checkMinute)
+              {
+                 var _return = true;
+
+                 if (typeof (this.maxDate) !== 'undefined' && this.maxDate !== null)
+                 {
+                    var _maxDate = moment(this.maxDate);
+                    var _date = moment(date);
+
+                    if (!checkTime && !checkMinute)
+                    {
+                       _maxDate.hour(0);
+                       _maxDate.minute(0);
+
+                       _date.hour(0);
+                       _date.minute(0);
+                    }
+
+                    _maxDate.second(0);
+                    _date.second(0);
+                    _maxDate.millisecond(0);
+                    _date.millisecond(0);
+
+                    if (!checkMinute)
+                    {
+                       _date.minute(0);
+                       _maxDate.minute(0);
+
+                       _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X")));
+                    } else
+                    {
+                       _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X")));
+                    }
+                 }
+
+                 return _return;
+              },
+              rotateElement: function (el, deg)
+              {
+                 $(el).css
+                         ({
+                            WebkitTransform: 'rotate(' + deg + 'deg)',
+                            '-moz-transform': 'rotate(' + deg + 'deg)'
+                         });
+              },
+              showDate: function (date)
+              {
+                 if (date)
+                 {
+                    this.$dtpElement.find('.dtp-actual-day').html(date.locale(this.params.lang).format('dddd'));
+                    this.$dtpElement.find('.dtp-actual-month').html(date.locale(this.params.lang).format('MMM').toUpperCase());
+                    this.$dtpElement.find('.dtp-actual-num').html(date.locale(this.params.lang).format('DD'));
+                    this.$dtpElement.find('.dtp-actual-year').html(date.locale(this.params.lang).format('YYYY'));
+                 }
+              },
+              showTime: function (date)
+              {
+                 if (date)
+                 {
+                    var minutes = date.minute();
+                    var content = ((this.params.shortTime) ? date.format('hh') : date.format('HH')) + ':' + ((minutes.toString().length == 2) ? minutes : '0' + minutes) + ((this.params.shortTime) ? ' ' + date.format('A') : '');
+
+                    if (this.params.date)
+                       this.$dtpElement.find('.dtp-actual-time').html(content);
+                    else
+                    {
+                       if (this.params.shortTime)
+                          this.$dtpElement.find('.dtp-actual-day').html(date.format('A'));
+                       else
+                          this.$dtpElement.find('.dtp-actual-day').html('&nbsp;');
+
+                       this.$dtpElement.find('.dtp-actual-maxtime').html(content);
+                    }
+                 }
+              },
+              selectDate: function (date)
+              {
+                 if (date)
+                 {
+                    this.currentDate.date(date);
+
+                    this.showDate(this.currentDate);
+                    this.$element.trigger('dateSelected', this.currentDate);
+                 }
+              },
+              generateCalendar: function (date)
+              {
+                 var _calendar = {};
+
+                 if (date !== null)
+                 {
+                    var startOfMonth = moment(date).locale(this.params.lang).startOf('month');
+                    var endOfMonth = moment(date).locale(this.params.lang).endOf('month');
+
+                    var iNumDay = startOfMonth.format('d');
+
+                    _calendar.week = this.days;
+                    _calendar.days = [];
+
+                    for (var i = startOfMonth.date(); i <= endOfMonth.date(); i++)
+                    {
+                       if (i === startOfMonth.date())
+                       {
+                          var iWeek = _calendar.week.indexOf(iNumDay.toString());
+                          if (iWeek > 0)
+                          {
+                             for (var x = 0; x < iWeek; x++)
+                             {
+                                _calendar.days.push(0);
+                             }
+                          }
+                       }
+                       _calendar.days.push(moment(startOfMonth).locale(this.params.lang).date(i));
+                    }
+                 }
+
+                 return _calendar;
+              },
+              constructHTMLCalendar: function (date, calendar)
+              {
+                 var _template = "";
+
+                 _template += '<div class="dtp-picker-month">' + date.locale(this.params.lang).format('MMMM YYYY') + '</div>';
+                 _template += '<table class="table dtp-picker-days"><thead>';
+                 for (var i = 0; i < calendar.week.length; i++)
+                 {
+                    _template += '<th>' + moment(parseInt(calendar.week[i]), "d").locale(this.params.lang).format("dd").substring(0, 1) + '</th>';
+                 }
+
+                 _template += '</thead>';
+                 _template += '<tbody><tr>';
+
+                 for (var i = 0; i < calendar.days.length; i++)
+                 {
+                    if (i % 7 == 0)
+                       _template += '</tr><tr>';
+                    _template += '<td data-date="' + moment(calendar.days[i]).locale(this.params.lang).format("D") + '">';
+                    if (calendar.days[i] != 0)
+                    {
+                        if (this.isBeforeMaxDate(moment(calendar.days[i]), false, false) === false
+                            || this.isAfterMinDate(moment(calendar.days[i]), false, false) === false
+                            || this.params.disabledDays.indexOf(calendar.days[i].isoWeekday()) !== -1)
+                        {
+                            _template += '<span class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</span>';
+                        } else
+                        {
+                            if (moment(calendar.days[i]).locale(this.params.lang).format("DD") === moment(this.currentDate).locale(this.params.lang).format("DD"))
+                            {
+                                _template += '<a href="javascript:void(0);" class="dtp-select-day selected">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
+                            } else
+                            {
+                                _template += '<a href="javascript:void(0);" class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
+                            }
+                        }
+
+                        _template += '</td>';
+                    }
+                 }
+                 _template += '</tr></tbody></table>';
+
+                 return _template;
+              },
+              setName: function ()
+              {
+                 var text = "";
+                 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+                 for (var i = 0; i < 5; i++)
+                 {
+                    text += possible.charAt(Math.floor(Math.random() * possible.length));
+                 }
+
+                 return text;
+              },
+              isPM: function ()
+              {
+                 return this.$dtpElement.find('a.dtp-meridien-pm').hasClass('selected');
+              },
+              setElementValue: function ()
+              {
+                 this.$element.trigger('beforeChange', this.currentDate);
+                 if (typeof ($.material) !== 'undefined')
+                 {
+                    this.$element.removeClass('empty');
+                 }
+                 this.$element.val(moment(this.currentDate).locale(this.params.lang).format(this.params.format));
+                 this.$element.trigger('change', this.currentDate);
+              },
+              toggleButtons: function (date)
+              {
+                 if (date && date.isValid())
+                 {
+                    var startOfMonth = moment(date).locale(this.params.lang).startOf('month');
+                    var endOfMonth = moment(date).locale(this.params.lang).endOf('month');
+
+                    if (!this.isAfterMinDate(startOfMonth, false, false))
+                    {
+                       this.$dtpElement.find('a.dtp-select-month-before').addClass('invisible');
+                    } else
+                    {
+                       this.$dtpElement.find('a.dtp-select-month-before').removeClass('invisible');
+                    }
+
+                    if (!this.isBeforeMaxDate(endOfMonth, false, false))
+                    {
+                       this.$dtpElement.find('a.dtp-select-month-after').addClass('invisible');
+                    } else
+                    {
+                       this.$dtpElement.find('a.dtp-select-month-after').removeClass('invisible');
+                    }
+
+                    var startOfYear = moment(date).locale(this.params.lang).startOf('year');
+                    var endOfYear = moment(date).locale(this.params.lang).endOf('year');
+
+                    if (!this.isAfterMinDate(startOfYear, false, false))
+                    {
+                       this.$dtpElement.find('a.dtp-select-year-before').addClass('invisible');
+                    } else
+                    {
+                       this.$dtpElement.find('a.dtp-select-year-before').removeClass('invisible');
+                    }
+
+                    if (!this.isBeforeMaxDate(endOfYear, false, false))
+                    {
+                       this.$dtpElement.find('a.dtp-select-year-after').addClass('invisible');
+                    } else
+                    {
+                       this.$dtpElement.find('a.dtp-select-year-after').removeClass('invisible');
+                    }
+                 }
+              },
+              toggleTime: function (value, isHours)
+              {
+                 var result = false;
+
+                 if (isHours)
+                 {
+                    var _date = moment(this.currentDate);
+                    _date.hour(this.convertHours(value)).minute(0).second(0);
+
+                    result = !(this.isAfterMinDate(_date, true, false) === false || this.isBeforeMaxDate(_date, true, false) === false);
+                 } else
+                 {
+                    var _date = moment(this.currentDate);
+                    _date.minute(value).second(0);
+
+                    result = !(this.isAfterMinDate(_date, true, true) === false || this.isBeforeMaxDate(_date, true, true) === false);
+                 }
+
+                 return result;
+              },
+              _attachEvent: function (el, ev, fn)
+              {
+                 el.on(ev, null, null, fn);
+                 this._attachedEvents.push([el, ev, fn]);
+              },
+              _detachEvents: function ()
+              {
+                 for (var i = this._attachedEvents.length - 1; i >= 0; i--)
+                 {
+                    this._attachedEvents[i][0].off(this._attachedEvents[i][1], this._attachedEvents[i][2]);
+                    this._attachedEvents.splice(i, 1);
+                 }
+              },
+              _fireCalendar: function ()
+              {
+                 this.currentView = 0;
+                 this.$element.blur();
+
+                 this.initDates();
+
+                 this.show();
+
+                 if (this.params.date)
+                 {
+                    this.$dtpElement.find('.dtp-date').removeClass('hidden');
+                    this.initDate();
+                 } else
+                 {
+                    if (this.params.time)
+                    {
+                       this.$dtpElement.find('.dtp-time').removeClass('hidden');
+                       this.initHours();
+                    }
+                 }
+              },
+              _onBackgroundClick: function (e)
+              {
+                 e.stopPropagation();
+                 this.hide();
+              },
+              _onElementClick: function (e)
+              {
+                 e.stopPropagation();
+              },
+              _onKeydown: function (e)
+              {
+                 if (e.which === 27)
+                 {
+                    this.hide();
+                 }
+              },
+              _onCloseClick: function ()
+              {
+                 this.hide();
+              },
+              _onClearClick: function ()
+              {
+                 this.currentDate = null;
+                 this.$element.trigger('beforeChange', this.currentDate);
+                 this.hide();
+                 if (typeof ($.material) !== 'undefined')
+                 {
+                    this.$element.addClass('empty');
+                 }
+                 this.$element.val('');
+                 this.$element.trigger('change', this.currentDate);
+              },
+              _onNowClick: function ()
+              {
+                 this.currentDate = moment();
+
+                 if (this.params.date === true)
+                 {
+                    this.showDate(this.currentDate);
+
+                    if (this.currentView === 0)
+                    {
+                       this.initDate();
+                    }
+                 }
+
+                 if (this.params.time === true)
+                 {
+                    this.showTime(this.currentDate);
+
+                    switch (this.currentView)
+                    {
+                       case 1 :
+                          this.initHours();
+                          break;
+                       case 2 :
+                          this.initMinutes();
+                          break;
+                    }
+
+                    this.animateHands();
+                 }
+              },
+              _onOKClick: function ()
+              {
+                 switch (this.currentView)
+                 {
+                    case 0:
+                       if (this.params.time === true)
+                       {
+                          this.initHours();
+                       } else
+                       {
+                          this.setElementValue();
+                          this.hide();
+                       }
+                       break;
+                    case 1:
+                       this.initMinutes();
+                       break;
+                    case 2:
+                       this.setElementValue();
+                       this.hide();
+                       break;
+                 }
+              },
+              _onCancelClick: function ()
+              {
+                 if (this.params.time)
+                 {
+                    switch (this.currentView)
+                    {
+                       case 0:
+                          this.hide();
+                          break;
+                       case 1:
+                          if (this.params.date)
+                          {
+                             this.initDate();
+                          } else
+                          {
+                             this.hide();
+                          }
+                          break;
+                       case 2:
+                          this.initHours();
+                          break;
+                    }
+                 } else
+                 {
+                    this.hide();
+                 }
+              },
+              _onMonthBeforeClick: function ()
+              {
+                 this.currentDate.subtract(1, 'months');
+                 this.initDate(this.currentDate);
+                  this._closeYearPicker();
+              },
+              _onMonthAfterClick: function ()
+              {
+                 this.currentDate.add(1, 'months');
+                 this.initDate(this.currentDate);
+                  this._closeYearPicker();
+              },
+              _onYearBeforeClick: function ()
+              {
+                 this.currentDate.subtract(1, 'years');
+                 this.initDate(this.currentDate);
+                  this._closeYearPicker();
+              },
+              _onYearAfterClick: function ()
+              {
+                 this.currentDate.add(1, 'years');
+                 this.initDate(this.currentDate);
+                  this._closeYearPicker();
+              },
+               refreshYearItems:function () {
+                  var curYear=this.currentDate.year(),midYear=this.midYear;
+                   var minYear=1850;
+                   if (typeof (this.minDate) !== 'undefined' && this.minDate !== null){
+                       minYear=moment(this.minDate).year();
+                   }
+
+                   var maxYear=2200;
+                   if (typeof (this.maxDate) !== 'undefined' && this.maxDate !== null){
+                       maxYear=moment(this.maxDate).year();
+                   }
+
+                   this.$dtpElement.find(".dtp-picker-year .invisible").removeClass("invisible");
+                   this.$dtpElement.find(".year-picker-item").each(function (i, el) {
+                       var newYear = midYear - 3 + i;
+                       $(el).attr("data-year", newYear).text(newYear).data("year", newYear);
+                       if (curYear == newYear) {
+                           $(el).addClass("active");
+                       } else {
+                           $(el).removeClass("active");
+                       }
+                       if(newYear<minYear || newYear>maxYear){
+                           $(el).addClass("invisible")
+                       }
+                   });
+                   if(minYear>=midYear-3){
+                       this.$dtpElement.find(".dtp-select-year-range.before").addClass('invisible');
+                   }
+                   if(maxYear<=midYear+3){
+                       this.$dtpElement.find(".dtp-select-year-range.after").addClass('invisible');
+                   }
+
+                   this.$dtpElement.find(".dtp-select-year-range").data("mid", midYear);
+               },
+               _onActualYearClick:function(){
+                  if(this.params.year){
+                      if(this.$dtpElement.find('.dtp-picker-year.hidden').length>0) {
+                          this.$dtpElement.find('.dtp-picker-datetime').addClass("hidden");
+                          this.$dtpElement.find('.dtp-picker-calendar').addClass("hidden");
+                          this.$dtpElement.find('.dtp-picker-year').removeClass("hidden");
+                          this.midYear = this.currentDate.year();
+                          this.refreshYearItems();
+                      }else{
+                          this._closeYearPicker();
+                      }
+                  }
+               },
+               _onYearRangeBeforeClick:function(){
+                   this.midYear-=7;
+                   this.refreshYearItems();
+               },
+               _onYearRangeAfterClick:function(){
+                   this.midYear+=7;
+                   this.refreshYearItems();
+               },
+               _onYearItemClick:function (e) {
+                   var newYear = $(e.currentTarget).data('year');
+                   var oldYear = this.currentDate.year();
+                   var diff = newYear - oldYear;
+                   this.currentDate.add(diff, 'years');
+                   this.initDate(this.currentDate);
+
+                   this._closeYearPicker();
+                   this.$element.trigger("yearSelected",this.currentDate);
+               },
+               _closeYearPicker:function(){
+                   this.$dtpElement.find('.dtp-picker-calendar').removeClass("hidden");
+                   this.$dtpElement.find('.dtp-picker-year').addClass("hidden");
+               },
+               enableYearPicker:function () {
+                    this.params.year=true;
+                    this.$dtpElement.find(".dtp-actual-year").reomveClass("disabled");
+               },
+               disableYearPicker:function () {
+                   this.params.year=false;
+                   this.$dtpElement.find(".dtp-actual-year").addClass("disabled");
+                   this._closeYearPicker();
+               },
+              _onSelectDate: function (e)
+              {
+                 this.$dtpElement.find('a.dtp-select-day').removeClass('selected');
+                 $(e.currentTarget).addClass('selected');
+
+                 this.selectDate($(e.currentTarget).parent().data("date"));
+
+                 if (this.params.switchOnClick === true && this.params.time === true)
+                    setTimeout(this.initHours.bind(this), 200);
+
+                 if(this.params.switchOnClick === true && this.params.time === false) {
+                    setTimeout(this._onOKClick.bind(this), 200);
+                 }
+
+              },
+              _onSelectHour: function (e)
+              {
+                 if (!$(e.target).hasClass('disabled'))
+                 {
+                    var value = $(e.target).data('hour');
+                    var parent = $(e.target).parent();
+
+                    var h = parent.find('.dtp-select-hour');
+                    for (var i = 0; i < h.length; i++)
+                    {
+                       $(h[i]).attr('fill', 'transparent');
+                    }
+                    var th = parent.find('.dtp-select-hour-text');
+                    for (var i = 0; i < th.length; i++)
+                    {
+                       $(th[i]).attr('fill', '#000');
+                    }
+
+                    $(parent.find('#h-' + value)).attr('fill', '#8BC34A');
+                    $(parent.find('#th-' + value)).attr('fill', '#fff');
+
+                    this.currentDate.hour(parseInt(value));
+
+                    if (this.params.shortTime === true && this.isPM())
+                    {
+                       this.currentDate.add(12, 'hours');
+                    }
+
+                    this.showTime(this.currentDate);
+
+                    this.animateHands();
+
+                    if (this.params.switchOnClick === true)
+                       setTimeout(this.initMinutes.bind(this), 200);
+                 }
+              },
+              _onSelectMinute: function (e)
+              {
+                 if (!$(e.target).hasClass('disabled'))
+                 {
+                    var value = $(e.target).data('minute');
+                    var parent = $(e.target).parent();
+
+                    var m = parent.find('.dtp-select-minute');
+                    for (var i = 0; i < m.length; i++)
+                    {
+                       $(m[i]).attr('fill', 'transparent');
+                    }
+                    var tm = parent.find('.dtp-select-minute-text');
+                    for (var i = 0; i < tm.length; i++)
+                    {
+                       $(tm[i]).attr('fill', '#000');
+                    }
+
+                    $(parent.find('#m-' + value)).attr('fill', '#8BC34A');
+                    $(parent.find('#tm-' + value)).attr('fill', '#fff');
+
+                    this.currentDate.minute(parseInt(value));
+                    this.showTime(this.currentDate);
+
+                    this.animateHands();
+
+                    if (this.params.switchOnClick === true)
+                       setTimeout(function ()
+                       {
+                          this.setElementValue();
+                          this.hide();
+                       }.bind(this), 200);
+                 }
+              },
+              _onSelectAM: function (e)
+              {
+                 $('.dtp-actual-meridien').find('a').removeClass('selected');
+                 $(e.currentTarget).addClass('selected');
+
+                 if (this.currentDate.hour() >= 12)
+                 {
+                    if (this.currentDate.subtract(12, 'hours'))
+                       this.showTime(this.currentDate);
+                 }
+                 this.toggleTime((this.currentView === 1));
+              },
+              _onSelectPM: function (e)
+              {
+                 $('.dtp-actual-meridien').find('a').removeClass('selected');
+                 $(e.currentTarget).addClass('selected');
+
+                 if (this.currentDate.hour() < 12)
+                 {
+                    if (this.currentDate.add(12, 'hours'))
+                       this.showTime(this.currentDate);
+                 }
+                 this.toggleTime((this.currentView === 1));
+              },
+              _hideCalendar: function() {
+                 this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden');
+              },
+              convertHours: function (h)
+              {
+                 var _return = h;
+
+                 if (this.params.shortTime === true)
+                 {
+                    if ((h < 12) && this.isPM())
+                    {
+                       _return += 12;
+                    }
+                 }
+
+                 return _return;
+              },
+              setDate: function (date)
+              {
+                 this.params.currentDate = date;
+                 this.initDates();
+              },
+              setMinDate: function (date)
+              {
+                 this.params.minDate = date;
+                 this.initDates();
+              },
+              setMaxDate: function (date)
+              {
+                 this.params.maxDate = date;
+                 this.initDates();
+              },
+              destroy: function ()
+              {
+                 this._detachEvents();
+                 this.$dtpElement.remove();
+              },
+              show: function ()
+              {
+                 this.$dtpElement.removeClass('hidden');
+                 this._attachEvent($(window), 'keydown', this._onKeydown.bind(this));
+                 this._centerBox();
+                 this.$element.trigger('open');
+                 if (this.params.monthPicker === true)
+                 {
+                    this._hideCalendar();
+                 }
+              },
+              hide: function ()
+              {
+                 $(window).off('keydown', null, null, this._onKeydown.bind(this));
+                 this.$dtpElement.addClass('hidden');
+                 this.$element.trigger('close');
+              },
+              _centerBox: function ()
+              {
+                 var h = (this.$dtpElement.height() - this.$dtpElement.find('.dtp-content').height()) / 2;
+                 this.$dtpElement.find('.dtp-content').css('marginLeft', -(this.$dtpElement.find('.dtp-content').width() / 2) + 'px');
+                 this.$dtpElement.find('.dtp-content').css('top', h + 'px');
+              },
+              enableDays: function ()
+              {
+                 var enableDays = this.params.enableDays;
+                 if (enableDays) {
+                    $(".dtp-picker-days tbody tr td").each(function () {
+                       if (!(($.inArray($(this).index(), enableDays)) >= 0)) {
+                          $(this).find('a').css({
+                             "background": "#e3e3e3",
+                             "cursor": "no-drop",
+                             "opacity": "0.5"
+                          }).off("click");
+                       }
+                    });
+                 }
+              }
+
+           };
+})(jQuery, moment);