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

角度5中的日期时间选择器

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

    我正在使用此日期时间选择器:- https://www.npmjs.com/package/angular2-datetimepicker
    官方文件链接:- https://cuppalabs.github.io/angular2-datetimepicker/#/datetimepicker

    现在,我已经成功地实现了它。这是完美的工作,但时间选择器没有显示。 根据他们的文档,我设置了timepicker:false和timepicker:true。

    在组件中。ts文件。

    date: Date = new Date();
    settings = {
        bigBanner: true,
        format: 'dd-MMM-yyyy hh:mm a',
        defaultOpen: true
    }
    

    在组件中。html文件。

     <angular2-date-picker [(ngModel)]="date" [settings]="settings"></angular2-date-picker>
    

    屏幕截图。

    enter image description here

    编辑:- 我认为问题是设置对象无法从中工作。ts文件,因为如果我删除设置对象,那么它也只显示日期。

    2 回复  |  直到 6 年前
        1
  •  6
  •   Kevin Piatt    6 年前

    这将作为来自的对象。ts文件。请注意,HTML文件包含一行。ts文件丢失。您的中没有“timePicker:true”行。ts设置。所以你的最终设置对象在那。ts文件应如下所示:

    settings = {
        bigBanner: true,
        format: 'dd-MMM-yyyy hh:mm a',
        defaultOpen: true,
        timePicker: true
    }
    

    另一方面,禁用带有“bigBanner:false”的bigBanner选项会自动禁用此工具中的计时器。我注意到您的已启用,但我认为如果其他人发现此解决方案寻找其计时器未显示的其他原因,则值得一提。

        2
  •  3
  •   Bhavin    6 年前

    我找出了设置对象无法从中工作的问题。ts文件。 所以,我改变了它

    <angular2-date-picker [(ngModel)]="date" [settings]="{
            bigBanner: true,
            timePicker: true,
            format: 'dd-MMM-yyyy hh:mm a'
        }"></angular2-date-picker>
    

    它正在发挥作用。

    注:- 我在Angular-5中尝试了4-5个日期时间选择器,这是唯一有效的日期时间选择器。所以我们可以使用它。