Closed criti18 closed 6 years ago
Hi, @criti18! Can you give me a demo project for doing some tests?
Regards, Ciprian
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
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
There is still no support for the datepicker?
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.
Hi, I have problems with the date selector, when selecting any date is displayed correctly, however the input is empty or undefined.
![date-3](https://user-images.githubusercontent.com/17114726/33973290-a5920584-e047-11e7-8c17-47705b5e4a3e.PNG)
Only when I write any key the value of the date picker is present.