来源：蜘蛛抓取(WebSpider)
时间：2016-06-24 06:34
标签：
bootsrap 日期
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&angularjs - Angular bootsrap datepicker date format does not format ng-model value - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every times makes date like this
"T18:30:00.000Z"
instead of
02/04/2009
I have created a plunkr for the same
My Html and controller code is like below
&!doctype html&
&html ng-app="plunker"&
&script src="///ajax/libs/angularjs/1.2.10/angular.js"&&/script&
&script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&&/script&
&script src="example.js"&&/script&
&link href="///bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&
&div ng-controller="DatepickerDemoCtrl"&
&pre&Selected date is: &em&{{dt | date:'MM/dd/yyyy' }}&/em&&/pre&
&p&above filter will just update above UI but I want to update actual ng-modle&/p&
&h4&Popup&/h4&
&div class="row"&
&div class="col-md-6"&
&p class="input-group"&
&input type="text" class="form-control"
datepicker-popup="{{format}}"
ng-model="dt"
is-open="opened" min-date="minDate"
max-date="''"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" /&
&span class="input-group-btn"&
&button type="button" class="btn btn-default" ng-click="open($event)"&
&i class="glyphicon glyphicon-calendar"&&/i&&/button&
&!--&div class="row"&
&div class="col-md-6"&
&label&Format:&/label& &select class="form-control" ng-model="format" ng-options="f for f in formats"&&option&&/option&&/select&
Angular controller
angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened =
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
$scope.format = 'dd-MMMM-yyyy';
Thanks in advance for review my question.
I am calling below method for posting my data and VAR is array of size 900 which contains date-picker variables.
public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {
var query = this.EntityQuery.from('SaveFormData').withParameters({
$method: 'POST',
$encoding: 'JSON',
VAR: formToSave.VAR,
X: formToSave.X,
CurrentForm: formToSave.currentForm,
var deferred = this.q.defer();
this.manager.executeQuery(query).then((response) =& {
deferred.resolve(response);
}, (error) =& {
deferred.reject(error);
return deferred.
4,41241336
Although similar answers have been posted I'd like to contribute what seemed to be the easiest and cleanest fix to me. Assuming you are using the AngularUI datepicker and your initial value for the ng-Model does not get formatted simply adding the following directive to your project will fix the issue:
angular.module('yourAppName')
.directive('datepickerPopup', function (){
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
I found this solution in the
and therefore all credit goes to the people over there.
You can make use of $parsers as shown below,this solved it for me.
window.module.directive('myDate',function(dateFilter,$parse){
restrict:'EAC',
require:'?ngModel',
link:function(scope,element,attrs,ngModel,ctrl){
ngModel.$parsers.push(function(viewValue){
return dateFilter(viewValue,'yyyy-MM-dd');
&p class="input-group datepicker" &
&input type="text"
class="form-control" name="name" datepicker-popup="yyyy-MM-dd" date-type="string" show-weeks="false" ng-model="data[$parent.editable.name]"
is-open="$parent.opened" min-date="minDate"
close-text="Close" ng-required="{{editable.mandatory}}" show-button-bar="false" close-on-date-selection="false" my-date&
&span class="input-group-btn"&
&button type="button" class="btn btn-default" ng-click="openDatePicker($event)"&&i class="glyphicon glyphicon-calendar"&&/i&&/button&
I ran into the same problem and after a couple of hours of logging and investigating, I fixed it.
It turned out that for the first time the value is set in a date picker, $viewValue is a string so the dateFilter displays it as is. All I did is parse it into a Date object.
Search for that block in ui-bootstrap-tpls file
ngModel.$render = function() {
var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
element.val(date);
updateCalendar();
and replace it by:
ngModel.$render = function() {
ngModel.$viewValue = new Date(ngModel.$viewValue);
var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
element.val(date);
updateCalendar();
Hopefully this will help :)
The format specified through datepicker-popup is just the format for the displayed date. The underlying ngModel is a Date object. Trying to display it will show it as it's default, standard-compliant rapresentation.
You can show it as you want by using the date filter in the view, or, if you need it to be parsed in the controller, you can inject $filter in your controller and call it as $filter('date')(date, format). See also the .
You may use formatters after picking value inside your datepicker directive.
For example
angular.module('foo').directive('bar', function() {
require: '?ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl)
ctrl.$formatters.push(function(value) {
if (value) {
// format and return date here
All proposed solutions didn't work for me but the closest one was from @Rishii.
I'm using AngularJS 1.4.4 and UI Bootstrap 0.13.3.
.directive('jsr310Compatible', ['dateFilter', 'dateParser', function(dateFilter, dateParser) {
restrict: 'EAC',
require: 'ngModel',
priority: 1,
link: function(scope, element, attrs, ngModel) {
var dateFormat = 'yyyy-MM-dd';
ngModel.$parsers.push(function(viewValue) {
return dateFilter(viewValue, dateFormat);
ngModel.$validators.date = function (modelValue, viewValue) {
var value = modelValue || viewV
if (!attrs.ngRequired && !value) {
if (angular.isNumber(value)) {
value = new Date(value);
if (!value) {
else if (angular.isDate(value) && !isNaN(value)) {
else if (angular.isString(value)) {
var date = dateParser.parse(value, dateFormat);
return !isNaN(date);
Finally I got great solution to the above problem. angular-strap has exactly the same feature that I am expecting. Just by applying date-format="MM/dd/yyyy" date-type="string" I got my expected behavior of updating ng-model in given format.
&div class="bs-example" style="padding-bottom: 24" append-source&
&form name="datepickerForm" class="form-inline" role="form"&
&!-- Basic example --&
&div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}"&
&label class="control-label"&&i class="fa fa-calendar"&&/i& Date &small&(as date)&/small&&/label&
&input type="text"
autoclose="true"
class="form-control" ng-model="selectedDate" name="date" date-format="MM/dd/yyyy" date-type="string" bs-datepicker&
{{selectedDate}}
here is working plunk
4,41241336
Steps to change the default date format of ng-model
For different date formats check the jqueryui datepicker date format values here for example I have used dd/mm/yy
Create angularjs directive
angular.module('app', ['ui.bootstrap']).directive('dt', function () {
restrict: 'EAC',
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
ngModel.$parsers.push(function (viewValue) {
return dateFilter(viewValue, 'dd/mm/yy');
Write dateFilter function
function dateFilter(val,format) {
return $.datepicker.formatDate(format,val);
In html page write the ng-modal attribute
&input type="text" class="form-control" date-type="string"
uib-datepicker-popup="{{format}}" ng-model="src.pTO_DATE" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-button-bar="false" show-weeks="false" dt /&
I can fix this by adding below code in my JSP file. Now both model and UI values are same.
&div ng-show="false"&
{{dt = (dt | date:'dd-MMMM-yyyy') }}
5,20121029
With so many answers already written, Here's my take.
With Angular 1.5.6 & ui-bootstrap 1.3.3 , just add this on the model & you are done.
ng-model-options="{timezone: 'UTC'}"
Note: Use this only if you are concerned about the date being 1 day behind & not bothered with extra time of T00:00:00.000Z
Updated Plunkr Here :
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled扫一扫关注官方微信Toggle button is not working with AngularJS and Angular ui Bootsrap [切换按钮不是用AngularJS和角UI bootsrap工作] - 问题-字节技术
Toggle button is not working with AngularJS and Angular ui Bootsrap
切换按钮不是用AngularJS和角UI bootsrap工作
问题 (Question)
The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
And the code is:
&div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&div class="nalogo-wrapper"&
&img class="img-responsive" src="http://placehold.it/50x50&text=Logo" /&
&div class="collapse navbar-collapse"&
&ul class="nav navbar-nav"&
&li&&a href="#/view1"&&span class="glyphicon glyphicon-home"&&/span& Etusivu&/a&&/li&
&li&&a href="#/view2"&Palvelut&/a&&/li&
&li&&a href="#/view3"&Yhteistiedot&/a&&/li&
&/div&&!--/.nav-collapse --&
&div id="main"&
&div ng-view&
Thanks for help!
切换按钮出现，但它不工作。我有一个相同的代码，现在在网上以及它工作不但是plunker是工作。和代码：&div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&div class="nalogo-wrapper"&
&img class="img-responsive" src="http://placehold.it/50x50&text=Logo" /&
&div class="collapse navbar-collapse"&
&ul class="nav navbar-nav"&
&li&&a href="#/view1"&&span class="glyphicon glyphicon-home"&&/span& Etusivu&/a&&/li&
&li&&a href="#/view2"&Palvelut&/a&&/li&
&li&&a href="#/view3"&Yhteistiedot&/a&&/li&
&/div&&!--/.nav-collapse --&
&div id="main"&
&div ng-view&
谢谢你的帮助！
最佳答案 (Best Answer)
I just copied this out of a working project where I used angular-ui bootstrap:
&div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand" href="/#"&Bake-Off&/a&
&div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse"&
&ul class="nav navbar-nav"&
&li&&a href="#" &Link 1&/a&&/li&
&li&&a href="#" &Link 2&/a&&/li&
&div class="container navbar-form navbar-right"&
&!--/.navbar-collapse --&
我只是复制了这一工作项目中，我用角UI引导：&div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand" href="/#"&Bake-Off&/a&
&div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse"&
&ul class="nav navbar-nav"&
&li&&a href="#" &Link 1&/a&&/li&
&li&&a href="#" &Link 2&/a&&/li&
&div class="container navbar-form navbar-right"&
&!--/.navbar-collapse --&
答案 (Answer) 2
You should include jquery.js and bootstrap.js in your code.
你应该包括在你的代码jquery.js和bootstrap.js。
答案 (Answer) 3
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
你必须做出一些改变你的导航栏容纳角UI引导崩溃指令。我想知道自己不久前，这个问题已经问和回答在这里：
本文翻译自StackoverFlow，英语好的童鞋可直接参考原文：
没有相关问题
没有相关文章
