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

引导日期时间选择器不适用于角度6或7

  •  0
  • Tushar  · 技术社区  · 6 年前

    我从角度6创建一个普通的反应

    <div class="input-group date">
        <input type="text" class="form-control m-input m_datetimepicker"  placeholder="Select auction start date & time" 
            formControlName="addStartDate" [ngClass]="{ 'is-invalid': addForm.get('addStartDate').touched && addForm.get('addStartDate').invalid }" />
        <div class="input-group-append">
            <span class="input-group-text"><i class="la la-calendar-check-o glyphicon-th"></i></span>
        </div>
        <div class="invalid-feedback">
            <div>* Time start date & time is required</div>
        </div>
    </div>
    

    因此,我使用基本jquery初始化日期时间选择器

    $("body").on("focus", ".m_datetimepicker", function () {
        $(".m_datetimepicker").datetimepicker({
            autoclose: true,
            todayBtn: true,
            keepOpen: false,
            startDate: today,
            dateFormat: 'dd/mm/yy',
        });
    });
    

    this.addForm.value 该列表示日期时间选择器值未与该值绑定 formControlName , 它给了我 null

    1 回复  |  直到 6 年前
        1
  •  4
  •   magos    6 年前

    不应将jQuery和基于jQuery的库与Angular一起使用。这是整个角度观念的矛盾。您也不应该直接在DOM上操作以保持与不同环境Angular serve兼容。

    为了安全地操作DOM树,使用内置的renderer-Renderer2(必须注入到组件中)

    尝试改用ngx引导库。它是为使用角度而量身定做的: https://www.npmjs.com/package/ngx-bootstrap

    编辑 https://stackblitz.com/edit/ngx-bootstrap-datepicker