0

Veran, tengo una tabla Experiencia con los siguientes parametros:

Schema::create('experiencias', function (Blueprint $table){
        $table->increments('id');
        $table->string('puesto');
        $table->string('funcion_realizada');
        $table->string('empresa');
        $table->string('sector_empresa');
        $table->date('mes_anyo_inicio');
        $table->date('mes_anyo_fin');
        $table->unsignedInteger('user_id');
        $table->foreign('user_id')->references('id')->on('users');
        $table->timestamps();
    });

Y tengo este formulario para insertar una nueva fila:

@extends('layouts.app')
@section('content')
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Introduzca su experiencia laboral</div>

                <div class="card-body">
                    <form method="POST" action="nueva_experiencia" novalidate>
                        @csrf

                        <div class="form-group row">
                        <label for="puesto" class="col-md-4 col-form-label text-md-right">Puesto en el que trabajó</label>

                        <div class="col-md-6">
                            <input id="puesto" type="text" class="form-control{{ $errors->has('puesto') ? ' is-invalid' : '' }}" name="puesto" value="{{ old('puesto') }}" required autofocus>

                                @if($errors->has('puesto'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('puesto') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="funcion_realizada" class="col-md-4 col-form-label text-md-right">Función realizada</label>

                            <div class="col-md-6">
                                <input id="funcion_realizada" type="text" class="form-control{{ $errors->has('funcion_realizada') ? ' is-invalid' : '' }}" name="funcion_realizada" value="{{ old('funcion_realizada') }}" required autofocus>

                                @if($errors->has('funcion_realizada'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('funcion_realizada') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="empresa" class="col-md-4 col-form-label text-md-right">Empresa para la que trabajó</label>

                            <div class="col-md-6">
                                <input id="empresa" type="text" class="form-control{{ $errors->has('empresa') ? ' is-invalid' : '' }}" name="empresa" value="{{ old('empresa') }}" required autofocus>

                                @if($errors->has('empresa'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('empresa') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="sector_empresa" class="col-md-4 col-form-label text-md-right">Sector en el que trabajó</label>

                            <div class="col-md-6">
                                <select id="sector_empresa" class="form-control{{ $errors->has('sector_empresa') ? ' is-invalid' : '' }}" name="sector_empresa" value="{{ old('sector_empresa') }}" required autofocus>
                                    @foreach($sectores as $sector)
                                        <option value="{{$sector->nombre}}">{{$sector->nombre}}</option>
                                    @endforeach
                                </select>

                                @if ($errors->has('sector_empresa'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('sector_empresa') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="mes_anyo_inicio" class="col-md-4 col-form-label text-md-right">Fecha en la que empezó su trabajo</label>

                            <div class="col-md-6">
                                <input id="mes_anyo_inicio" type="date" class="form-control{{ $errors->has('mes_anyo_inicio') ? ' is-invalid' : '' }}" name="mes_anyo_inicio" value="{{ old('mes_anyo_inicio') }}" required autofocus>

                                @if($errors->has('mes_anyo_inicio'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('mes_anyo_inicio') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="mes_anyo_fin" class="col-md-4 col-form-label text-md-right">Fecha en la que acabó su trabajo</label>

                            <div class="col-md-6">
                                <input id="mes_anyo_fin" type="date" class="form-control{{ $errors->has('mes_anyo_fin') ? ' is-invalid' : '' }}" name="mes_anyo_fin" value="{{ old('mes_anyo_fin') }}" required autofocus>

                                @if($errors->has('mes_anyo_fin'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('mes_anyo_fin') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <input type="hidden" name="user_id" value="{{ auth()->user()->id }}"/>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Guardar Experiencia
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

La historia son las variables mes_anyo_inicio y mes_anyo_fin, las cuales son variables tipo fecha, pero quiero que mi formulario solo almacenen el mes y el año. ¿Como consigo eso?

2 respuestas 2

1

Podes cambiar el tipo del input de date a month

<input id="month" type="month" pattern="[0-9]{4}-[0-9]{2}" />

El pattern es para que los navegadores que aún no implementan el tipo month y degradan a input tipo text tengan un pattern de entrada (AAAA-MM).

Actualmente (Junio 2018) sólo chrome, opera y edge lo soportan. Hay varias formas sugeridas de implementar un degradado aceptable en: https://developer.mozilla.org/es/docs/Web/HTML/Element/input/month

copio debajo el ejemplo de input month que se transforma en dos selects

(original https://jsfiddle.net/p410hdub/)

// define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'month';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // get the current year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for(var i = 0; i <= 100; i++) {
    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);
  }
}
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month -->

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">En qué mes nos visitará?</label>
    <input type="month" id="month-visit" name="month-visit">
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">En qué mes nos visitará?</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <label for="month">Mes:</label>
        <select id="month" name="month">
          <option selected>Enero</option>
          <option>Febrero</option>
          <option>Marzo</option>
          <option>Abril</option>
          <option>Mayo</option>
          <option>Junio</option>
          <option>Julio</option>
          <option>Agosto</option>
          <option>Septiembre</option>
          <option>Octubre</option>
          <option>Noviembre</option>
          <option>Diciembre</option>
        </select>
      </span>
      <span>
        <label for="year">Año:</label>
        <select id="year" name="year">
        </select>
      </span>
    </div>
  </div>
</form>

Otra opción es usar jQuery-UI limitando a año y mes como en este hilo: https://stackoverflow.com/a/2209104/1423096

1
  • Gracias. Estoy viendo que para la poquita cosa que queria hacer hay que montar tela, pues tendria que crear 2 variables, una para el mes y otra para el año. el 11 jun. 2018 a las 13:59
0

Si defines las columnas mes_anyo_inicio y mes_anyo_fin como date en la base de datos, esta va a esperar que lo introduzcas en ese formato. Aunque captures la request y modifiques esos valores, posiblemente te de error igualmente.

La forma más simple y rápida que tienes de hacer esto, es declararlos como string y en la request capturar los dos campos, quedarte solo con el mes y el año e insertarlo así.

Tu Respuesta

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

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