Bootstrap DatePicker me obliga a usar Hora, minutos y segundos

publicado por: Anonymous

Tengo este datepicker de bootstrap, no entiendo porque no me deja utilizar la fecha común, solo date, nada de datetime porque no necesito la hora…

_x000D_

_x000D_

$(document).ready(function () {_x000D_
  var date_input = $('input[name="FechaInicio"]'); //our date input has the name "date"_x000D_
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";_x000D_
  var options = {_x000D_
    format: 'yyyy/mm/dd',_x000D_
    container: container,_x000D_
    todayHighlight: true,_x000D_
    autoclose: true,_x000D_
    orientation: 'top',_x000D_
  };_x000D_
  date_input.datepicker(options);_x000D_
});

_x000D_

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>_x000D_
_x000D_
<div class="form-group">_x000D_
  <label asp-for="FechaInicio" class="control-label col-md-3 col-sm-3 col-xs-12"></label>_x000D_
  <div class="col-md-6 col-sm-6 col-xs-12">_x000D_
    <input asp-for="FechaInicio" placeholder="yyyy/MM/dd" class="form-control" />_x000D_
    <span asp-validation-for="FechaInicio" placeholder="yyyy/MM/dd" class="text-danger"></span>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Ese es mi código, y lo que recibo es que apenas entro a la vista ya está precargado con horas y minutos, y no me deja cargar solo la fecha. Alguna solución?

Soy muy novato con javascript así que quizás se me pasa algo…

Mi modelo C#:

        [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
    [Display(Name = "Fecha de inicio")]
    public DateTime FechaInicio { get; set; }

Acá se ve en la vista como viene el modelo precargado…

solución

Mejor utiliza bootstrap-datepicker. Reemplazamos:

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css" integrity="sha256-6y4q3Cui535VG+TapOjQwXKsxgXP+hfcld77yOd/fac=" crossorigin="anonymous" />


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"/> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitterbootstrap/3.3.7/js/bootstrap.js"/> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" integrity="sha256-ncetQ5WcFxZU3YIwggfwOwmewLVX4SHLBtDYnrsxooY=" crossorigin="anonymous"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.es.min.js" integrity="sha256-K5G+7qV0tjuHL0LlhCU0TqQKR+7QwT8MfEUe2UgpmRY=" crossorigin="anonymous"/>

Al input dale un id:

   <input id="FechaInicio" asp-for="FechaInicio" placeholder="yyyy/MM/dd" class="form-control" />

y con jquery configuramos:

  $(document).ready(function () {
     // Defaults

    $.fn.datepicker.defaults.format = "yyyy-mm-dd";
    $.fn.datepicker.defaults.language = "es";
    $.fn.datepicker.defaults.autoclose = true;
    $.fn.datepicker.defaults.todayHighlight = true;


    $('#FechaInicio').datepicker({ format: 'yyyy-mm-dd' });

    });

EDICION:

Habría que igualar el id con el name:

La FechaInicio la definí como:

    public string FechaInicio { get; set; }

y en en controlador en Index() la inicializaba de la siguiente forma:

      var fi = String.Format("{0:yyyy-MM-dd}", DateTime.Now.AddDays(-1));
      ViewData["FechaInicio"] = fi;

El ViewData[“FechaInicio”] le pone el valor en la vista. Este campo lo convertía en DateTime al momento de buscar los entitys.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *