Question

我有一个名为month的输入字段。

  <span>
        Month: <br />
        <input id="typeahead-basic" type="text" class="form-control month" />
    </span>

我想要做的是，如果您在month字段中输入6，它将自动更改为06，如果您输入2，则它将更改为02。因此，从1-9的所有内容都应添加零。如果可以将其实现到component.ts类中，那将是很好的。非常感谢你！

编辑：所以我所做的是：在组件中：

 checkMonth() {
    if (this.month < 1) {
        this.month = "01";
    } else if (this.month > 12) {
        this.month = 12;
    } else if (this.month < 10) {
        this.month = '0' + this.month;
    }
}

这是HTML代码：

<input class="form-control hideSpinners" min=1 max=12 type="number" [(ngModel)]="month"
                (change)="checkMonth()"/>

Answer 1

用简单的HTML不可能。

您可以做的就是在值更改时调用onChange函数。

<span>
    Month: <br />
    <input id="typeahead-basic" type="text" class="form-control month" onchange="addZero(this)"/>
</span>

在您的组件脚本中

addZero(input) {
    if(input.value > 0 && input.value < 10) input.value = `0${input.value}`;
}

示例：http://jsfiddle.net/nrjw56sv/（Vanilla JS） https://stackblitz.com/edit/angular-fr19pk（有角）

Answer 2

slice为负值可以解决问题：

const input = document.querySelector('input[type="text"]#id');

input.addEventListener('blur', () => {
  input.value = input.value.length === 1 ? 
    `0${input.value}`.slice(-2) :
    input.value;
});

<input id="id" type="text" placeholder="Enter a numeric value">
<input type="text" placeholder="Enter a numeric value (HTML only)" onblur="this.value = this.value.length === 1 ? ('0' + this.value).slice(-2) : this.value">

Answer 3

您可以使用ngModel指令。像这样：

  <span>
        Month: <br />
        <input name="inputfield" #input [(ngModel)]="month" (input)="changeDate(month)" id="typeahead-basic" type="text" class="form-control month" />
    </span>

您的组件中将需要一个与ngModel相匹配的公共属性，因此在本例中为“ month”。

然后，您只需要编写一个changeDate函数，该函数从输入字段中获取ngModel值并将其添加0，这在普通javascript中就足够了。

角转换日期

3 个答案: