Problem with the input type="date" when loading a date from a MySQL database

0

I am carrying out a project as a test using angularJS, SpringBoot, JPA technology in a MySQL database. Now I'm doing a CRUD of a movie entity. One of the attributes of the entity is a date (Date). I make the insertion in the MySQL DB without any problem. As I was observing, the component that I use for the date has the format dd / mm / yyyy. In the view to create the Film I assign to a text field the value collected in the date component, observe the image, and everything is perfect.

When I insert the MySQL database, the date is saved in the following format yyyy-MM-dd, observe the image.

One of the problems is when I pick up the date of the BD to show a list with all the films, and I directly assign the date property of the object, it shows me the date in this format.

Also, when I charge the entity to modify it, it obtains all the values of its attributes without any problem, with the exception, as is logical, of the date that leaves it blank. The date attribute comes with value because to test it I assign that same value to a text field.

Here is the code for my eyesight. Look especially at the part of the date field.

<div  >

    <div class="container" >
        <p>{{segundoParametro}}</p>

        <p  ng-if="acept" ng-show="acept && films.length!=0">Todos los filmes</p>
        <div class="margenIngerior" ng-if="acept" ng-show="acept && films.length!=0" class="film-info-bottom" ng-repeat="film in films">
            <h4><span> {{film.anno}} - {{film.titulo}} -{{film.director}} -{{film.fecha}} </span></h4>

            <button id="deleteBtn" class="btn" ng-click="deleteFilm(film.id)">Eliminar</button>
            <button id="modifyBtn" class="btn" ng-click="enviarEditar(film.id)">Editar</button>

        </div>
        <div >
            <label for="title">Título:</label>
            <input id="title" ng-model="titulo" type="text" />


            <label for="year">Año:</label>
            <input id="year" ng-model="anno" />

            <label for="director">Director:</label>
            <input id="director" ng-model="director" type="text" />

            <label for="fecha">Fecha:</label>
            <input id="fecha" ng-model="fecha" type="date"  pattern="yyyy-MM-dd"/>

            <label for="fechatext">Fecha texto:</label>
            <input id="fechatext" ng-model="fecha" type="text" />

            <button ng-show="acept"  id="addBtn" class="btn" ng-click="addFilm()">Añadir
                película</button>
            <button ng-hide="acept" id="ediutBtn" class="btn" ng-click="editFilm()">Editar pelicula</button>
            <button ng-hide="acept" id="cancelarBtn" class="btn" ng-click="enviarCrear()">Cancelar </button>
            <p ng>{{msg}}</p>
        </div>


        <p ng-if="acept" ng-show="acept && pelicCoincidencia.length  != 0 ">Películas coincidencia (pSQL)</p>
        <div ng-if="acept" ng-show="acept && pelicCoincidencia.length  != 0" class="film-info-bottom" ng-repeat="pelis in pelicCoincidencia">
            <h4><span> {{pelis.anno}} - {{pelis.titulo}} -{{pelis.director}} -{{pelis.fecha}} </span></h4>
        </div>

        <p ng-if="acept" ng-show="acept && pelicCoincidenciaSQL.length  != 0 ">Películas no coincidencia (SQL)</p>
        <div ng-if="acept" ng-show="acept && pelicCoincidenciaSQL.length  != 0" class="film-info-bottom" ng-repeat="pelis in pelicCoincidenciaSQL">
            <h4><span> {{pelis.toString()}} </span></h4>
        </div>
    </div>



</div>
Here is the driver. Look mainly at the methods addFilm (used at the time of adding), editFilm (used when editing), searchById (used to obtain the object to edit and load all your data) and getFilms (used to obtain the list of objects to show)

package com.example.demo.RestControler;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.example.demo.Entidades.Pelicula;
import com.example.demo.Services.PeliculaService;
import com.example.demo.Services.PeliculaServiceImpl;
import com.example.demo.Wrappers.Film;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;

@RestController
@Scope("session")
@RequestMapping(value = "/films")
public class FilmsController {



    @Autowired
    private PeliculaServiceImpl peliculaServiceImp;

    @RequestMapping( method = RequestMethod.GET)
    public List<Pelicula> getFilms(){

        List<Pelicula> lista = new ArrayList<>();
        Iterator<Pelicula> iterador= peliculaServiceImp.listAllPeliculas().iterator();

        while (iterador.hasNext())
        {
                    lista.add(iterador.next());
        }

        return lista;
    }

    @RequestMapping(method = RequestMethod.POST)
    public void addFilm(@RequestBody @Valid Pelicula pelicula)
    {
        peliculaServiceImp.savePelicula(pelicula);
    }

    @RequestMapping(value ="/buscar/{id}", method = RequestMethod.GET )
    public Pelicula buscarById( @PathVariable("id") Integer id){
        Pelicula pelicula= peliculaServiceImp.getPeliculaById(id);
        return pelicula;

    }

    @RequestMapping(value ="/delete/{id}", method = RequestMethod.DELETE )
    public void delete( @PathVariable("id") Integer id){
        peliculaServiceImp.deletePelicula(id);

    }

    @RequestMapping(value ="/edit/{id}", method = RequestMethod.PUT )
    public void editFilm(@RequestBody @Valid Pelicula pelicula, @PathVariable("id") Integer id){
       Pelicula peliculaEditar= peliculaServiceImp.getPeliculaById(id);
        peliculaEditar.setAnno(pelicula.getAnno());
        peliculaEditar.setDirector(pelicula.getDirector());
        peliculaEditar.setTitulo(pelicula.getTitulo());
        peliculaEditar.setFecha(pelicula.getFecha());
        peliculaServiceImp.savePelicula(peliculaEditar);

    }

    @RequestMapping(value ="/peliculasCoincidencia/{titulo}/{director}", method = RequestMethod.GET)
    public List<Pelicula> getPeliculasCoincidencia(@PathVariable("titulo") String titulo, @PathVariable("director") String director){

        List<Pelicula> lista = peliculaServiceImp.findPeliculaByTituloDirector(titulo,director);
        return lista;
    }

    @RequestMapping(value ="/peliculasCoincidenciaSQL/{titulo}/{director}", method = RequestMethod.GET)
    public List<String> getPeliculasCoincidenciaSQL(@PathVariable("titulo") String titulo, @PathVariable("director") String director){

        List<String> lista = peliculaServiceImp.findPeliculaByTituloDirectorSQL(titulo,director);
        return lista;
    }



}

What do you suggest to me to solve the problem of the format of the date? Thanks in advance.

    
asked by Jordan Abdul 27.02.2018 в 21:41
source

0 answers