【问题标题】:Angular-Material set a Datepicker with only months and yearsAngular-Material 设置了一个只有几个月和几年的日期选择器
【发布时间】:2019-11-13 22:29:20
【问题描述】:

我正在使用 angular 1.5.9 和 angular material design 1.1.1

我想添加一个只有月份和年份的日期选择器,没有日期,它用于结帐表单中的信用卡到期字段。

【问题讨论】:

标签: angularjs angular-material


【解决方案1】:

您可以在下面设置md-mode="month"工作演示

   <md-input-container flex="100" layout="column">
          <div style="font-size: 10px; color: blue;" label ng-bind="::dateFields[2].label"></div>
          <md-datepicker ng-model="dateFields.selectedDate"
                     ng-required="dateFields.required"
                     md-date-locale="dateFields.locale"
                     md-mode="month"
                     md-open-on-focus="true">
        </md-datepicker>
    </md-input-container>

DEMO

【讨论】:

【解决方案2】:

知道md-mode="month" 在最新版本(如 7.3.7)中不起作用,我有其他解决方案。 首先在您的组件 HTML 中放置这个(包括用于显示所选月份的输入 + 将被隐藏的输入,但 mat-datepicker 需要):

<input type="text" matInput [matDatepicker]="picker">
<input class="form-control" [(ngModel)]="pickerDate" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="pickerDate" (monthSelected)="closeDatePicker($event)"></mat-datepicker>

然后在你的 ts 文件中放入这些行:

private pickerDate;
@ViewChild('picker') datePicker: MatDatepicker<any>;

closeDatePicker(event) {
    this.pickerDate = moment(event).format('YYYY-MM');
    this.datePicker.close();
}

就是这样。现在输入应该可以工作了。我也使用这个 css 来隐藏输入:

input[matinput] {
    position: absolute;
    width: 0px;
    border: none;
    height: 100%;
}

请记住,您不应该在 matInput 上使用 hidden,否则 datepicker 弹出窗口将显示在错误的位置。如果你使用我的 css,请记住,matInput 父级应该有position: relative

【讨论】:

    【解决方案3】:

    对于带有月份和年份的 Angular Material 日期选择器 --

    app.js

    var app = angular.module('plunker', ['ngMaterial']);
    
    app.controller('MainCtrl', function($scope) {
    
      var monthFormat =  buildLocaleProvider("MMM-YYYY");
    
        function buildLocaleProvider(formatString) {
            return {
                formatDate: function (date) {
                    if (date) return moment(date).format(formatString);
                    else return null;
                },
                parseDate: function (dateString) {
                    if (dateString) {
                        var m = moment(dateString, formatString, true);
                        return m.isValid() ? m.toDate() : new Date(NaN);
                    }
                    else return null;
                }
            };
        }
    
    
      $scope.dateFields = [ 
                    {
                        type: 'date',
                        required: false,
                        binding: 'applicant.expectedGraduation',
                        startView: 'month',
                        label: 'Credit Card Expiry - Year/Month picker',
                        mode: 'month',
                        locale: monthFormat
                    }
        ];
    });
    

    index.html

    <!DOCTYPE html>
    <html ng-app="plunker">
    
    <head>
      <meta charset="utf-8" />
      <title>AngularJS material-sidenav Plunker</title>
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <link rel="stylesheet" href="https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.css">
      <link rel="stylesheet" href="style.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
      <script src="https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.js"></script>
      <script src="app.js"></script>
    </head>
    
    <body layout="row" layout-wrap flex layout-fill layout-align="start start" ng-controller="MainCtrl">
    
        <md-input-container flex="100" layout="column">
              <div style="font-size: 10px; color: blue;" label ng-bind="::dateFields[0].label"></div>
              <md-datepicker ng-model="dateFields[0].selectedDate"
                         ng-required="dateFields[0].required"
                         md-date-locale="dateFields[0].locale"
                         md-mode="{{dateFields[0].mode}}"
                         md-open-on-focus="true">
            </md-datepicker>
        </md-input-container>
    </body>
    
    </html>
    

    以下链接的演示使用-- https://plnkr.co/edit/zXhgq3?p=preview

    【讨论】:

      【解决方案4】:

      我使用 angular 8documentation here 解决了这个问题。

      不要忘记用 Moment 设置 formControl,例如:this.monthlyResportDateFormControl = new FormControl(moment(this.monthlyReportDate))

      将值输入chosenMonthHandler 我是用this.monthlyReportDate = this.monthlyResportDateFormControl.value.toDate() 完成的

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-03-28
        • 1970-01-01
        • 1970-01-01
        • 2023-03-13
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多