代码之家  ›  专栏  ›  技术社区  ›  lte__

聚合物-装订值格式日期

  •  5
  • lte__  · 技术社区  · 6 年前

    我在模板中有一个图块,希望它显示一个日期:

      <template>
        <px-tile
            description=[[date]]
        </px-tile>
      </template>
    

    在哪里? date 是元素的属性:

      date: {
        type: Date,
      }
    

    但是,这将显示整个日期和时间,我只需要日期。所以我想做的是:

      <template>
        <px-tile
            description=[[date.toLocaleDateString("en-US")]]
        </px-tile>
      </template>
    

    但这不管用。如何在此设置中设置日期格式?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Cappittall    6 年前

    为此你可以安排 px-tile.html 类似:

    DEMO

    ...
    </style>
    <div>Date : [[localDate]]</div>
    ...
    
      date: {
        type: Date,
        observer:'_checkDate'
      }
    
    
    _checkDate(d) {
       if (d) {
             // you may set the options with this information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
             var options = { year: 'numeric', month: 'long', day: 'numeric' }; 
             this.set('localDate', d.toLocaleDateString('en-US', options))
       }
    }
    

    保持父元素与上一个示例相同,但将属性名称更改为 date 这将是子元素的属性:

     <template>
        <px-tile
            date=[[date]]>
        </px-tile>
      </template>