Date Picker dont work

[criti18]

Hi, I have problems with the date selector, when selecting any date is displayed correctly, however the input is empty or undefined.

Only when I write any key the value of the date picker is present.

[chelaruc]

Hi, @criti18! Can you give me a demo project for doing some tests?

Regards, Ciprian

[criti18]

Hi @chelaruc i will show you my component in what I work in a plunker demo.

import { Component, OnInit, Injectable } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { TareasService } from '../../services/tareas.service';

declare var require: any
declare var $:any;
declare var swal:any;

@Component({
  selector: 'app-tareas-nuevas',
  templateUrl: './tareas-nuevas.component.html',
  providers: [TareasService]
})
export class TareasNuevasComponent implements OnInit {

    public tarea:any;
    public status:any;
    public errorMessage:any;
    public identity:any;
    public token:any=localStorage.getItem('token').replace(/^"(.*)"$/, '$1');
    public tokenString:any='Bearer ';
    public tokenAuth:string= this.tokenString + this.token;
  public str:any;
  public admins:any [];
  public tituloCabe:string;
  public mensaje:any;

  constructor(
  private _route: ActivatedRoute,
    private _router: Router,
    private _tareasService: TareasService,
        ) { }

  ngOnInit() {
      this.identity = this._tareasService.getIdentity();
      this.tarea = {
          "user_id":"",
          "status":"pendiente",
          "cliente":"",
          "titulo":"",
          "descripcion":"",
          "prioridad":"",
          "fechaEntrega":'',
          "servicio":"",
      }

    $('.datepicker').datetimepicker({

            format: 'YYYY-MM-DD',
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-chevron-up",
                down: "fa fa-chevron-down",
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',

            },

    });
    this.getAdmins();

  }

  onSubmit(){
    this._tareasService.postTarea(this.tarea, this.tarea.user_id, this.tokenAuth).subscribe(
      response => {
        this.status = response;
        this.tituloCabe = "Tarea creada con éxito";
        this.mensaje = "Se registró una nueva tarea con éxito.";
        this.showSwal('success-message', this.tituloCabe, this.mensaje);
      },
      error => {
        this.errorMessage = error._body;
        this.tituloCabe = "Error, recarga la página";
        this.showSwal('error', this.tituloCabe, this.errorMessage);
      }
    );
  }

  getAdmins(){
    this._tareasService.getAdmins(this.tokenAuth).subscribe(
      response => {
        this.admins = response.data;
      }, 
      error => {
       this.errorMessage = error._body;
        this.tituloCabe = "Error, recarga la página";
        this.showSwal('error', this.tituloCabe, this.errorMessage);
      }
    );
  }

  showSwal(type, titulo, mensaje){
        if(type == 'error'){
          swal({
            type: "error",
                title: "Error",
                text: mensaje,
                buttonsStyling: false,
                confirmButtonClass: "btn btn-warning"
            });

      }else if(type == 'success-message'){
          swal({
                type: "success",
                title: titulo,
                text: mensaje,
                buttonsStyling: false,
                confirmButtonClass: "btn btn-success",   
            });

            var promise = new Promise((resolve, reject) => {
          setTimeout(() => {
            window.location.href = "/tareas";
            resolve();
          }, 2500);
        });

      }
  }

}

HTML

<div class="main-content" >
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Nueva tarea</h4>
                    </div>
                    <div class="card-content">
                        <form  #tareaForm="ngForm" (ngSubmit)="onSubmit()" class="form-horizontal">
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Responsable:</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" #user_id="ngModel" name="user_id" [(ngModel)]="tarea.user_id" required>
                                            <option *ngFor="let admin of admins" [ngValue]="admin.user_id">
                                            {{admin.name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Date Picker:</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control datepicker" #fechaEntrega="ngModel" name="fechaEntrega" [(ngModel)]="tarea.fechaEntrega" placeholder="Select date"/>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Prioridad:</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" #prioridad="ngModel" name="prioridad" [(ngModel)]="tarea.prioridad">
                                            <option>Alta</option>
                                            <option>Media</option>
                                            <option>Baja</option>
                                        </select> 
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Cliente</label>
                                    <div class="col-sm-10">
                                        <input #cliente="ngModel" name="cliente" [(ngModel)]="tarea.cliente" type="text" class="form-control">
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Servicio:</label>
                                    <div class="col-sm-10">
                                        <select class="form-control"#servicio="ngModel" name="servicio" [(ngModel)]="tarea.servicio">
                                            <option>membresia</option>
                                            <option>constitucion</option>
                                            <option>corporativo</option>
                                            <option>proteccion de datos</option>
                                            <option>condusef</option>
                                            <option>seguros y fianzas</option>
                                            <option>cnsf</option>
                                            <option>juicios</option>
                                            <option>otros procesos legales</option>
                                        </select> 
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Título de la tarea:</label>
                                    <div class="col-sm-10">
                                        <input #titulo="ngModel" name="titulo" [(ngModel)]="tarea.titulo" type="text" class="form-control">
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Decripción:</label>
                                    <div class="col-sm-10">
                                        <textarea #descripcion="ngModel" name="descripcion" [(ngModel)]="tarea.descripcion" class="form-control" placeholder="Escribe aquí el mensaje o comentario" rows="3"></textarea>
                                    </div>
                                </div>
                            </fieldset>

                            <button type="submit" class="btn btn-fill btn-info">Crear</button>

                        </form>
                    </div>
                </div>  <!-- end card -->
            </div>
        </div>
     </div>
</div> <!-- end col-md-12 -->

Regards

[criti18]

The solution is here, however, it is made for AngularJS, so that it works with Angular4 how could it be? https://github.com/Eonasdan/bootstrap-datetimepicker/issues/314

[criti18]

There is still no support for the datepicker?

[dobrinsky]

Actually, almost no datepicker works in Angular because it does not bind it to the object behind it.

I do not know if you found a solution, but mine was to use ng-pick-datetime

The upside is that it works in every browser I tested it. The downside is that it takes a while to appear. It takes more and more as the computer is slower.