diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index de3de84e7e492b626cd2af104047286cf76fb6d1..386a5695f4f8802a2d0d1f8710b35d6863f85677 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -14,7 +14,6 @@ // /*= require jquery2 */ /*= require jquery-ui/autocomplete */ -/*= require jquery-ui/datepicker */ /*= require jquery-ui/draggable */ /*= require jquery-ui/effect-highlight */ /*= require jquery-ui/sortable */ @@ -26,6 +25,7 @@ /*= require jquery.scrollTo */ /*= require jquery.turbolinks */ /*= require jquery.tablesorter */ +/*= require pikaday */ /*= require js.cookie */ /*= require turbolinks */ /*= require autosave */ diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6 index 7e192e90fe64ab430662cf6b3915060a0067f96c..ac2966cef5d69a2d19eb1917e4ec2819ab9f8110 100644 --- a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 +++ b/app/assets/javascripts/boards/filters/due_date_filters.js.es6 @@ -1,6 +1,7 @@ /* global Vue */ +/* global dateFormat */ Vue.filter('due-date', (value) => { const date = new Date(value); - return $.datepicker.formatDate('M d, yy', date); + return dateFormat(date, 'mmm d, yyyy'); }); diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index f8b22a2ce46fe069c584ac080e32ee875e5d4697..a67e67b367fc60ebf166ae0e751501cee98d05c2 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -110,6 +110,7 @@ break; case 'projects:milestones:new': case 'projects:milestones:edit': + case 'projects:milestones:update': new ZenMode(); new gl.DueDateSelectors(); new GLForm($('.milestone-form')); diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6 index d81d4cf84255d1c7e5f1e0c7a9532b8360674c7d..5ce76901734b9c39259a9679e9b4e5436233a880 100644 --- a/app/assets/javascripts/due_date_select.js.es6 +++ b/app/assets/javascripts/due_date_select.js.es6 @@ -1,4 +1,6 @@ -/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */ +/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, prefer-const, padded-blocks, no-unused-vars, no-underscore-dangle, no-new, max-len, semi, no-sequences, no-unused-expressions, no-param-reassign */ +/* global dateFormat */ +/* global Pikaday */ (function(global) { class DueDateSelect { @@ -25,11 +27,14 @@ this.initGlDropdown(); this.initRemoveDueDate(); this.initDatePicker(); - this.initStopPropagation(); } initGlDropdown() { this.$dropdown.glDropdown({ + opened: () => { + const calendar = this.$datePicker.data('pikaday'); + calendar.show(); + }, hidden: () => { this.$selectbox.hide(); this.$value.css('display', ''); @@ -38,25 +43,39 @@ } initDatePicker() { - this.$datePicker.datepicker({ - dateFormat: 'yy-mm-dd', - defaultDate: $("input[name='" + this.fieldName + "']").val(), - altField: "input[name='" + this.fieldName + "']", - onSelect: () => { + const $dueDateInput = $(`input[name='${this.fieldName}']`); + + const calendar = new Pikaday({ + field: $dueDateInput.get(0), + theme: 'gitlab-theme', + format: 'yyyy-mm-dd', + onSelect: (dateText) => { + const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd'); + + $dueDateInput.val(formattedDate); + if (this.$dropdown.hasClass('js-issue-boards-due-date')) { - gl.issueBoards.BoardsStore.detail.issue.dueDate = $(`input[name='${this.fieldName}']`).val(); + gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val(); this.updateIssueBoardIssue(); } else { - return this.saveDueDate(true); + this.saveDueDate(true); } } }); + + calendar.setDate(new Date($dueDateInput.val())); + + this.$datePicker.append(calendar.el); + this.$datePicker.data('pikaday', calendar); } initRemoveDueDate() { this.$block.on('click', '.js-remove-due-date', (e) => { + const calendar = this.$datePicker.data('pikaday'); e.preventDefault(); + calendar.setDate(null); + if (this.$dropdown.hasClass('js-issue-boards-due-date')) { gl.issueBoards.BoardsStore.detail.issue.dueDate = ''; this.updateIssueBoardIssue(); @@ -67,12 +86,6 @@ }); } - initStopPropagation() { - $(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', (e) => { - return e.stopImmediatePropagation(); - }); - } - saveDueDate(isDropdown) { this.parseSelectedDate(); this.prepSelectedDate(); @@ -86,7 +99,7 @@ // Construct Date object manually to avoid buggy dateString support within Date constructor const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10)); const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]); - this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj); + this.displayedDate = dateFormat(dateObj, 'mmm d, yyyy'); } else { this.displayedDate = 'No due date'; } @@ -153,14 +166,25 @@ } initMilestoneDatePicker() { - $('.datepicker').datepicker({ - dateFormat: 'yy-mm-dd' + $('.datepicker').each(function() { + const $datePicker = $(this); + const calendar = new Pikaday({ + field: $datePicker.get(0), + theme: 'gitlab-theme', + format: 'yyyy-mm-dd', + onSelect(dateText) { + $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd')); + } + }); + calendar.setDate(new Date($datePicker.val())); + + $datePicker.data('pikaday', calendar); }); $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => { e.preventDefault(); - const datepicker = $(e.target).siblings('.datepicker'); - $.datepicker._clearDate(datepicker); + const calendar = $(e.target).siblings('.datepicker').data('pikaday'); + calendar.setDate(null); }); } diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index cc1c0877cdf4851f7295e6f4ef98ea142a550ef3..299d6faf64ce8cc0df78e0867bc9732858d40afd 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -438,7 +438,7 @@ } }; - GitLabDropdown.prototype.opened = function() { + GitLabDropdown.prototype.opened = function(e) { var contentHtml; this.resetRows(); this.addArrowKeyEvent(); @@ -458,6 +458,10 @@ this.positionMenuAbove(); } + if (this.options.opened) { + this.options.opened.call(this, e); + } + return this.dropdown.trigger('shown.gl.dropdown'); }; diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js index 3634bd8666c38c246d22d56fae2755f363cdb03e..0a783dd9c1886e7338b70529612ecade7e724805 100644 --- a/app/assets/javascripts/issuable_form.js +++ b/app/assets/javascripts/issuable_form.js @@ -4,6 +4,8 @@ /* global ZenMode */ /* global Autosave */ /* global GroupsSelect */ +/* global dateFormat */ +/* global Pikaday */ (function() { var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; }; @@ -14,7 +16,7 @@ IssuableForm.prototype.wipRegex = /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i; function IssuableForm(form) { - var $issuableDueDate; + var $issuableDueDate, calendar; this.form = form; this.toggleWip = bind(this.toggleWip, this); this.renderWipExplanation = bind(this.renderWipExplanation, this); @@ -37,12 +39,15 @@ this.initMoveDropdown(); $issuableDueDate = $('#issuable-due-date'); if ($issuableDueDate.length) { - $('.datepicker').datepicker({ - dateFormat: 'yy-mm-dd', - onSelect: function(dateText, inst) { - return $issuableDueDate.val(dateText); + calendar = new Pikaday({ + field: $issuableDueDate.get(0), + theme: 'gitlab-theme', + format: 'yyyy-mm-dd', + onSelect: function(dateText) { + $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd')); } - }).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $issuableDueDate.val())); + }); + calendar.setDate(new Date($issuableDueDate.val())); } } diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6 index bf6c0ec27982d962f0ed6a28b61c98a00415d422..8b045dfc1345429644295d1f6b8899c3728805c6 100644 --- a/app/assets/javascripts/member_expiration_date.js.es6 +++ b/app/assets/javascripts/member_expiration_date.js.es6 @@ -1,3 +1,5 @@ +/* global Pikaday */ +/* global dateFormat */ (() => { // Add datepickers to all `js-access-expiration-date` elements. If those elements are // children of an element with the `clearable-input` class, and have a sibling @@ -11,21 +13,36 @@ } const inputs = $(selector); - inputs.datepicker({ - dateFormat: 'yy-mm-dd', - minDate: 1, - onSelect: function onSelect() { - $(this).trigger('change'); - toggleClearInput.call(this); - }, + inputs.each((i, el) => { + const $input = $(el); + + const calendar = new Pikaday({ + field: $input.get(0), + theme: 'gitlab-theme', + format: 'yyyy-mm-dd', + minDate: new Date(), + onSelect(dateText) { + $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd')); + + $input.trigger('change'); + + toggleClearInput.call($input); + }, + }); + + calendar.setDate(new Date($input.val())); + + $input.data('pikaday', calendar); }); inputs.next('.js-clear-input').on('click', function clicked(event) { event.preventDefault(); const input = $(this).closest('.clearable-input').find(selector); - input.datepicker('setDate', null) - .trigger('change'); + const calendar = input.data('pikaday'); + + calendar.setDate(null); + input.trigger('change'); toggleClearInput.call(input); }); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8b93665d085eb8a5e7360588fe633d9b21d659eb..2eb7ff915a99fb884669149efe44cedd3397a6c7 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,13 +2,13 @@ * This is a manifest file that'll automatically include all the stylesheets available in this directory * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require jquery-ui/datepicker *= require jquery-ui/autocomplete *= require jquery.atwho *= require select2 *= require_self *= require dropzone/basic *= require cropper.css + *= require pikaday */ /* diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index ef921a8c6a94953c5b01eb65d323b56993bf6443..12f03953ca3f20ea97f465335b1779ddc48a3647 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -42,3 +42,56 @@ float: right; font-size: 12px; } + +.pika-single.gitlab-theme { + .pika-label { + color: $gl-text-color-secondary; + font-size: 14px; + font-weight: normal; + } + + th { + padding: 2px 0; + color: $note-disabled-comment-color; + font-weight: normal; + text-transform: lowercase; + border-top: 1px solid $calendar-border-color; + } + + abbr { + cursor: default; + } + + td { + border: 1px solid $calendar-border-color; + + &:first-child { + border-left: 0; + } + + &:last-child { + border-right: 0; + } + } + + .pika-day { + border-radius: 0; + background-color: $white-light; + text-align: center; + } + + .is-today { + .pika-day { + color: inherit; + font-weight: normal; + } + } + + .is-selected .pika-day, + .pika-day:hover, + .is-today .pika-day:hover { + background: $gl-primary; + color: $white-light; + box-shadow: none; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 6ed5f8b2ddaac6c847d7c75f5a376715155a13e3..30b59fdf3cd5030bcd4dc0feb3b944ccf2d17784 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -501,119 +501,16 @@ max-height: 230px; } - .ui-widget { - table { - margin: 0; - } - - &.ui-datepicker-inline { - padding: 0 10px; - border: 0; - width: 100%; - } - - .ui-datepicker-header { - padding: 0 8px 10px; - border: 0; - - .ui-icon { - background: none; - font-size: 20px; - text-indent: 0; - - &::before { - display: block; - position: relative; - top: -2px; - color: $dropdown-title-btn-color; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - } - } - - .ui-datepicker-calendar { - .ui-state-hover, - .ui-state-active { - color: $white-light; - border: 0; - } - } - - .ui-datepicker-prev, - .ui-datepicker-next { - top: 0; - height: 15px; - cursor: pointer; - - &:hover { - background-color: transparent; - border: 0; - - .ui-icon::before { - color: $md-link-color; - } - } - } - - .ui-datepicker-prev { - left: 0; - - .ui-icon::before { - content: '\f104'; - text-align: left; - } - } - - .ui-datepicker-next { - right: 0; - - .ui-icon::before { - content: '\f105'; - text-align: right; - } - } - - td { - padding: 0; - border: 1px solid $calendar-border-color; - - &:first-child { - border-left: 0; - } - - &:last-child { - border-right: 0; - } - - a { - line-height: 17px; - border: 0; - border-radius: 0; - } - } - - .ui-datepicker-title { - color: $gl-text-color; - font-size: 14px; - line-height: 1; - font-weight: normal; - } - } - - th { - padding: 2px 0; - color: $note-disabled-comment-color; - font-weight: normal; - text-transform: lowercase; - border-top: 1px solid $calendar-border-color; + .pika-single { + position: relative!important; + top: 0!important; + border: 0; + box-shadow: none; } - .ui-datepicker-unselectable { - background-color: $gray-light; + .pika-lendar { + margin-top: -5px; + margin-bottom: 0; } } diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index 18f2f316f02124b3eb2a95466cf6316943151605..317f9ff3c188bb0ce58e17d261abaa3507cfdbc7 100644 --- a/app/assets/stylesheets/framework/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss @@ -2,42 +2,6 @@ font-family: $regular_font; font-size: $font-size-base; - &.ui-datepicker, - &.ui-datepicker-inline { - border: 1px solid $jq-ui-border; - padding: 10px; - width: 270px; - - .ui-datepicker-header { - background: $white-light; - border-color: $jq-ui-border; - - .ui-datepicker-prev, - .ui-datepicker-next { - top: 4px; - } - - .ui-datepicker-prev { - left: 2px; - } - - .ui-datepicker-next { - right: 2px; - } - - .ui-state-hover { - background: transparent; - border: 0; - cursor: pointer; - } - } - - .ui-datepicker-calendar td a { - padding: 5px; - text-align: center; - } - } - &.ui-autocomplete { border-color: $jq-ui-border; padding: 0; @@ -59,16 +23,6 @@ border: 0; background: transparent; } - - .ui-datepicker-calendar { - .ui-state-active, - .ui-state-hover, - .ui-state-focus { - border: 1px solid $gl-primary; - background: $gl-primary; - color: $white-light; - } - } } .ui-sortable-handle { diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 722b3006f7c870b12e62e32228aa766dd02b4c42..8031c4467a47db0088728c4322f97e4e4ea7a370 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -201,10 +201,6 @@ color: $note-disabled-comment-color; } -.datepicker.personal-access-tokens-expires-at .ui-state-disabled span { - text-align: center; -} - .created-personal-access-token-container { #created-personal-access-token { width: 90%; diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml index 60a561c9f9c1483d48414087780d01d80b9626e3..b10f5fc08e2bdda5cc0e5c0631a310815e78b62e 100644 --- a/app/views/profiles/personal_access_tokens/index.html.haml +++ b/app/views/profiles/personal_access_tokens/index.html.haml @@ -85,11 +85,17 @@ :javascript - var date = $('#personal_access_token_expires_at').val(); - - var datepicker = $(".datepicker").datepicker({ - dateFormat: "yy-mm-dd", - minDate: 0 + var $dateField = $('#personal_access_token_expires_at'); + var date = $dateField.val(); + + new Pikaday({ + field: $dateField.get(0), + theme: 'gitlab-theme', + format: 'yyyy-mm-dd', + minDate: new Date(), + onSelect: function(dateText) { + $dateField.val(dateFormat(new Date(dateText), 'yyyy-mm-dd')); + } }); $("#created-personal-access-token").click(function() { diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml index 748b10a1298742905ec7989ca3240ce413d4d942..ed94773ef89f4978cb32f913656c5cdd538f65c5 100644 --- a/app/views/shared/milestones/_form_dates.html.haml +++ b/app/views/shared/milestones/_form_dates.html.haml @@ -10,6 +10,3 @@ .col-sm-10 = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date" %a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date - -:javascript - new gl.DueDateSelectors(); diff --git a/changelogs/unreleased/remove-jquery-ui-datepicker.yml b/changelogs/unreleased/remove-jquery-ui-datepicker.yml new file mode 100644 index 0000000000000000000000000000000000000000..cd00690d774275caa22a4de363204718b0700a28 --- /dev/null +++ b/changelogs/unreleased/remove-jquery-ui-datepicker.yml @@ -0,0 +1,4 @@ +--- +title: Replaced jQuery UI datepicker +merge_request: +author: diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb index 188d33e8ef4338e1127cb6df1f627dd6553af5c0..bf1046620dca5c1ab4a4def0197fe2c731c2f37a 100644 --- a/spec/features/boards/sidebar_spec.rb +++ b/spec/features/boards/sidebar_spec.rb @@ -194,7 +194,7 @@ page.within('.due_date') do click_link 'Edit' - click_link Date.today.day + click_button Date.today.day wait_for_vue_resource diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb index 21e70b3141af3a24888057e67eac8a66b1e44732..3da68b723bfffa73c8a86dcbdaf22c373d19f0d4 100644 --- a/spec/features/issues_spec.rb +++ b/spec/features/issues_spec.rb @@ -78,8 +78,8 @@ fill_in 'issue_description', with: 'bug description' find('#issuable-due-date').click - page.within '.ui-datepicker' do - click_link date.day + page.within '.pika-single' do + click_button date.day end expect(find('#issuable-due-date').value).to eq date.to_s @@ -110,8 +110,8 @@ fill_in 'issue_description', with: 'bug description' find('#issuable-due-date').click - page.within '.ui-datepicker' do - click_link date.day + page.within '.pika-single' do + click_button date.day end expect(find('#issuable-due-date').value).to eq date.to_s @@ -645,8 +645,8 @@ page.within '.due_date' do click_link 'Edit' - page.within '.ui-datepicker-calendar' do - click_link date.day + page.within '.pika-single' do + click_button date.day end wait_for_ajax @@ -656,11 +656,13 @@ end it 'removes due date from issue' do + date = Date.today.at_beginning_of_month + 2.days + page.within '.due_date' do click_link 'Edit' - page.within '.ui-datepicker-calendar' do - first('.ui-state-default').click + page.within '.pika-single' do + click_button date.day end wait_for_ajax diff --git a/spec/features/profiles/personal_access_tokens_spec.rb b/spec/features/profiles/personal_access_tokens_spec.rb index 55a01057c83b25b1d7acea05b2033e3d3563f955..eb7b8a246695dc03d942a7bbeaeef5628894556e 100644 --- a/spec/features/profiles/personal_access_tokens_spec.rb +++ b/spec/features/profiles/personal_access_tokens_spec.rb @@ -34,7 +34,7 @@ def disallow_personal_access_token_saves! # Set date to 1st of next month find_field("Expires at").trigger('focus') - find("a[title='Next']").click + find(".pika-next").click click_on "1" # Scopes diff --git a/spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb b/spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb index f136d9ce0fa20f60973c085a0699b4b3387d385d..c3f45be6e4b9f70664cf841f6fa851237f295d2a 100644 --- a/spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb +++ b/spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb @@ -14,15 +14,16 @@ login_as(master) end - scenario 'expiration date is displayed in the members list', js: true do + scenario 'expiration date is displayed in the members list' do travel_to Time.zone.parse('2016-08-06 08:00') do - visit namespace_project_settings_members_path(project.namespace, project) + date = 4.days.from_now + visit namespace_project_project_members_path(project.namespace, project) + page.within '.users-project-form' do select2(new_member.id, from: '#user_ids', multiple: true) - fill_in 'expires_at', with: '2016-08-10' + fill_in 'expires_at', with: date.to_s(:medium) + click_on 'Add to project' end - find('.users-project-form').click - click_on 'Add to project' page.within "#project_member_#{new_member.project_members.first.id}" do expect(page).to have_content('Expires in 4 days') @@ -32,11 +33,12 @@ scenario 'change expiration date' do travel_to Time.zone.parse('2016-08-06 08:00') do - project.team.add_users([new_member.id], :developer, expires_at: '2016-09-06') + date = 3.days.from_now + project.team.add_users([new_member.id], :developer, expires_at: Date.today.to_s(:medium)) visit namespace_project_project_members_path(project.namespace, project) page.within "#project_member_#{new_member.project_members.first.id}" do - find('.js-access-expiration-date').set '2016-08-09' + find('.js-access-expiration-date').set date.to_s(:medium) wait_for_ajax expect(page).to have_content('Expires in 3 days') end diff --git a/vendor/assets/javascripts/pikaday.js b/vendor/assets/javascripts/pikaday.js new file mode 100644 index 0000000000000000000000000000000000000000..225335627fcebcb7260ef9dee654fed27f22674e --- /dev/null +++ b/vendor/assets/javascripts/pikaday.js @@ -0,0 +1,1193 @@ +/*! + * Pikaday + * + * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday + */ + +(function (root, factory) +{ + 'use strict'; + + var moment; + if (typeof exports === 'object') { + // CommonJS module + // Load moment.js as an optional dependency + try { moment = require('moment'); } catch (e) {} + module.exports = factory(moment); + } else if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(function (req) + { + // Load moment.js as an optional dependency + var id = 'moment'; + try { moment = req(id); } catch (e) {} + return factory(moment); + }); + } else { + root.Pikaday = factory(root.moment); + } +}(this, function (moment) +{ + 'use strict'; + + /** + * feature detection and helper functions + */ + var hasMoment = typeof moment === 'function', + + hasEventListeners = !!window.addEventListener, + + document = window.document, + + sto = window.setTimeout, + + addEvent = function(el, e, callback, capture) + { + if (hasEventListeners) { + el.addEventListener(e, callback, !!capture); + } else { + el.attachEvent('on' + e, callback); + } + }, + + removeEvent = function(el, e, callback, capture) + { + if (hasEventListeners) { + el.removeEventListener(e, callback, !!capture); + } else { + el.detachEvent('on' + e, callback); + } + }, + + fireEvent = function(el, eventName, data) + { + var ev; + + if (document.createEvent) { + ev = document.createEvent('HTMLEvents'); + ev.initEvent(eventName, true, false); + ev = extend(ev, data); + el.dispatchEvent(ev); + } else if (document.createEventObject) { + ev = document.createEventObject(); + ev = extend(ev, data); + el.fireEvent('on' + eventName, ev); + } + }, + + trim = function(str) + { + return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); + }, + + hasClass = function(el, cn) + { + return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1; + }, + + addClass = function(el, cn) + { + if (!hasClass(el, cn)) { + el.className = (el.className === '') ? cn : el.className + ' ' + cn; + } + }, + + removeClass = function(el, cn) + { + el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' ')); + }, + + isArray = function(obj) + { + return (/Array/).test(Object.prototype.toString.call(obj)); + }, + + isDate = function(obj) + { + return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime()); + }, + + isWeekend = function(date) + { + var day = date.getDay(); + return day === 0 || day === 6; + }, + + isLeapYear = function(year) + { + // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951 + return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0; + }, + + getDaysInMonth = function(year, month) + { + return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; + }, + + setToStartOfDay = function(date) + { + if (isDate(date)) date.setHours(0,0,0,0); + }, + + compareDates = function(a,b) + { + // weak date comparison (use setToStartOfDay(date) to ensure correct result) + return a.getTime() === b.getTime(); + }, + + extend = function(to, from, overwrite) + { + var prop, hasProp; + for (prop in from) { + hasProp = to[prop] !== undefined; + if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) { + if (isDate(from[prop])) { + if (overwrite) { + to[prop] = new Date(from[prop].getTime()); + } + } + else if (isArray(from[prop])) { + if (overwrite) { + to[prop] = from[prop].slice(0); + } + } else { + to[prop] = extend({}, from[prop], overwrite); + } + } else if (overwrite || !hasProp) { + to[prop] = from[prop]; + } + } + return to; + }, + + adjustCalendar = function(calendar) { + if (calendar.month < 0) { + calendar.year -= Math.ceil(Math.abs(calendar.month)/12); + calendar.month += 12; + } + if (calendar.month > 11) { + calendar.year += Math.floor(Math.abs(calendar.month)/12); + calendar.month -= 12; + } + return calendar; + }, + + /** + * defaults and localisation + */ + defaults = { + + // bind the picker to a form field + field: null, + + // automatically show/hide the picker on `field` focus (default `true` if `field` is set) + bound: undefined, + + // position of the datepicker, relative to the field (default to bottom & left) + // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position) + position: 'bottom left', + + // automatically fit in the viewport even if it means repositioning from the position option + reposition: true, + + // the default output format for `.toString()` and `field` value + format: 'YYYY-MM-DD', + + // the initial date to view when first opened + defaultDate: null, + + // make the `defaultDate` the initial selected value + setDefaultDate: false, + + // first day of week (0: Sunday, 1: Monday etc) + firstDay: 0, + + // the default flag for moment's strict date parsing + formatStrict: false, + + // the minimum/earliest date that can be selected + minDate: null, + // the maximum/latest date that can be selected + maxDate: null, + + // number of years either side, or array of upper/lower range + yearRange: 10, + + // show week numbers at head of row + showWeekNumber: false, + + // used internally (don't config outside) + minYear: 0, + maxYear: 9999, + minMonth: undefined, + maxMonth: undefined, + + startRange: null, + endRange: null, + + isRTL: false, + + // Additional text to append to the year in the calendar title + yearSuffix: '', + + // Render the month after year in the calendar title + showMonthAfterYear: false, + + // Render days of the calendar grid that fall in the next or previous month + showDaysInNextAndPreviousMonths: false, + + // how many months are visible + numberOfMonths: 1, + + // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`) + // only used for the first display or when a selected date is not visible + mainCalendar: 'left', + + // Specify a DOM element to render the calendar in + container: undefined, + + // internationalization + i18n: { + previousMonth : 'Previous Month', + nextMonth : 'Next Month', + months : ['January','February','March','April','May','June','July','August','September','October','November','December'], + weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], + weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] + }, + + // Theme Classname + theme: null, + + // callback function + onSelect: null, + onOpen: null, + onClose: null, + onDraw: null + }, + + + /** + * templating functions to abstract HTML rendering + */ + renderDayName = function(opts, day, abbr) + { + day += opts.firstDay; + while (day >= 7) { + day -= 7; + } + return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day]; + }, + + renderDay = function(opts) + { + var arr = []; + var ariaSelected = 'false'; + if (opts.isEmpty) { + if (opts.showDaysInNextAndPreviousMonths) { + arr.push('is-outside-current-month'); + } else { + return ''; + } + } + if (opts.isDisabled) { + arr.push('is-disabled'); + } + if (opts.isToday) { + arr.push('is-today'); + } + if (opts.isSelected) { + arr.push('is-selected'); + ariaSelected = 'true'; + } + if (opts.isInRange) { + arr.push('is-inrange'); + } + if (opts.isStartRange) { + arr.push('is-startrange'); + } + if (opts.isEndRange) { + arr.push('is-endrange'); + } + return '' + + '' + + ''; + }, + + renderWeek = function (d, m, y) { + // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified. + var onejan = new Date(y, 0, 1), + weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7); + return '' + weekNum + ''; + }, + + renderRow = function(days, isRTL) + { + return '' + (isRTL ? days.reverse() : days).join('') + ''; + }, + + renderBody = function(rows) + { + return '' + rows.join('') + ''; + }, + + renderHead = function(opts) + { + var i, arr = []; + if (opts.showWeekNumber) { + arr.push(''); + } + for (i = 0; i < 7; i++) { + arr.push('' + renderDayName(opts, i, true) + ''); + } + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + }, + + renderTitle = function(instance, c, year, month, refYear, randId) + { + var i, j, arr, + opts = instance._o, + isMinYear = year === opts.minYear, + isMaxYear = year === opts.maxYear, + html = '
', + monthHtml, + yearHtml, + prev = true, + next = true; + + for (arr = [], i = 0; i < 12; i++) { + arr.push(''); + } + + monthHtml = '
' + opts.i18n.months[month] + '
'; + + if (isArray(opts.yearRange)) { + i = opts.yearRange[0]; + j = opts.yearRange[1] + 1; + } else { + i = year - opts.yearRange; + j = 1 + year + opts.yearRange; + } + + for (arr = []; i < j && i <= opts.maxYear; i++) { + if (i >= opts.minYear) { + arr.push(''); + } + } + yearHtml = '
' + year + opts.yearSuffix + '
'; + + if (opts.showMonthAfterYear) { + html += yearHtml + monthHtml; + } else { + html += monthHtml + yearHtml; + } + + if (isMinYear && (month === 0 || opts.minMonth >= month)) { + prev = false; + } + + if (isMaxYear && (month === 11 || opts.maxMonth <= month)) { + next = false; + } + + if (c === 0) { + html += ''; + } + if (c === (instance._o.numberOfMonths - 1) ) { + html += ''; + } + + return html += '
'; + }, + + renderTable = function(opts, data, randId) + { + return '' + renderHead(opts) + renderBody(data) + '
'; + }, + + + /** + * Pikaday constructor + */ + Pikaday = function(options) + { + var self = this, + opts = self.config(options); + + self._onMouseDown = function(e) + { + if (!self._v) { + return; + } + e = e || window.event; + var target = e.target || e.srcElement; + if (!target) { + return; + } + + if (!hasClass(target, 'is-disabled')) { + if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) { + self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day'))); + if (opts.bound) { + sto(function() { + self.hide(); + if (opts.field) { + opts.field.blur(); + } + }, 100); + } + } + else if (hasClass(target, 'pika-prev')) { + self.prevMonth(); + } + else if (hasClass(target, 'pika-next')) { + self.nextMonth(); + } + } + if (!hasClass(target, 'pika-select')) { + // if this is touch event prevent mouse events emulation + if (e.preventDefault) { + e.preventDefault(); + } else { + e.returnValue = false; + return false; + } + } else { + self._c = true; + } + }; + + self._onChange = function(e) + { + e = e || window.event; + var target = e.target || e.srcElement; + if (!target) { + return; + } + if (hasClass(target, 'pika-select-month')) { + self.gotoMonth(target.value); + } + else if (hasClass(target, 'pika-select-year')) { + self.gotoYear(target.value); + } + }; + + self._onKeyChange = function(e) + { + e = e || window.event; + + if (self.isVisible()) { + + switch(e.keyCode){ + case 13: + case 27: + opts.field.blur(); + break; + case 37: + e.preventDefault(); + self.adjustDate('subtract', 1); + break; + case 38: + self.adjustDate('subtract', 7); + break; + case 39: + self.adjustDate('add', 1); + break; + case 40: + self.adjustDate('add', 7); + break; + } + } + }; + + self._onInputChange = function(e) + { + var date; + + if (e.firedBy === self) { + return; + } + if (hasMoment) { + date = moment(opts.field.value, opts.format, opts.formatStrict); + date = (date && date.isValid()) ? date.toDate() : null; + } + else { + date = new Date(Date.parse(opts.field.value)); + } + if (isDate(date)) { + self.setDate(date); + } + if (!self._v) { + self.show(); + } + }; + + self._onInputFocus = function() + { + self.show(); + }; + + self._onInputClick = function() + { + self.show(); + }; + + self._onInputBlur = function() + { + // IE allows pika div to gain focus; catch blur the input field + var pEl = document.activeElement; + do { + if (hasClass(pEl, 'pika-single')) { + return; + } + } + while ((pEl = pEl.parentNode)); + + if (!self._c) { + self._b = sto(function() { + self.hide(); + }, 50); + } + self._c = false; + }; + + self._onClick = function(e) + { + e = e || window.event; + var target = e.target || e.srcElement, + pEl = target; + if (!target) { + return; + } + if (!hasEventListeners && hasClass(target, 'pika-select')) { + if (!target.onchange) { + target.setAttribute('onchange', 'return;'); + addEvent(target, 'change', self._onChange); + } + } + do { + if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) { + return; + } + } + while ((pEl = pEl.parentNode)); + if (self._v && target !== opts.trigger && pEl !== opts.trigger) { + self.hide(); + } + }; + + self.el = document.createElement('div'); + self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '') + (opts.theme ? ' ' + opts.theme : ''); + + addEvent(self.el, 'mousedown', self._onMouseDown, true); + addEvent(self.el, 'touchend', self._onMouseDown, true); + addEvent(self.el, 'change', self._onChange); + addEvent(document, 'keydown', self._onKeyChange); + + if (opts.field) { + if (opts.container) { + opts.container.appendChild(self.el); + } else if (opts.bound) { + document.body.appendChild(self.el); + } else { + opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling); + } + addEvent(opts.field, 'change', self._onInputChange); + + if (!opts.defaultDate) { + if (hasMoment && opts.field.value) { + opts.defaultDate = moment(opts.field.value, opts.format).toDate(); + } else { + opts.defaultDate = new Date(Date.parse(opts.field.value)); + } + opts.setDefaultDate = true; + } + } + + var defDate = opts.defaultDate; + + if (isDate(defDate)) { + if (opts.setDefaultDate) { + self.setDate(defDate, true); + } else { + self.gotoDate(defDate); + } + } else { + self.gotoDate(new Date()); + } + + if (opts.bound) { + this.hide(); + self.el.className += ' is-bound'; + addEvent(opts.trigger, 'click', self._onInputClick); + addEvent(opts.trigger, 'focus', self._onInputFocus); + addEvent(opts.trigger, 'blur', self._onInputBlur); + } else { + this.show(); + } + }; + + + /** + * public Pikaday API + */ + Pikaday.prototype = { + + + /** + * configure functionality + */ + config: function(options) + { + if (!this._o) { + this._o = extend({}, defaults, true); + } + + var opts = extend(this._o, options, true); + + opts.isRTL = !!opts.isRTL; + + opts.field = (opts.field && opts.field.nodeName) ? opts.field : null; + + opts.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : null; + + opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field); + + opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field; + + opts.disableWeekends = !!opts.disableWeekends; + + opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null; + + var nom = parseInt(opts.numberOfMonths, 10) || 1; + opts.numberOfMonths = nom > 4 ? 4 : nom; + + if (!isDate(opts.minDate)) { + opts.minDate = false; + } + if (!isDate(opts.maxDate)) { + opts.maxDate = false; + } + if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) { + opts.maxDate = opts.minDate = false; + } + if (opts.minDate) { + this.setMinDate(opts.minDate); + } + if (opts.maxDate) { + this.setMaxDate(opts.maxDate); + } + + if (isArray(opts.yearRange)) { + var fallback = new Date().getFullYear() - 10; + opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback; + opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback; + } else { + opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange; + if (opts.yearRange > 100) { + opts.yearRange = 100; + } + } + + return opts; + }, + + /** + * return a formatted string of the current selection (using Moment.js if available) + */ + toString: function(format) + { + return !isDate(this._d) ? '' : hasMoment ? moment(this._d).format(format || this._o.format) : this._d.toDateString(); + }, + + /** + * return a Moment.js object of the current selection (if available) + */ + getMoment: function() + { + return hasMoment ? moment(this._d) : null; + }, + + /** + * set the current selection from a Moment.js object (if available) + */ + setMoment: function(date, preventOnSelect) + { + if (hasMoment && moment.isMoment(date)) { + this.setDate(date.toDate(), preventOnSelect); + } + }, + + /** + * return a Date object of the current selection with fallback for the current date + */ + getDate: function() + { + return isDate(this._d) ? new Date(this._d.getTime()) : new Date(); + }, + + /** + * set the current selection + */ + setDate: function(date, preventOnSelect) + { + if (!date) { + this._d = null; + + if (this._o.field) { + this._o.field.value = ''; + fireEvent(this._o.field, 'change', { firedBy: this }); + } + + return this.draw(); + } + if (typeof date === 'string') { + date = new Date(Date.parse(date)); + } + if (!isDate(date)) { + return; + } + + var min = this._o.minDate, + max = this._o.maxDate; + + if (isDate(min) && date < min) { + date = min; + } else if (isDate(max) && date > max) { + date = max; + } + + this._d = new Date(date.getTime()); + setToStartOfDay(this._d); + this.gotoDate(this._d); + + if (this._o.field) { + this._o.field.value = this.toString(); + fireEvent(this._o.field, 'change', { firedBy: this }); + } + if (!preventOnSelect && typeof this._o.onSelect === 'function') { + this._o.onSelect.call(this, this.getDate()); + } + }, + + /** + * change view to a specific date + */ + gotoDate: function(date) + { + var newCalendar = true; + + if (!isDate(date)) { + return; + } + + if (this.calendars) { + var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), + lastVisibleDate = new Date(this.calendars[this.calendars.length-1].year, this.calendars[this.calendars.length-1].month, 1), + visibleDate = date.getTime(); + // get the end of the month + lastVisibleDate.setMonth(lastVisibleDate.getMonth()+1); + lastVisibleDate.setDate(lastVisibleDate.getDate()-1); + newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate); + } + + if (newCalendar) { + this.calendars = [{ + month: date.getMonth(), + year: date.getFullYear() + }]; + if (this._o.mainCalendar === 'right') { + this.calendars[0].month += 1 - this._o.numberOfMonths; + } + } + + this.adjustCalendars(); + }, + + adjustDate: function(sign, days) { + + var day = this.getDate(); + var difference = parseInt(days)*24*60*60*1000; + + var newDay; + + if (sign === 'add') { + newDay = new Date(day.valueOf() + difference); + } else if (sign === 'subtract') { + newDay = new Date(day.valueOf() - difference); + } + + if (hasMoment) { + if (sign === 'add') { + newDay = moment(day).add(days, "days").toDate(); + } else if (sign === 'subtract') { + newDay = moment(day).subtract(days, "days").toDate(); + } + } + + this.setDate(newDay); + }, + + adjustCalendars: function() { + this.calendars[0] = adjustCalendar(this.calendars[0]); + for (var c = 1; c < this._o.numberOfMonths; c++) { + this.calendars[c] = adjustCalendar({ + month: this.calendars[0].month + c, + year: this.calendars[0].year + }); + } + this.draw(); + }, + + gotoToday: function() + { + this.gotoDate(new Date()); + }, + + /** + * change view to a specific month (zero-index, e.g. 0: January) + */ + gotoMonth: function(month) + { + if (!isNaN(month)) { + this.calendars[0].month = parseInt(month, 10); + this.adjustCalendars(); + } + }, + + nextMonth: function() + { + this.calendars[0].month++; + this.adjustCalendars(); + }, + + prevMonth: function() + { + this.calendars[0].month--; + this.adjustCalendars(); + }, + + /** + * change view to a specific full year (e.g. "2012") + */ + gotoYear: function(year) + { + if (!isNaN(year)) { + this.calendars[0].year = parseInt(year, 10); + this.adjustCalendars(); + } + }, + + /** + * change the minDate + */ + setMinDate: function(value) + { + if(value instanceof Date) { + setToStartOfDay(value); + this._o.minDate = value; + this._o.minYear = value.getFullYear(); + this._o.minMonth = value.getMonth(); + } else { + this._o.minDate = defaults.minDate; + this._o.minYear = defaults.minYear; + this._o.minMonth = defaults.minMonth; + this._o.startRange = defaults.startRange; + } + + this.draw(); + }, + + /** + * change the maxDate + */ + setMaxDate: function(value) + { + if(value instanceof Date) { + setToStartOfDay(value); + this._o.maxDate = value; + this._o.maxYear = value.getFullYear(); + this._o.maxMonth = value.getMonth(); + } else { + this._o.maxDate = defaults.maxDate; + this._o.maxYear = defaults.maxYear; + this._o.maxMonth = defaults.maxMonth; + this._o.endRange = defaults.endRange; + } + + this.draw(); + }, + + setStartRange: function(value) + { + this._o.startRange = value; + }, + + setEndRange: function(value) + { + this._o.endRange = value; + }, + + /** + * refresh the HTML + */ + draw: function(force) + { + if (!this._v && !force) { + return; + } + var opts = this._o, + minYear = opts.minYear, + maxYear = opts.maxYear, + minMonth = opts.minMonth, + maxMonth = opts.maxMonth, + html = '', + randId; + + if (this._y <= minYear) { + this._y = minYear; + if (!isNaN(minMonth) && this._m < minMonth) { + this._m = minMonth; + } + } + if (this._y >= maxYear) { + this._y = maxYear; + if (!isNaN(maxMonth) && this._m > maxMonth) { + this._m = maxMonth; + } + } + + randId = 'pika-title-' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 2); + + for (var c = 0; c < opts.numberOfMonths; c++) { + html += '
' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId) + '
'; + } + + this.el.innerHTML = html; + + if (opts.bound) { + if(opts.field.type !== 'hidden') { + sto(function() { + opts.trigger.focus(); + }, 1); + } + } + + if (typeof this._o.onDraw === 'function') { + this._o.onDraw(this); + } + + if (opts.bound) { + // let the screen reader user know to use arrow keys + opts.field.setAttribute('aria-label', 'Use the arrow keys to pick a date'); + } + }, + + adjustPosition: function() + { + var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect; + + if (this._o.container) return; + + this.el.style.position = 'absolute'; + + field = this._o.trigger; + pEl = field; + width = this.el.offsetWidth; + height = this.el.offsetHeight; + viewportWidth = window.innerWidth || document.documentElement.clientWidth; + viewportHeight = window.innerHeight || document.documentElement.clientHeight; + scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; + + if (typeof field.getBoundingClientRect === 'function') { + clientRect = field.getBoundingClientRect(); + left = clientRect.left + window.pageXOffset; + top = clientRect.bottom + window.pageYOffset; + } else { + left = pEl.offsetLeft; + top = pEl.offsetTop + pEl.offsetHeight; + while((pEl = pEl.offsetParent)) { + left += pEl.offsetLeft; + top += pEl.offsetTop; + } + } + + // default position is bottom & left + if ((this._o.reposition && left + width > viewportWidth) || + ( + this._o.position.indexOf('right') > -1 && + left - width + field.offsetWidth > 0 + ) + ) { + left = left - width + field.offsetWidth; + } + if ((this._o.reposition && top + height > viewportHeight + scrollTop) || + ( + this._o.position.indexOf('top') > -1 && + top - height - field.offsetHeight > 0 + ) + ) { + top = top - height - field.offsetHeight; + } + + this.el.style.left = left + 'px'; + this.el.style.top = top + 'px'; + }, + + /** + * render HTML for a particular month + */ + render: function(year, month, randId) + { + var opts = this._o, + now = new Date(), + days = getDaysInMonth(year, month), + before = new Date(year, month, 1).getDay(), + data = [], + row = []; + setToStartOfDay(now); + if (opts.firstDay > 0) { + before -= opts.firstDay; + if (before < 0) { + before += 7; + } + } + var previousMonth = month === 0 ? 11 : month - 1, + nextMonth = month === 11 ? 0 : month + 1, + yearOfPreviousMonth = month === 0 ? year - 1 : year, + yearOfNextMonth = month === 11 ? year + 1 : year, + daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth); + var cells = days + before, + after = cells; + while(after > 7) { + after -= 7; + } + cells += 7 - after; + for (var i = 0, r = 0; i < cells; i++) + { + var day = new Date(year, month, 1 + (i - before)), + isSelected = isDate(this._d) ? compareDates(day, this._d) : false, + isToday = compareDates(day, now), + isEmpty = i < before || i >= (days + before), + dayNumber = 1 + (i - before), + monthNumber = month, + yearNumber = year, + isStartRange = opts.startRange && compareDates(opts.startRange, day), + isEndRange = opts.endRange && compareDates(opts.endRange, day), + isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, + isDisabled = (opts.minDate && day < opts.minDate) || + (opts.maxDate && day > opts.maxDate) || + (opts.disableWeekends && isWeekend(day)) || + (opts.disableDayFn && opts.disableDayFn(day)); + + if (isEmpty) { + if (i < before) { + dayNumber = daysInPreviousMonth + dayNumber; + monthNumber = previousMonth; + yearNumber = yearOfPreviousMonth; + } else { + dayNumber = dayNumber - days; + monthNumber = nextMonth; + yearNumber = yearOfNextMonth; + } + } + + var dayConfig = { + day: dayNumber, + month: monthNumber, + year: yearNumber, + isSelected: isSelected, + isToday: isToday, + isDisabled: isDisabled, + isEmpty: isEmpty, + isStartRange: isStartRange, + isEndRange: isEndRange, + isInRange: isInRange, + showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths + }; + + row.push(renderDay(dayConfig)); + + if (++r === 7) { + if (opts.showWeekNumber) { + row.unshift(renderWeek(i - before, month, year)); + } + data.push(renderRow(row, opts.isRTL)); + row = []; + r = 0; + } + } + return renderTable(opts, data, randId); + }, + + isVisible: function() + { + return this._v; + }, + + show: function() + { + if (!this.isVisible()) { + removeClass(this.el, 'is-hidden'); + this._v = true; + this.draw(); + if (this._o.bound) { + addEvent(document, 'click', this._onClick); + this.adjustPosition(); + } + if (typeof this._o.onOpen === 'function') { + this._o.onOpen.call(this); + } + } + }, + + hide: function() + { + var v = this._v; + if (v !== false) { + if (this._o.bound) { + removeEvent(document, 'click', this._onClick); + } + this.el.style.position = 'static'; // reset + this.el.style.left = 'auto'; + this.el.style.top = 'auto'; + addClass(this.el, 'is-hidden'); + this._v = false; + if (v !== undefined && typeof this._o.onClose === 'function') { + this._o.onClose.call(this); + } + } + }, + + /** + * GAME OVER + */ + destroy: function() + { + this.hide(); + removeEvent(this.el, 'mousedown', this._onMouseDown, true); + removeEvent(this.el, 'touchend', this._onMouseDown, true); + removeEvent(this.el, 'change', this._onChange); + if (this._o.field) { + removeEvent(this._o.field, 'change', this._onInputChange); + if (this._o.bound) { + removeEvent(this._o.trigger, 'click', this._onInputClick); + removeEvent(this._o.trigger, 'focus', this._onInputFocus); + removeEvent(this._o.trigger, 'blur', this._onInputBlur); + } + } + if (this.el.parentNode) { + this.el.parentNode.removeChild(this.el); + } + } + + }; + + return Pikaday; + +})); diff --git a/vendor/assets/stylesheets/pikaday.scss b/vendor/assets/stylesheets/pikaday.scss new file mode 100644 index 0000000000000000000000000000000000000000..f6c7831768880892137577a6ce226c3a09e881c9 --- /dev/null +++ b/vendor/assets/stylesheets/pikaday.scss @@ -0,0 +1,221 @@ +@charset "UTF-8"; + +/*! + * Pikaday + * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ + */ + +.pika-single { + z-index: 9999; + display: block; + position: relative; + color: #333; + background: #fff; + border: 1px solid #ccc; + border-bottom-color: #bbb; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +/* +clear child float (pika-lendar), using the famous micro clearfix hack +http://nicolasgallagher.com/micro-clearfix-hack/ +*/ +.pika-single:before, +.pika-single:after { + content: " "; + display: table; +} +.pika-single:after { clear: both } +.pika-single { *zoom: 1 } + +.pika-single.is-hidden { + display: none; +} + +.pika-single.is-bound { + position: absolute; + box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); +} + +.pika-lendar { + float: left; + width: 240px; + margin: 8px; +} + +.pika-title { + position: relative; + text-align: center; +} + +.pika-label { + display: inline-block; + *display: inline; + position: relative; + z-index: 9999; + overflow: hidden; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + background-color: #fff; +} +.pika-title select { + cursor: pointer; + position: absolute; + z-index: 9998; + margin: 0; + left: 0; + top: 5px; + filter: alpha(opacity=0); + opacity: 0; +} + +.pika-prev, +.pika-next { + display: block; + cursor: pointer; + position: relative; + outline: none; + border: 0; + padding: 0; + width: 20px; + height: 30px; + /* hide text using text-indent trick, using width value (it's enough) */ + text-indent: 20px; + white-space: nowrap; + overflow: hidden; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 75% 75%; + opacity: .5; + *position: absolute; + *top: 0; +} + +.pika-prev:hover, +.pika-next:hover { + opacity: 1; +} + +.pika-prev, +.is-rtl .pika-next { + float: left; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); + *left: 0; +} + +.pika-next, +.is-rtl .pika-prev { + float: right; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); + *right: 0; +} + +.pika-prev.is-disabled, +.pika-next.is-disabled { + cursor: default; + opacity: .2; +} + +.pika-select { + display: inline-block; + *display: inline; +} + +.pika-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 0; +} + +.pika-table th, +.pika-table td { + width: 14.285714285714286%; + padding: 0; +} + +.pika-table th { + color: #999; + font-size: 12px; + line-height: 25px; + font-weight: bold; + text-align: center; +} + +.pika-button { + cursor: pointer; + display: block; + box-sizing: border-box; + -moz-box-sizing: border-box; + outline: none; + border: 0; + margin: 0; + width: 100%; + padding: 5px; + color: #666; + font-size: 12px; + line-height: 15px; + text-align: right; + background: #f5f5f5; +} + +.pika-week { + font-size: 11px; + color: #999; +} + +.is-today .pika-button { + color: #33aaff; + font-weight: bold; +} + +.is-selected .pika-button { + color: #fff; + font-weight: bold; + background: #33aaff; + box-shadow: inset 0 1px 3px #178fe5; + border-radius: 3px; +} + +.is-inrange .pika-button { + background: #D5E9F7; +} + +.is-startrange .pika-button { + color: #fff; + background: #6CB31D; + box-shadow: none; + border-radius: 3px; +} + +.is-endrange .pika-button { + color: #fff; + background: #33aaff; + box-shadow: none; + border-radius: 3px; +} + +.is-disabled .pika-button, +.is-outside-current-month .pika-button { + pointer-events: none; + cursor: default; + color: #999; + opacity: .3; +} + +.pika-button:hover { + color: #fff; + background: #ff8000; + box-shadow: none; + border-radius: 3px; +} + +/* styling for abbr */ +.pika-table abbr { + border-bottom: none; + cursor: help; +}