I want to display a dropdown containing (localized) month names by using angular's datepipe.
<select>
<option *ngFor="let month of months;" value="{{month}}">
{{month | date: 'MMMM'}}
</option>
</select>
months
is an array of numbers from 0 to 11.
The generated options have the correct values but it's always 'January'
<select>
<option value="0"></option>
<option value="1"> January</option>
<option value="2"> January</option>
<option value="3"> January</option>
<option value="4"> January</option>
<option value="5"> January</option>
<option value="6"> January</option>
<option value="7"> January</option>
<option value="8"> January</option>
<option value="9"> January</option>
<option value="10"> January</option>
<option value="11"> January</option>
</select>
Is there something wrong with my code or isn't it possible at all to achieve what i want using angular's datepipe? If so, how can i accomplish it?
months must be an array of Dates, you can use
months=[0,1,2,3,4,5,6,7,8,9,10,11].map(x=>new Date(2000,x,2))
And (see that I changed the [value] to [value]="i")
<select>
<option *ngFor="let month of months;let i=index" [value]="i">
{{month | date: 'MMMM'}}
</option>
</select>