Поле DatePicker не отображает выбранную дату из базы данных

Question

На этом изображении вы видите дату, показывающую

, но в2-е изображение (Выбор даты) показывает сегодняшнюю дату, а не выбранную дату.мой код ниже

 < input name="period" id="period" type="text" value="{{$item->period}}" class="validate date-picker" >

код JavaScript:

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

Заранее спасибо faisal

Answer 1

Вы устанавливаете формат значения даты ввода неправильно, поэтому он не работает

Например, вы устанавливаете значение поля ввода "10-29-2012", и вы указали формат "гггг-мм-дд "оба формата должны быть одинаковыми, ниже приведен рабочий образец

Ссылка на документацию также может быть полезна для вас выбора даты

Установка даты выбора даты `

$(document).ready(function() {
    $('#js-date').datepicker({
    	format: 'yyyy-mm-dd'
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-sm-6">
         With data provide attribute
      </div>
      <div class="col-sm-6">
         <div class="input-group date" data-provide="datepicker">
            <input type="text" class="form-control" id="data-date">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-th"></span>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-12">
         <p class="bg-info">
            Uses the data-provide attribute in HTML
         </p>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-6">
         With JavaScript
      </div>
      <div class="col-sm-6">
         <div class="input-group date">
            <input type="text" class="form-control" id="js-date" value="2018-12-19">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-th"></span>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-12">
         <p class="bg-info">
            No data-provide attribute in HTML. Initialized using JavaScript
         </p>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-12">
         <p class="bg-primary" style="margin-top: 10px;">
            Plugin Used: <a href="https://github.com/uxsolutions/bootstrap-datepicker">https://github.com/uxsolutions/bootstrap-datepicker</a>
         </p>
      </div>
   </div>
</div>

Answer 2

use setDate (date): устанавливает дату для средства выбора даты.

например:

$( ".datepicker" ).datepicker( "setDate", "yourdate" );