64

HTML5 の日付入力があり、その値をデフォルトでモデルの日付プロパティの値に設定したいと考えています。とにかく私のロケールに基づいてChromeがそれを決定するように見えるので、私はフォーマットについてあまりうるさくありませんが、理想的にはフォーマットは一貫してdd/MM/yyyy.

フィドル

これが私の入力の設定方法です：

<input type="date" 
       ng-model="date" 
       value="{{ date | date: 'yyyy-MM-dd' }}" />

これは Chrome で問題なく動作し、デフォルトで次のように表示されます。

日付の書式設定された値を表示する Chrome

yyyy-MM-dd（ Chromeがまだ私のロケールに基づいてフォーマットするのであれば、値を で指定する必要がある理由はまだよくわかりませんが、それは別の質問です。）

私の問題は、Firefox が指定した方法で日付の値を表示しないことです。dateこれは、属性にほとんどすべての文字列を指定できるため、入力をモデルにバインドすることに関係していると思いますがvalue、デフォルトでは入力に長い日付文字列が表示されます。

日付文字列を表示する Firefox

入力タグから削除するng-model="date"と、Firefox は指定した値を適切に表示します。入力がバインドされたモデルが実際にデフォルト値に影響を与えるとは思いませんでしたか?

日付入力が普遍的にサポートされていないことは理解していますが、単純なテキスト入力にフォールバックすることになっているため、2013-08-05角度の日付フィルターで指定されているように、その値が単純にならない理由がわかりません。

では、日付入力で書式設定された値を Firefox に受け入れさせるにはどうすればよいですか?

注Date: ユーザーが編集を行った後、もちろん検証を実行し、各日付入力値を適切なオブジェクトに変換します。これが質問に関連しているかどうかはわかりませんが、すべてのブラウザーで日付変換が同じように機能するには、入力形式が明らかに一貫している必要があるため、念のために記載します。もちろん、Chromeが入力形式を決定することに問題があります...

4

7 に答える 7

73

問題は、 isが存在valueする場合に無視されるng-modelことです。

現在 をサポートしていない Firefox は、type="date"すべての値を文字列に変換します。あなたは（当然のことながら）文字列ではなくdate実際のオブジェクトになりたいので、たとえば、別の変数を作成し、2 つの変数をリンクするDateのが最善の選択だと思います。dateString

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

function MainCtrl($scope, dateFilter) {
    $scope.date = new Date();

    $scope.$watch('date', function (date)
    {
        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
    });

    $scope.$watch('dateString', function (dateString)
    {
        $scope.date = new Date(dateString);
    });
}

Fiddle

実際の構造はデモンストレーションのみを目的としています。特に次の目的で、独自のディレクティブを作成することをお勧めします。

を使用していることに注意してください。これは、JavaScriptオブジェクトyyyy-MM-ddによって直接サポートされている形式であるためです。Date別のものを使用する場合は、自分で変換する必要があります。

編集

クリーンなディレクティブを作成する方法は次のとおりです。

myModule.directive(
    'dateInput',
    function(dateFilter) {
        return {
            require: 'ngModel',
            template: '<input type="date"></input>',
            replace: true,
            link: function(scope, elm, attrs, ngModelCtrl) {
                ngModelCtrl.$formatters.unshift(function (modelValue) {
                    return dateFilter(modelValue, 'yyyy-MM-dd');
                });

                ngModelCtrl.$parsers.unshift(function(viewValue) {
                    return new Date(viewValue);
                });
            },
        };
});

Fiddle

これは基本的なディレクティブです。改善の余地はまだたくさんあります。たとえば、次のようになります。

  • yyyy-MM-ddの代わりにカスタム形式の使用を許可する
  • ユーザーが入力した日付が正しいことを確認してください。
于 2013-08-05T15:58:57.370 に答える
12

なぜ値を yyyy-MM-dd で指定する必要があったのですか?

HTML 5のinput type = date 仕様によると、 RFC3339で指定されてyyyy-MM-ddいる有効な形式を取るため、値は次の形式にする必要があります。full-date

full-date = date-fullyear "-" date-month "-" date-mday

ディレクティブ入力は型をサポートしていないため、Angularjs とは関係ありませんdate。

日付入力で書式設定された値を Firefox に受け入れさせるにはどうすればよいですか?

dateFF は、少なくともバージョン 24.0 までは入力の型をサポートしていません。この情報はここから入手できます。したがって、今のところ、タイプがdateFF の入力を使用すると、テキスト ボックスは渡された値を受け取ります。

私の提案は、Angular-ui の Timepickerを使用でき、日付入力に HTML5 サポートを使用しないことです。

于 2013-08-05T15:56:52.427 に答える
3

あなたはこれを使うことができます、それはうまくいきます： 

<input type="date" class="form1"  
  value="{{date | date:MM/dd/yyyy}}"
  ng-model="date" 
  name="id" 
  validatedateformat 
  data-date-format="mm/dd/yyyy"
  maxlength="10" 
  id="id" 
  calendar 
  maxdate="todays"
  ng-click="openCalendar('id')">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>
    </span>
</input>
于 2014-06-07T17:19:59.117 に答える
2

私の場合、次の方法で解決しました。

$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);

入力タイプの日付は問題ありません

于 2016-06-05T03:05:12.960 に答える
0

MEAN.JS (Angular.js、bootstrap、Express.js、および MongoDb) のこの完全に機能するディレクティブを確認してください。

@Blackhole の応答に基づいて、mongodb および Express で使用できるように仕上げました。

これにより、マングース コネクタから日付を保存およびロードできるようになります。

それが役に立てば幸い！！

angular.module('myApp')
.directive(
  'dateInput',
  function(dateFilter) {
    return {
      require: 'ngModel',
      template: '<input type="date" class="form-control"></input>',
      replace: true,
      link: function(scope, elm, attrs, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (modelValue) {
          return dateFilter(modelValue, 'yyyy-MM-dd');
        });

        ngModelCtrl.$parsers.push(function(modelValue){
           return angular.toJson(modelValue,true)
          .substring(1,angular.toJson(modelValue).length-1);
        })

      }
    };
  });

JADE/HTML:

div(date-input, ng-model="modelDate")
于 2015-04-16T20:30:06.720 に答える
0

私はng-changeを使用しました：

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

var app = angular.module('myApp', []);

app.controller('DateController', ['$rootScope', '$scope',
  function($rootScope, $scope) {
    function init() {
      $scope.startDate = new Date();
      $scope.endDate = $scope.startDate.addDays(14);
    }


    function load() {
      alert($scope.startDate);
      alert($scope.endDate);
    }

    init();
    // public methods
    $scope.load = load;
    $scope.setStart = function(date) {
      $scope.startDate = date;
    };
    $scope.setEnd = function(date) {
      $scope.endDate = date;
    };

  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
  <label class="item-input"> <span class="input-label">Start</span>
    <input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
  </label>
  <label class="item-input"> <span class="input-label">End</span>
    <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
  </label>
  <button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
    Run
  </button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
  <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>

于 2015-02-04T11:46:20.060 に答える