在引导日期时间选择器上格式化日期 [英] Format date on bootstrap datetimepicker
问题描述
我正在使用Bootstrap 3日期/时间选择器( https://github.com/Eonasdan/ bootstrap-datetimepicker ),我在格式化日期时遇到问题
I am using the Bootstrap 3 Date/Time Picker (https://github.com/Eonasdan/bootstrap-datetimepicker) and I have problems formatting the date
<input type="text" id="fmEndDate" class="form-control input-sm"
datetimepicker
format="DD-MM-YYYY hh:mm"
ng-model="workRequest.EndDate"
placeholder="..."
name="fmEndDate"
required
ng-disabled="isDisabled">
但是该值显示为MM / DD / YYYY hh:mm AM
But the value is being display as MM/DD/YYYY hh:mm AM
我想要除夕时间戳记2017年12月31日
i want 31-12-2017 23:59 for new year eve timestamp
这是我的指令
"use strict";
angular.module("datetimepicker", [])
.provider("datetimepicker", function () {
var defaultOptions = { };
this.setOptions = function (options) {
defaultOptions = options;
};
this.$get = function () {
return {
getOptions: function () {
return defaultOptions;
}
};
};
})
.directive("datetimepicker", [
"$timeout",
"datetimepicker",
function ($timeout,datetimepicker) {
var defaultOptions = datetimepicker.getOptions();
return {
require : "?ngModel",
restrict: "AE",
scope : {
datetimepickerOptions: "@"
},
link : function ($scope, $element, $attrs, ngModelCtrl) {
var passedInOptions = $scope.$eval($attrs.datetimepickerOptions);
var options = jQuery.extend({}, defaultOptions, passedInOptions);
$element
.on("dp.change", function (e) {
if (ngModelCtrl) {
$timeout(function () {
ngModelCtrl.$setViewValue(e.target.value);
});
}
})
.datetimepicker(options);
function setPickerValue() {
var date = options.defaultDate || null;
if (ngModelCtrl && ngModelCtrl.$viewValue) {
date = ngModelCtrl.$viewValue;
}
$element
.data("DateTimePicker")
.date(date);
}
if (ngModelCtrl) {
ngModelCtrl.$render = function () {
setPickerValue();
};
}
setPickerValue();
}
};
}
]);
有什么想法吗?
推荐答案
如 bootstrap3文档所示,您可以在JavaScript中定义自定义格式:
As shown in the bootstrap3 docs you can define custom formats in JavaScript:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'your desired Formatting style'
});
});
</script>
</div>
</div>
更简单:
$("#fmEndDate").datetimepicker({format: 'dd-mm-yyyy hh:ii'});
侧注:注意日期/时间格式:
对于AngularJS HH
格式,小时数为00-23。在Bootstrap3中,您也使用 HH
会导致小时数为01-12。
As for AngularJS HH
format will result in hours as 00-23. While in Bootstrap3 which you are also using HH
will result in hours as 01-12.
我强烈建议您使用像 MomentJS 这样的库,它会为您带来麻烦。
I highly suggest you to use a library like MomentJS which is doing the troublesome work for you.
致谢,
Megajin
Regards, Megajin
这篇关于在引导日期时间选择器上格式化日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!