2

Buenas, estoy haciendo un proyecto con AngularJS 1.6 y quisiera guardar en una variable del Scope un dia determinado y que al ir a la vista esté el día esté marcado en el calendario sin tener que hacer nada. Suponía que usando la variable del scope en el ng-model ya estaría, pero el caso es que no me está haciendo nada.

El código es muy básico:

<datepicker date-format="dd/MM/yyyy" date-week-start-day="1" ng-model="dt">
   <input ng-show = "false" name="day" type="text" class = "smallInputCrear" ng-model="dt">
</datepicker>

y en el Controlador:

$scope.dt = new Date();

Estaría muy agradecido si alguien me pudiera echar una mano. Gracias.

1
  • 2
    Comparte el link de documentacion de la directiva datepicker para poder ayudarte.
    – Einer
    el 5 sep. 2017 a las 14:46

3 respuestas 3

1

El código correcto sería el siguiente, en el controlador:

$scope.date = new Date();

y en el HTML:

<datepicker date-format="yyyy-MM-dd">
    <input ng-model="date" type="text"/>
</datepicker>
1
  • Con ese código se muestra el día actual en una línia en la parte superior pero no aparece el calendario con el dia actual seleccionado.
    – Javi
    el 18 sep. 2017 a las 9:11
0

Deduzco, por las lineas de código, que estas utilizando el componente de angular-datepicker. En la documentación indica que el ng-model hay que ponérselo al tag <input> no al <datepicker>. Tambien indica que para marcar un día por defecto, hay que usar date-set="{{date}}"

5
  • Hola gracias, estoy utilizando este: github.com/720kb/angular-datepicker
    – Javi
    el 13 sep. 2017 a las 9:14
  • y a parte de tener el ng-model duplicado (resuelto) he utilizado el date-set en el input añadiéndolo al código que indico arriba, pero sigue sin seleccionarme el dia actual. Como indica la documentación utilizando una variable diferente del ng-model
    – Javi
    el 13 sep. 2017 a las 9:17
  • Controlador: $scope.date = new Date(); $scope.today = new Date(); HTML: <datepicker date-format="yyyy-MM-dd"> <input ng-model="date" date-set="today" type="text"/> </datepicker>
    – Javi
    el 13 sep. 2017 a las 9:18
  • El data-set va en la etiqueta datepicker y el ng-model en el input. HTML <datepicker date-format="yyyy-MM-dd" date-set="{{today|date:'yyyy-MM-dd'}}"> <input ng-model="date" type="text"/> </datepicker>
    – Naimad
    el 14 sep. 2017 a las 6:23
  • Muchas gracias Naimad, aunque sigue sin marcarme el dia actual. La fecha la coje bien porque me aparece en el input, y utilizo variables distintas, pero nada. Se que debe ser alguna tontería pero no la encuentro.
    – Javi
    el 15 sep. 2017 a las 9:17
0

Hola dejo este ejemplo que me funciono en angular 7.

 //------------------------------file:filtro.ts--------------------

 export interface filtro {
     FechaDesde?: string; 
    FechaHasta?: string  
  }


            //-------------------------------file:componente.ts--------------------------

            import { Component, OnInit } from '@angular/core';
            import { filtro } from 'src/app/models/filtro';

            @Component({
              selector: 'app-datos-form',
              templateUrl: './datos-form.component.html',
              styleUrls: ['./datos-form.component.css']
            })

            export class DatosFormComponent implements OnInit {

              Filtro: filtro = {
                FechaDesde: "", 
                FechaHasta: "" 
              };

              constructor() { }

              ngOnInit() {

                //FechaDesde
                var f1 = new Date();
                let fd = this.formatDate(f1);
                this.Filtro.FechaDesde= fd;
                //FechaHasta
                this.Filtro.FechaHasta= fd;

              }


              formatDate(date : Date): string {
                //dia
                var d = date.getDate();d++;
                var d2 ="";
                if (d<10){
                  d2 = "0" + d;
                }else{
                  d2 = "" + d;
                }
                //mes
                var m = date.getMonth();m++;
                var m2 ="";
                if (m<10){
                  m2 = "0" + m;
                }else{
                  m2 = "" + m;
                }
                //año
                var y = date.getFullYear();

                //fecha format string yyyy-mm--dd
                var f =  y + "-" + m2 + "-" + d2
                console.log(f);
                //return `${d}-${m}-${y}`;
                return f;
                //return "2019-05-03";
              }
            }

            ------------------------------html------------------------------
            <div class="row">
              <div class="col-md-12">
                      <div class="form-group">
                        <label class="col-sm-1 control-label" for="dateDesde">Desde</label>
                        <input id="dateDesde" name ="dateDesde" type="date" class="form-control col-sm-3"
                        [(ngModel)]="Filtro.FechaDesde" date='dd-MM-yyyy'>

                        <label class="col-sm-1 control-label" for="dateHasta">Hasta</label>
                        <input id="dateHasta" name ="dateHasta" type="date" class="form-control col-sm-3"
                        [(ngModel)]="Filtro.FechaHasta" date='dd-MM-yyyy'>
                      </div>   
              </div>
            </div>
1
  • 1
    Por favor lee Cómo responder, edita y explica tu respuesta pues aportar solo con código se considera de baja calidad
    – BetaM
    el 14 may. 2019 a las 14:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.