日期选择器字段中的当前日期

Question

我有一个表单，通过在我的字段中插入输入，我重新制作了引导日期选择器，一切正常。

现在这些字段始终为空。导航到页面时是否可以使当前日期始终显示在这些字段中？

我还想更改格式，使其类似于01 01 2022。

// Initialize datepicker
const dp = $("#month").datepicker({ 
    todayHighlight: true
});

// Show datepicker on <input> click  
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));

// On date change
const y  = document.getElementById('year');
const m  = document.getElementById('month');
const d  = document.getElementById('day');

dp.on('changeDate',function(ev){
    const date = dp.datepicker('getDate');
    y.value = date.getFullYear();
    d.value = date.getDate();
    dp.datepicker('hide');
    m.value = date.getMonth() + 1;
})

dp.on('hide',function(ev){
    const date = dp.datepicker('getDate');
    m.value = date.getMonth() + 1;
})

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
}


    
input {
      margin-right: 20px;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #F4F5F8;
      width: 50px;
}

.span-wrapper {
        display: flex;
        align-items: flex-end;
      }
      
span {
        
        color: #808694;
        font-family: Montserrat;
        font-size: 8px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: uppercase;
        text-align: center;
        width: 50px;
}

.main-content {
  min-height: 10vh;
}

.call-form-item-date {
  margin-top: 150px;
  margin-bottom: 150px;
}

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


<div class="main-content">
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
</div>

<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-comment') }}">
        <div class="col-md-6">
            <div class="call-form-item-date">
                <label for="date">Select a date *</label>
                <div class="input-wrapper">
                    <div id="datepickerContainer"></div>
                    <input class="js-form-month" id="month" type="text" name="month">
                    <input class="js-form-day" id="day" type="text" name="day">
                    <input class="js-form-year" id="year" type="text" name="year">
                    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                        <input class="form-control" type="text" readonly />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
        <div class="span-wrapper">
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>

Answer 1

您可以使用多个选项初始化日期选择器：

var defaultDate = new Date();

const dp = $("#month").datepicker({ 
    setDate: defaultDate,
    format:'mm dd yyyy',
    todayHighlight: true
});

• setDate：用默认日期初始化日期选择器
• 格式：定义日期选择器的格式 + 你有 dp.datepicker('getFormattedDate') 方法，它允许你从日期选择器中获取日期并配置格式

// Initialize datepicker
var defaultDate = new Date();

const dp = $("#month").datepicker({ 
    setDate: defaultDate,
    format:'mm dd yyyy',
    todayHighlight: true
});

// Show datepicker on <input> click  
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));

// On date change
const y  = document.getElementById('year');
const m  = document.getElementById('month');
const d  = document.getElementById('day');

y.value = defaultDate.getFullYear();
d.value = defaultDate.getDate();
m.value = defaultDate.getMonth() + 1;

dp.on('changeDate',function(ev){
    const date = dp.datepicker('getDate');
    console.log(dp.datepicker('getFormattedDate'));
    y.value = date.getFullYear();
    d.value = date.getDate();
    dp.datepicker('hide');
    m.value = date.getMonth() + 1;
})

dp.on('hide',function(ev){
    const date = dp.datepicker('getDate');
    m.value = date.getMonth() + 1;
})

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
}


    
input {
      margin-right: 20px;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #F4F5F8;
      width: 50px;
}

.span-wrapper {
        display: flex;
        align-items: flex-end;
      }
      
span {
        
        color: #808694;
        font-family: Montserrat;
        font-size: 8px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: uppercase;
        text-align: center;
        width: 50px;
}

.main-content {
  min-height: 10vh;
}

.call-form-item-date {
  margin-top: 150px;
  margin-bottom: 150px;
}

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


<div class="main-content">
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
</div>

<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-comment') }}">
        <div class="col-md-6">
            <div class="call-form-item-date">
                <label for="date">Select a date *</label>
                <div class="input-wrapper">
                    <div id="datepickerContainer"></div>
                    <input class="js-form-month" id="month" type="text" name="month">
                    <input class="js-form-day" id="day" type="text" name="day">
                    <input class="js-form-year" id="year" type="text" name="year">
                    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                        <input class="form-control" type="text" readonly />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
        <div class="span-wrapper">
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>