Fixed the release date picker.

- upgraded ui-date to the newest version
- made adjustments to keep this date in UTC
- fixed the picker's broken images

app/Commands/EditTrackCommand.php

@@ -61,8 +61,11 @@ class EditTrackCommand extends CommandBase
 
         $rules = [
             'title' => 'required|min:3|max:80',
-            'released_at' => 'before:' . (date('Y-m-d',
-                    time() + (86400 * 2))) . (isset($this->_input['released_at']) && $this->_input['released_at'] != "" ? '|date' : ''),
+            'released_at' => 'before:' .
+                 (date('Y-m-d', time() + (86400 * 2))) . (
+                 isset($this->_input['released_at']) && $this->_input['released_at'] != ""
+                 ? '|date'
+                 : ''),
             'license_id' => 'required|exists:licenses,id',
             'genre_id' => 'required|exists:genres,id',
             'cover' => 'image|mimes:png,jpeg|min_width:350|min_height:350',

app/Models/Track.php

@@ -441,7 +441,7 @@ class Track extends Model implements Searchable
         $returnValue['show_songs'] = $showSongs;
         $returnValue['real_cover_url'] = $track->getCoverUrl(Image::NORMAL);
         $returnValue['cover_url'] = $track->hasCover() ? $track->getCoverUrl(Image::NORMAL) : null;
-        $returnValue['released_at'] = $track->released_at;
+        $returnValue['released_at'] = $track->released_at ? $track->released_at->toDateString() : null;
         $returnValue['lyrics'] = $track->lyrics;
         $returnValue['description'] = $track->description;
         $returnValue['is_downloadable'] = !$track->isPublished() ? true : (bool) $track->is_downloadable;

public/templates/directives/track-editor.html

@@ -86,7 +86,14 @@
             </div>
             <div class="form-row span6" ng-class="{'has-error': errors.released_at != null}">
                 <label for="released_at" class="strong">Release Date:</label>
-                <input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="track.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
+                <input
+                    id="released_at"
+                    type="text"
+                    ui-date
+                    ng-disabled="isSaving"
+                    ng-model="track.released_at"
+                    ng-change="touchModel()"
+                />
                 <div class="error">{{errors.released_at}}</div>
             </div>
         </div>

resources/assets/scripts/app/directives/track-editor.coffee

@@ -99,6 +99,10 @@ angular.module('ponyfm').directive 'pfmTrackEditor', () ->
                         return if value == null
                         if typeof(value) == 'object'
                             formData.append name, value, value.name
+
+                    if name == 'released_at' and value != null
+                        formData.append name, value.toISOString()
+
                     else if value != null
                         formData.append name, value
 
@@ -136,6 +140,14 @@ angular.module('ponyfm').directive 'pfmTrackEditor', () ->
                     $scope.albums.push album
 
                 # Update track data
+
+                # The release date is in UTC - make sure we treat it as such.
+                if track.released_at
+                    local_date = new Date(track.released_at)
+                    utc_release_timestamp = local_date.getTime() + (local_date.getTimezoneOffset() * 60000);
+                    utc_release_date = new Date(utc_release_timestamp)
+                else utc_release_date = ''
+
                 $scope.track =
                     id: track.id
                     title: track.title
@@ -147,7 +159,7 @@ angular.module('ponyfm').directive 'pfmTrackEditor', () ->
                     license_id: track.license_id
                     genre_id: track.genre_id
                     track_type_id: track.track_type_id
-                    released_at: if track.released_at then track.released_at.date else ''
+                    released_at: utc_release_date
                     remove_cover: false
                     cover: track.cover_url
                     album_id: track.album_id

resources/assets/scripts/base/angular-ui-date.js

@@ -1,121 +1,283 @@
-/*global angular */
-/*
- jQuery UI Datepicker plugin wrapper
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("jquery"), require("angular"), require("jquery-ui/datepicker"));
+	else if(typeof define === 'function' && define.amd)
+		define(["jquery", "angular", "jquery-ui/datepicker"], factory);
+	else if(typeof exports === 'object')
+		exports["angularUiDate"] = factory(require("jquery"), require("angular"), require("jquery-ui/datepicker"));
+	else
+		root["angularUiDate"] = factory(root["jQuery"], root["angular"], root["jquery-ui/datepicker"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
 
- @note If ≤ IE8 make sure you have a polyfill for Date.toISOString()
- @param [ui-date] {object} Options to pass to $.fn.datepicker() merged onto uiDateConfig
- */
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
 
-angular.module('ui.date', [])
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
 
-.constant('uiDateConfig', {})
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
 
-.directive('uiDate', ['uiDateConfig', '$timeout', function (uiDateConfig, $timeout) {
-  'use strict';
-  var options;
-  options = {};
-  angular.extend(options, uiDateConfig);
-  return {
-    require:'?ngModel',
-    link:function (scope, element, attrs, controller) {
-      var getOptions = function () {
-        return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
-      };
-      var initDateWidget = function () {
-        var showing = false;
-        var opts = getOptions();
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 
-        // If we have a controller (i.e. ngModelController) then wire it up
-        if (controller) {
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
 
-          // Set the view value in a $apply block when users selects
-          // (calling directive user's function too if provided)
-          var _onSelect = opts.onSelect || angular.noop;
-          opts.onSelect = function (value, picker) {
-            scope.$apply(function() {
-              showing = true;
-              controller.$setViewValue(element.datepicker("getDate"));
-              _onSelect(value, picker);
-              element.blur();
-            });
-          };
-          opts.beforeShow = function() {
-            showing = true;
-          };
-          opts.onClose = function(value, picker) {
-            showing = false;
-          };
-          element.on('blur', function() {
-            if ( !showing ) {
-              scope.$apply(function() {
-                element.datepicker("setDate", element.datepicker("getDate"));
-                controller.$setViewValue(element.datepicker("getDate"));
-              });
-            }
-          });
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
 
-          // Update the date picker when the model changes
-          controller.$render = function () {
-            var date = controller.$viewValue;
-            if ( angular.isDefined(date) && date !== null && !angular.isDate(date) ) {
-              throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
-            }
-            element.datepicker("setDate", date);
-          };
-        }
-        // If we don't destroy the old one it doesn't update properly when the config changes
-        element.datepicker('destroy');
-        // Create the new datepicker widget
-        element.datepicker(opts);
-        if ( controller ) {
-          // Force a render to override whatever is in the input text box
-          controller.$render();
-        }
-      };
-      // Watch for changes to the directives options
-      scope.$watch(getOptions, initDateWidget, true);
-    }
-  };
-}
-])
 
-.constant('uiDateFormatConfig', '')
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
 
-.directive('uiDateFormat', ['uiDateFormatConfig', function(uiDateFormatConfig) {
-  var directive = {
-    require:'ngModel',
-    link: function(scope, element, attrs, modelCtrl) {
-      var dateFormat = attrs.uiDateFormat || uiDateFormatConfig;
-      if ( dateFormat ) {
-        // Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
-        modelCtrl.$formatters.push(function(value) {
-          if (angular.isString(value) ) {
-            return jQuery.datepicker.parseDate(dateFormat, value);
-          }
-          return null;
-        });
-        modelCtrl.$parsers.push(function(value){
-          if (value) {
-            return jQuery.datepicker.formatDate(dateFormat, value);
-          }
-          return null;
-        });
-      } else {
-        // Default to ISO formatting
-        modelCtrl.$formatters.push(function(value) {
-          if (angular.isString(value) ) {
-            return new Date(value);
-          }
-          return null;
-        });
-        modelCtrl.$parsers.push(function(value){
-          if (value) {
-            return value.toISOString();
-          }
-          return null;
-        });
-      }
-    }
-  };
-  return directive;
-}]);
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "assets";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	var _jquery = __webpack_require__(1);
+
+	var _jquery2 = _interopRequireDefault(_jquery);
+
+	var _angular = __webpack_require__(2);
+
+	var _angular2 = _interopRequireDefault(_angular);
+
+	var _datepicker = __webpack_require__(3);
+
+	var _datepicker2 = _interopRequireDefault(_datepicker);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	// sets up jQuery with the datepicker plugin
+
+	exports.default = _angular2.default.module('ui.date', []).constant('uiDateConfig', {}).constant('uiDateFormatConfig', '').factory('uiDateConverter', ['uiDateFormatConfig', function (uiDateFormatConfig) {
+	  return {
+	    stringToDate: stringToDate,
+	    dateToString: dateToString
+	  };
+
+	  function dateToString(dateFormat, value) {
+	    dateFormat = dateFormat || uiDateFormatConfig;
+	    if (value) {
+	      if (dateFormat) {
+	        try {
+	          return _jquery2.default.datepicker.formatDate(dateFormat, value);
+	        } catch (formatException) {
+	          return undefined;
+	        }
+	      }
+
+	      if (value.toISOString) {
+	        return value.toISOString();
+	      }
+	    }
+	    return null;
+	  }
+
+	  function stringToDate(dateFormat, valueToParse) {
+	    dateFormat = dateFormat || uiDateFormatConfig;
+
+	    if (_angular2.default.isDate(valueToParse) && !isNaN(valueToParse)) {
+	      return valueToParse;
+	    }
+
+	    if (_angular2.default.isString(valueToParse)) {
+	      if (dateFormat) {
+	        return _jquery2.default.datepicker.parseDate(dateFormat, valueToParse);
+	      }
+
+	      var isoDate = new Date(valueToParse);
+	      return isNaN(isoDate.getTime()) ? null : isoDate;
+	    }
+
+	    if (_angular2.default.isNumber(valueToParse)) {
+	      // presumably timestamp to date object
+	      return new Date(valueToParse);
+	    }
+
+	    return null;
+	  }
+	}]).directive('uiDate', ['uiDateConfig', 'uiDateConverter', function uiDateDirective(uiDateConfig, uiDateConverter) {
+
+	  return {
+	    require: '?ngModel',
+	    link: function link(scope, element, attrs, controller) {
+
+	      var $element = (0, _jquery2.default)(element);
+
+	      var getOptions = function getOptions() {
+	        return _angular2.default.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
+	      };
+	      var initDateWidget = function initDateWidget() {
+	        var showing = false;
+	        var opts = getOptions();
+
+	        function setVal() {
+	          var keys = ['Hours', 'Minutes', 'Seconds', 'Milliseconds'];
+	          var isDate = _angular2.default.isDate(controller.$modelValue);
+	          var preserve = {};
+
+	          if (isDate && controller.$modelValue.toDateString() === $element.datepicker('getDate').toDateString()) {
+	            return;
+	          }
+
+	          if (isDate) {
+	            _angular2.default.forEach(keys, function (key) {
+	              preserve[key] = controller.$modelValue['get' + key]();
+	            });
+	          }
+
+	          var newViewValue = $element.datepicker('getDate');
+
+	          if (isDate) {
+	            _angular2.default.forEach(keys, function (key) {
+	              newViewValue['set' + key](preserve[key]);
+	            });
+	          }
+
+	          controller.$setViewValue(newViewValue);
+	        }
+
+	        // If we have a controller (i.e. ngModelController) then wire it up
+	        if (controller) {
+	          // Set the view value in a $apply block when users selects
+	          // (calling directive user's function too if provided)
+	          var _onSelect = opts.onSelect || _angular2.default.noop;
+	          opts.onSelect = function (value, picker) {
+	            scope.$apply(function () {
+	              showing = true;
+	              setVal();
+	              _onSelect(value, picker);
+	              $element.blur();
+	            });
+	          };
+
+	          var _beforeShow = opts.beforeShow || _angular2.default.noop;
+	          opts.beforeShow = function (input, picker) {
+	            showing = true;
+	            _beforeShow(input, picker);
+	          };
+
+	          var _onClose = opts.onClose || _angular2.default.noop;
+	          opts.onClose = function (value, picker) {
+	            showing = false;
+	            _onClose(value, picker);
+	          };
+
+	          $element.off('blur.datepicker').on('blur.datepicker', function () {
+	            if (!showing) {
+	              scope.$apply(function () {
+	                $element.datepicker('setDate', $element.datepicker('getDate'));
+	                setVal();
+	              });
+	            }
+	          });
+
+	          controller.$validators.uiDateValidator = function uiDateValidator(modelValue, viewValue) {
+	            return _angular2.default.isDate(uiDateConverter.stringToDate(attrs.uiDateFormat, viewValue));
+	          };
+
+	          controller.$parsers.push(function uiDateParser(valueToParse) {
+	            return uiDateConverter.stringToDate(attrs.uiDateFormat, valueToParse);
+	          });
+
+	          // Update the date picker when the model changes
+	          controller.$render = function () {
+	            $element.datepicker('setDate', controller.$modelValue);
+	          };
+	        }
+	        // Check if the $element already has a datepicker.
+	        //
+
+	        if ($element.data('datepicker')) {
+	          // Updates the datepicker options
+	          $element.datepicker('option', opts);
+	          $element.datepicker('refresh');
+	        } else {
+	          // Creates the new datepicker widget
+	          $element.datepicker(opts);
+
+	          // Cleanup on destroy, prevent memory leaking
+	          $element.on('$destroy', function () {
+	            $element.datepicker('hide');
+	            $element.datepicker('destroy');
+	          });
+	        }
+
+	        if (controller) {
+	          // Force a render to override whatever is in the input text box
+	          controller.$render();
+	        }
+	      };
+
+	      // Watch for changes to the directives options
+	      scope.$watch(getOptions, initDateWidget, true);
+	    }
+	  };
+	}]).directive('uiDateFormat', ['uiDateConverter', function (uiDateConverter) {
+	  return {
+	    require: 'ngModel',
+	    link: function link(scope, element, attrs, modelCtrl) {
+	      var dateFormat = attrs.uiDateFormat;
+
+	      // Use the datepicker with the attribute value as the dateFormat string to convert to and from a string
+	      modelCtrl.$formatters.unshift(function (value) {
+	        return uiDateConverter.stringToDate(dateFormat, value);
+	      });
+
+	      modelCtrl.$parsers.push(function (value) {
+	        return uiDateConverter.dateToString(dateFormat, value);
+	      });
+	    }
+	  };
+	}]);
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+
+/***/ }
+/******/ ])
+});
+;
+//# sourceMappingURL=date.js.map