2
我有一个这样的angularjs日历多数民众赞成输出：“日期2015-12-10T02：59：00.000Z”Java来MYSQL日期时间格式
我需要我的HAVA类和mysql场来处理它。 但我似乎有很多麻烦，使其工作...
即时通讯使用“私人日期asd;”为java类和mysql的时间戳。
的Java类
@Entity
@Table(name = "incidente")
public class Incidente implements Serializable {
private Date apertura;
@Column(name = "apertura")
public Date getApertura() {
return apertura;
}
public void setApertura(Date apertura) {
this.apertura = apertura;
}
MySQL是与数据类型TIMESTAMP
而继承人angularJS输出一个简单的柱：
(function withAngular(angular, navigator) {
'use strict';
angular.module(
'incidente',
[ 'urls', 'ui.bootstrap',
'ui.bootstrap.datetimepicker' ])
.controller('IncidentesController',
[ '$scope', '$http', 'urlinc', function($scope, $http, urlinc) {
var url = urlinc.getUrlinc();
var onIncidenteComplete = function(response) {
try {
$scope.incidentes = response.data;
console.log($scope.incidentes);
} catch (error) {
console.error(error);
}
};
$http.get(url).then(onIncidenteComplete);
} ])
.controller(
'IncidenteController',
[
'$scope',
'$http',
'$routeParams',
'urlinc',
'$location',
function($scope, $http, $routeParams, urlinc, $location) {
var url = urlinc.getUrlinc();
var onError = function(reason) {
$scope.error = "No se pudo encontrar";
};
var code = $routeParams.codename;
console.log(code);
var onTecnicoComplete = function(response) {
$scope.tecnicos = response.data;
};
var onHardwareComplete = function(response) {
$scope.hardwares = response.data;
};
var onSoftwareComplete = function(response) {
$scope.softwares = response.data;
};
var onSistemaComplete = function(response) {
$scope.sistemas = response.data;
};
var onIncidenteComplete = function(response) {
try {
$scope.incidente = response.data;
} catch (error) {
console.error(error);
}
};
$http.get(url + code)
.then(onIncidenteComplete, onError);
$http.get("http://localhost:8080/tecnico/").then(
onTecnicoComplete);
$http.get("http://localhost:8080/hardware/").then(
onHardwareComplete);
$http.get("http://localhost:8080/software/").then(
onSoftwareComplete);
$http.get("http://localhost:8080/sistema/").then(
onSistemaComplete);
$scope.saveIncidente = function(incidente) {
console.log(incidente);
return $http.post(url, incidente).success(
function(data, status, headers, config) {
var status2 = '/' + status + '/';
$location.url(status2);
return status.data;
}).error(function(status) {
var status2 = '/' + status.status + '/';
console.log(status2);
$location.url(status2);
return status.data;
})
};
var that = this;
this.dates = {
apertura: new Date(),
cierre: new Date(),
};
this.open = {
apertura: false,
cierre: false,
};
// Disable weekend selection
this.disabled = function(date, mode) {
return (mode === 'day' && (new Date().toDateString() == date.toDateString()));
};
this.dateOptions = {
showWeeks: false,
startingDay: 1
};
this.timeOptions = {
readonlyInput: false,
showMeridian: false
};
this.dateModeOptions = {
minMode: 'year',
maxMode: 'year'
};
this.openCalendar = function(e, date) {
that.open[date] = true;
};
$scope.setIndisponibilidad = function(incidente){
var cierre = incidente.cierre;
var apertura = incidente.apertura;
var date1 = Date.parse(cierre);
var date2 = Date.parse(apertura);
var difference = date1 - date2;
console.log(difference);
var daysDifference = Math.floor(difference/1000/60/60/24);
difference -= daysDifference*1000*60*60*24
var hoursDifference = Math.floor(difference/1000/60/60);
difference -= hoursDifference*1000*60*60
var minutesDifference = Math.floor(difference/1000/60);
difference -= minutesDifference*1000*60
var indisponibilidad = daysDifference + ' day/s ' + hoursDifference + ' hour/s ' + minutesDifference + ' minute/s ';
console.log(indisponibilidad);
this.incidente.indisponibilidad = indisponibilidad;
};
$scope.hardwares = [];
$scope.hardwareListener = function() {
console.log($scope.hardwares);
}
$scope.tecnicoListener = function() {
console.log($scope.incidente.tecnico);
}
$scope.date = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
} ])
.controller(
'CrearIncidenteController',
[
'$scope',
'$http',
'urlinc',
'$location',
function($scope, $http, urlinc, $location) {
var url = urlinc.getUrlinc();
var onTecnicoComplete = function(response) {
$scope.tecnicos = response.data;
};
var onHardwareComplete = function(response) {
$scope.hardwares = response.data;
};
var onSoftwareComplete = function(response) {
$scope.softwares = response.data;
};
var onSistemaComplete = function(response) {
$scope.sistemas = response.data;
};
$scope.createIncidente = function(incidente) {
return $http.post(url, incidente).success(
function(data, status, headers, config) {
var status2 = '/' + status + '/';
$location.url(status2);
return status.data;
}).error(function(status) {
var status2 = '/' + status.status + '/';
console.log(status2);
$location.url(status2);
return status.data;
})
};
$http.get("http://localhost:8080/tecnico/").then(
onTecnicoComplete);
$http.get("http://localhost:8080/hardware/").then(
onHardwareComplete);
$http.get("http://localhost:8080/software/").then(
onSoftwareComplete);
$http.get("http://localhost:8080/sistema/").then(
onSistemaComplete);
} ]);
}(angular, navigator));
而继承人的DateTimePicker im使用：
// https://github.com/Gillardo/bootstrap-ui-datetime-picker
// Version: 1.2.1
// Released: 2015-08-26
angular
.module('ui.bootstrap.datetimepicker',
[ 'ui.bootstrap.dateparser', 'ui.bootstrap.position' ])
.constant('uiDatetimePickerConfig', {
dateFormat : 'dd-MM-yyyy HH:mm',
html5Types : {
date : 'dd-MM-yyyy',
'datetime-local' : 'dd-MM-yyyyTHH:mm',
'month' : 'yyyy-MM'
},
enableDate : true,
enableTime : true,
todayText : 'Hoy',
nowText : 'Ahora',
clearText : 'Limpiar',
closeText : 'Listo',
dateText : 'Fecha',
timeText : 'Hora',
closeOnDateSelection : true,
appendToBody : false,
showButtonBar : true
})
.directive(
'datetimePicker',
[
'$compile',
'$parse',
'$document',
'$timeout',
'$position',
'dateFilter',
'dateParser',
'uiDatetimePickerConfig',
'$rootScope',
function($compile, $parse, $document, $timeout,
$position, dateFilter, dateParser,
uiDatetimePickerConfig, $rootScope) {
return {
restrict : 'A',
require : 'ngModel',
scope : {
isOpen : '=?',
enableDate : '=?',
enableTime : '=?',
todayText : '@',
nowText : '@',
dateText : '@',
timeText : '@',
clearText : '@',
closeText : '@',
dateDisabled : '&'
},
link : function(scope, element, attrs, ngModel) {
var dateFormat = uiDatetimePickerConfig.dateFormat, closeOnDateSelection = angular
.isDefined(attrs.closeOnDateSelection) ? scope.$parent
.$eval(attrs.closeOnDateSelection)
: uiDatetimePickerConfig.closeOnDateSelection, appendToBody = angular
.isDefined(attrs.datepickerAppendToBody) ? scope.$parent
.$eval(attrs.datepickerAppendToBody)
: uiDatetimePickerConfig.appendToBody;
scope.showButtonBar = angular
.isDefined(attrs.showButtonBar) ? scope.$parent
.$eval(attrs.showButtonBar)
: uiDatetimePickerConfig.showButtonBar;
// determine which pickers should be
// available. Defaults to date and time
scope.enableDate = angular
.isDefined(scope.enableDate) ? scope.enableDate
: uiDatetimePickerConfig.enableDate;
scope.enableTime = angular
.isDefined(scope.enableTime) ? scope.enableTime
: uiDatetimePickerConfig.enableTime;
// default picker view
scope.showPicker = scope.enableDate ? 'date'
: 'time';
// get text
scope.getText = function(key) {
return scope[key + 'Text']
|| uiDatetimePickerConfig[key
+ 'Text'];
};
var isHtml5DateInput = false;
if (uiDatetimePickerConfig.html5Types[attrs.type]) {
dateFormat = uiDatetimePickerConfig.html5Types[attrs.type];
isHtml5DateInput = true;
} else {
dateFormat = attrs.datepickerPopup
|| uiDatetimePickerConfig.dateFormat;
attrs
.$observe(
'datetimePicker',
function(value) {
var newDateFormat = value
|| uiDatetimePickerConfig.dateFormat;
if (newDateFormat !== dateFormat) {
dateFormat = newDateFormat;
ngModel.$modelValue = null;
if (!dateFormat) {
throw new Error(
'datetimePicker must have a date format specified.');
}
}
});
}
// popup element used to display calendar
var popupEl = angular
.element(''
+ '<div date-picker-wrap>'
+ '<div datepicker></div>'
+ '</div>'
+ '<div time-picker-wrap>'
+ '<div timepicker style="margin:0 auto"></div>'
+ '</div>');
// get attributes from directive
popupEl.attr({
'ng-model' : 'date',
'ng-change' : 'dateSelection(date)'
});
function cameltoDash(string) {
return string.replace(/([A-Z])/g,
function($1) {
return '-'
+ $1.toLowerCase();
});
}
// datepicker element
var datepickerEl = angular.element(popupEl
.children()[0]);
if (isHtml5DateInput) {
if (attrs.type === 'month') {
datepickerEl.attr(
'datepicker-mode',
'"month"');
datepickerEl.attr('min-mode',
'month');
}
}
if (attrs.datepickerOptions) {
var options = scope.$parent
.$eval(attrs.datepickerOptions);
if (options && options.initDate) {
scope.initDate = options.initDate;
datepickerEl.attr('init-date',
'initDate');
delete options.initDate;
}
angular
.forEach(
options,
function(value, option) {
datepickerEl
.attr(
cameltoDash(option),
value);
});
}
// timepicker element
var timepickerEl = angular.element(popupEl
.children()[1]);
if (attrs.timepickerOptions) {
var options = scope.$parent
.$eval(attrs.timepickerOptions);
angular
.forEach(
options,
function(value, option) {
timepickerEl
.attr(
cameltoDash(option),
value);
});
}
// set datepickerMode to day by default as
// need to create watch
// else disabled cannot pass in mode
if (!angular
.isDefined(attrs['datepickerMode'])) {
attrs['datepickerMode'] = 'day';
}
scope.watchData = {};
angular
.forEach(
[ 'minMode', 'maxMode',
'minDate',
'maxDate',
'datepickerMode',
'initDate',
'shortcutPropagation' ],
function(key) {
if (attrs[key]) {
var getAttribute = $parse(attrs[key]);
scope.$parent
.$watch(
getAttribute,
function(
value) {
scope.watchData[key] = value;
});
datepickerEl
.attr(
cameltoDash(key),
'watchData.'
+ key);
// Propagate changes
// from datepicker
// to outside
if (key === 'datepickerMode') {
var setAttribute = getAttribute.assign;
scope
.$watch(
'watchData.'
+ key,
function(
value,
oldvalue) {
if (angular
.isFunction(setAttribute)
&& value !== oldvalue) {
setAttribute(
scope.$parent,
value);
}
});
}
}
});
if (attrs.dateDisabled) {
datepickerEl
.attr('date-disabled',
'dateDisabled({ date: date, mode: mode })');
}
// do not check showWeeks attr, as should be
// used via datePickerOptions
function parseDate(viewValue) {
if (angular.isNumber(viewValue)) {
// presumably timestamp to date
// object
viewValue = new Date(viewValue);
}
if (!viewValue) {
return null;
} else if (angular.isDate(viewValue)
&& !isNaN(viewValue)) {
return viewValue;
} else if (angular.isString(viewValue)) {
var date = dateParser.parse(
viewValue, dateFormat,
scope.date);
if (isNaN(date)) {
return undefined;
} else {
return date;
}
} else {
return undefined;
}
}
function validator(modelValue, viewValue) {
var value = modelValue || viewValue;
if (!attrs.ngRequired && !value) {
return true;
}
if (angular.isNumber(value)) {
value = new Date(value);
}
if (!value) {
return true;
} else if (angular.isDate(value)
&& !isNaN(value)) {
return true;
} else if (angular.isString(value)) {
var date = dateParser.parse(value,
dateFormat);
return !isNaN(date);
} else {
return false;
}
}
if (!isHtml5DateInput) {
// Internal API to maintain the correct
// ng-invalid-[key] class
ngModel.$$parserName = 'datetime';
ngModel.$validators.datetime = validator;
ngModel.$parsers.unshift(parseDate);
ngModel.$formatters
.push(function(value) {
scope.date = value;
return ngModel
.$isEmpty(value) ? value
: dateFilter(value,
dateFormat);
});
} else {
ngModel.$formatters
.push(function(value) {
scope.date = value;
return value;
});
}
// Inner change
scope.dateSelection = function(dt) {
// check which picker is being shown, if
// its date, all is fine and this is the
// date
// we will use, if its the timePicker
// and enableDate = true, we need to
// merge
// the values, else timePicker will
// reset the date
if (scope.enableDate
&& scope.enableTime
&& scope.showPicker === 'time') {
if (scope.date
&& scope.date !== null
|| dt || dt != null) {
// dt will not be undefined if
// the now or today button is
// pressed
if (dt && dt != null) {
// get the existing date and
// update the time
var date = new Date(
scope.date);
date
.setHours(dt
.getHours());
date.setMinutes(dt
.getMinutes());
dt = date;
}
}
}
if (angular.isDefined(dt)) {
scope.date = dt;
}
var date = scope.date ? dateFilter(
scope.date, dateFormat) : null;
element.val(date);
ngModel.$setViewValue(date);
if (dt === null) {
scope.close();
} else if (closeOnDateSelection) {
// do not close when using
// timePicker as make impossible to
// choose a time
if (scope.showPicker != 'time') {
// if time is enabled, swap to
// timePicker
if (scope.enableTime) {
// need to delay this, else
// timePicker never shown
$timeout(
function() {
scope.showPicker = 'time';
}, 0);
} else {
scope.close();
}
}
}
};
// Detect changes in the view from the text
// box
ngModel.$viewChangeListeners
.push(function() {
scope.date = dateParser.parse(
ngModel.$viewValue,
dateFormat, scope.date);
});
var documentClickBind = function(event) {
if (scope.isOpen
&& event.target !== element[0]) {
scope.$apply(function() {
scope.close();
});
}
};
var inputKeydownBind = function(evt) {
if (evt.which === 27 && scope.isOpen) {
evt.preventDefault();
evt.stopPropagation();
scope.$apply(function() {
scope.close();
});
element[0].focus();
} else if (evt.which === 40
&& !scope.isOpen) {
evt.preventDefault();
evt.stopPropagation();
scope.$apply(function() {
scope.isOpen = true;
});
}
};
element.bind('keydown', inputKeydownBind);
scope.keydown = function(evt) {
if (evt.which === 27) {
scope.close();
element[0].focus();
}
};
scope
.$watch(
'isOpen',
function(value) {
scope.dropdownStyle = {
display : value ? 'block'
: 'none'
};
if (value) {
var position = appendToBody ? $position
.offset(element)
: $position
.position(element);
if (appendToBody) {
scope.dropdownStyle.top = (position.top + element
.prop('offsetHeight'))
+ 'px';
} else {
scope.dropdownStyle.top = undefined;
}
scope.dropdownStyle.left = position.left
+ 'px';
$timeout(
function() {
scope
.$broadcast('datepicker.focus');
$document
.bind(
'click',
documentClickBind);
}, 0, false);
} else {
$document
.unbind(
'click',
documentClickBind);
}
});
scope.isDisabled = function(date) {
var isToday = (date == 'today');
if (date === 'today' || date === 'now')
date = new Date();
if (attrs.dateDisabled) {
return scope
.dateDisabled({
date : date,
mode : scope.watchData['datepickerMode']
});
} else {
return false;
}
};
scope.select = function(date) {
var isNow = date === 'now';
if (date === 'today' || date == 'now') {
var now = new Date();
if (angular.isDate(scope.date)) {
date = new Date(scope.date);
date.setFullYear(now
.getFullYear(), now
.getMonth(), now
.getDate());
date.setHours(now.getHours(),
now.getMinutes());
} else {
date = now;
}
}
scope.dateSelection(date);
};
scope.close = function() {
scope.isOpen = false;
// if enableDate and enableTime are
// true, reopen the picker in date mode
// first
if (scope.enableDate
&& scope.enableTime)
scope.showPicker = 'date';
element[0].focus();
};
scope.changePicker = function(evt, picker) {
evt.preventDefault();
evt.stopPropagation();
scope.showPicker = picker;
};
var $popup = $compile(popupEl)(scope);
// Prevent jQuery cache memory leak
// (template is now redundant after linking)
popupEl.remove();
if (appendToBody) {
$document.find('body').append($popup);
} else {
element.after($popup);
}
scope.$on('$destroy', function() {
if (scope.isOpen === true) {
if (!$rootScope.$$phase) {
scope.$apply(function() {
scope.close();
});
}
}
$popup.remove();
element.unbind('keydown',
inputKeydownBind);
$document.unbind('click',
documentClickBind);
});
}
};
} ])
.directive('datePickerWrap', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
templateUrl : 'template/date-picker.html'
};
})
.directive('timePickerWrap', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
templateUrl : 'template/time-picker.html'
};
});
angular
.module('ui.bootstrap.datetimepicker')
.run(
[
'$templateCache',
function($templateCache) {
'use strict';
$templateCache
.put(
'template/date-picker.html',
"<ul ng-if=\"isOpen && showPicker == 'date'\" class=\"dropdown-menu dropdown-menu-left datetime-picker-dropdown\" ng-style=dropdownStyle style=left:inherit ng-keydown=keydown($event) ng-click=$event.stopPropagation()><li style=\"padding:0 5px 5px 5px\" class=date-picker-menu><div ng-transclude></div></li><li ng-if=showButtonBar style=padding:5px><span class=\"btn-group pull-left\" style=margin-right:10px><button type=button class=\"btn btn-sm btn-info\" ng-click=\"select('today')\" ng-disabled=\"isDisabled('today')\">{{ getText('today') }}</button> <button type=button class=\"btn btn-sm btn-danger\" ng-click=select(null)>{{ getText('clear') }}</button></span> <span class=\"btn-group pull-right\"><button ng-if=enableTime type=button class=\"btn btn-sm btn-default\" ng-click=\"changePicker($event, 'time')\">{{ getText('time')}}</button> <button type=button class=\"btn btn-sm btn-success\" ng-click=close()>{{ getText('close') }}</button></span></li></ul>");
$templateCache
.put(
'template/time-picker.html',
"<ul ng-if=\"isOpen && showPicker == 'time'\" class=\"dropdown-menu dropdown-menu-left datetime-picker-dropdown\" ng-style=dropdownStyle style=left:inherit ng-keydown=keydown($event) ng-click=$event.stopPropagation()><li style=\"padding:0 5px 5px 5px\" class=time-picker-menu><div ng-transclude></div></li><li ng-if=showButtonBar style=padding:5px><span class=\"btn-group pull-left\" style=margin-right:10px><button type=button class=\"btn btn-sm btn-info\" ng-click=\"select('now')\" ng-disabled=\"isDisabled('now')\">{{ getText('now') }}</button> <button type=button class=\"btn btn-sm btn-danger\" ng-click=select(null)>{{ getText('clear') }}</button></span> <span class=\"btn-group pull-right\"><button ng-if=enableDate type=button class=\"btn btn-sm btn-default\" ng-click=\"changePicker($event, 'date')\">{{ getText('date')}}</button> <button type=button class=\"btn btn-sm btn-success\" ng-click=close()>{{ getText('close') }}</button></span></li></ul>");
} ]);
尽管代码在哪里？ – Perdomoff
添加了清晰度代码 – r007
“我似乎遇到了很多麻烦，使它工作...”。什么是确切的问题？应用程序未显示预期行为的位置？写入数据库？在用户界面中显示？数据如何从JSON编组到Java等。 –