Как отформатировать дату в angularjs

143

Я хочу отформатировать дату как mm/dd/yyyy. Я попробовал следующее, и ничего из этого не работает для меня. Кто-нибудь может мне с этим помочь?

ссылка: ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />
user16
источник
1
Вы пытались удалить ui-date-format="mm/dd/yyyy"вообще? Похоже, что поведение по умолчанию без этой опции - то, что вам нужно.
Лукас
Вы пробовали moment.js?
Cétia
Нет, я не пробовал moment.js. Мой сервер возвращает мне строку Json 20140313T00: 00: 00. Я попробовал оба способа ввода даты типа html5 и ui-date-format. Удаление ui-date-format говорит о том, что это строка, задайте ей формат.
user16
Использование $formattersи ответ$parsers на этот вопрос решили мою похожую проблему.
Росс Роджерс
Вы можете использовать фильтры как в html, так и в javascript, см.: stackoverflow.com/a/27615392/1904479
Kailas,

Ответы:

204

Angular.js имеет встроенный фильтр даты.

демонстрация

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Вы можете увидеть поддерживаемые форматы даты в источнике для фильтра даты .

редактировать :

Если вы пытаетесь получить правильный формат в средстве выбора даты (неясно, используете ли вы средство выбора даты или просто пытаетесь использовать его средство форматирования), эти поддерживаемые строки формата находятся здесь: https://api.jqueryui.com/datepicker/

Джим Шуберт
источник
1
сервер возвращает мне '20140313T00: 00: 00, и я хочу показать в формате мм / дд / гггг на входе, подобном этому - <input type = date "ng-model =" mydate ">
user16
Я не уверен, почему мой ответ был отклонен. Этот ответ взят почти дословно из документов Angular. Упоминание строк формата jQueryUI datepicker связано с тем, что в вопросе используется модуль ui-date, который зависит от jQuery и jQueryUI. В ответе нет ничего неправильного или вводящего в заблуждение.
Джим Шуберт
Я не думаю, что ссылка JQuery UI является правильным для строк формата. docs.angularjs.org/api/ng/filter/date представляется более точным.
TrueWill
@TrueWill OP специально спрашивает об ui-date, которая использует jQuery datepicker. Первая ссылка в моем посте ссылается на исходный код, в котором есть строки формата, поддерживаемые angular.
Джим Шуберт
@JimSchubert это моя строка даты '2013-11-11 00:00:00', и она не будет преобразована | дата: 'давняя дата', какие-либо предложения?
alphapilgrim
97

Если у вас нет поля ввода, а просто хотите отобразить строковую дату с правильным форматированием, вы можете просто перейти к:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

и в файле js используйте:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Это преобразует дату в строке в новый объект даты в javascript и будет отображать дату в формате MM / dd / yyyy.

Вывод: 15.12.2014

Редактировать
Если вы используете строковую дату в формате «2014-12-19 20:00:00» в строковом формате (переданном из бэкэнда PHP), вам следует изменить код на следующий: https://stackoverflow.com / а / 27616348/1904479

Добавление дальше
Из javascript вы можете установить код как:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

на тот случай, если у вас уже есть дата, иначе вы можете использовать следующий код для получения текущей системной даты:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Для получения более подробной информации о форматах даты, смотрите: https://docs.angularjs.org/api/ng/filter/date

Кайлас
источник
27

Я использую это, и он работает нормально.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM
Ravindra
источник
это не работает для меня, если я передаю объект JS Date. есть предложения почему?
Panshul
Он должен работать только для формата даты, где дата указывается в миллисекундах, а в вашем случае дата - в формате даты. Следите: w3schools.com/js/js_date_formats.asp
Равиндра,
18

Это на самом деле не совсем то, что вы просите - но вы можете попробовать создать поле ввода даты в html что-то вроде:

<input type="date" ng-model="myDate" />

Затем, чтобы напечатать это на странице, вы будете использовать:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Наконец, в моем контроллере я объявил метод, который создает дату из входного значения (которое в chrome, по-видимому, анализируется на 1 выходной):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

Так что у вас есть это. Чтобы увидеть, как все это работает, посмотрите следующий плункер: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview. Желаем удачи!

drew_w
источник
11

Это будет работать:

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

ПРИМЕЧАНИЕ: как только вы замените их, оставшаяся дата / миллис будет преобразована в заданную форму.

Нитиш Кумар
источник
по какой-то причине мое поле находится в этом формате / Дата (99999) / до, знаете почему?
Антонио Коррейя,
9

см. угловой dateAPI: AngularJS API: дата


Угловой - dateфильтр:

Использование:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


Exampe:

Код:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

Результат:

10/29/2010
Эдди
источник
7

Я использую фильтр

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

затем

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}
Хамза БЕНДАЛИ БРАХАМ
источник
3

Просто передайте формат даты UTC из кода на стороне сервера на сторону клиента

и используйте ниже синтаксис -

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018
Шивпрасад П
источник
1

Посмотрев на все вышеупомянутые решения, следующее было самым быстрым решением для меня. Если вы используете угловой материал:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Чтобы установить формат:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Изменить: Вам также нужно установить parseDate для ввода даты (из этого ответа Изменить формат md-datepicker в Angular Material )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};
Johan
источник
1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Здесь имя контроллера - «myController», а имя приложения - «myApp».

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

Результат будет выглядеть так: - * 10-29-2010 * 01-03-2013

Гопакумар А.П.
источник
0

Хорошо, проблема, кажется, исходит от этой строки:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

На самом деле эта строка - это привязка к jQuery UI, которая должна быть местом для вставки формата данных.

Как вы можете видеть var opts, нет свойства dateFormatсо значением из ng-date-format, как вы могли бы ожидать.

В любом случае в директиве есть константа, uiDateConfigк которой добавляются свойства opts.

Гибкое решение (рекомендуется):

Из здесь вы можете увидеть , вы можете вставить некоторые варианты инъекционных в директиве переменного контроллера с опциями JQuery UI.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

Твердо закодированное решение:

Если вы не хотите повторять эту процедуру все время, измените значение uiDateConfigв date.js на:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })
borracciaBlu
источник
0

У меня была та же проблема, и как и в приведенных выше комментариях, я подумал, что в JavaScript должен быть собственный метод. Дело в том, что new Date(valueofdate)возвращает объект Date.

Но, проверьте в http://www.w3schools.com/js/js_date_formats.asp , часть, которая говорит, что ведущий ноль. Дата из строки, например, эхо из PHP, должна быть такой:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Это передаст строку, например: '1999-3-3' и JavaScript выполнит синтаксический анализ объекта с правильным форматом с

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Ссылка на PHP для форматов даты: http://www.w3schools.com/php/func_date_date_format.asp .

Хуан Хосе Кампис
источник
0

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Используйте это должно работать хорошо. :) Поля reviewData и dateValue могут быть изменены, в соответствии с вашим параметром rest можно оставить одинаковыми

Джаянт Раджвани
источник
0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';
Селвам Аннамалай
источник
1
Почему вы оставляете комментарий с той же строкой, что и в вашем ответе? И ваш ответ - только некоторый код, вообще никакого объяснения.
Почмурник
-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
Сиддхартха
источник