月份和年份选择器引导程序 - Html

本文将介绍如何使用HTML和CSS创建一个简单的月份和年份选择器引导程序，可以帮助用户选择年份和月份。该程序使用了Bootstrap框架，因此需要在HTML页面中引入Bootstrap的CSS和JS文件。

HTML代码段

<div class="input-group date">
  <select class="form-control" id="year">
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <!-- add more years... -->
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="year">年</label>
  </div>
  <select class="form-control" id="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <!-- add more months... -->
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="month">月</label>
  </div>
</div>

上述代码中，我们使用了Bootstrap框架的input-group和form-control的样式来实现输入框和下拉菜单的样式。我们为年份和月份分别创建了下拉菜单，并加入了选项。

Javascript代码段

$(function () {
  $('.date').datepicker({
    format: "yyyy-mm",
    startView: "months", 
    minViewMode: "months"
  });
});

上述Javascript代码使用了JQuery库的datepicker插件，该插件可以将文本框转换为一个日期选择器。我们使用format、startView和minViewMode选项来设置日期格式和初始化视图，这里我们只显示年份和月份。

CSS代码段

.input-group-text {
  background-color: #f8f9fa;
  border-color: #ced4da;
  color: #495057;
}

上述CSS代码设置了输入框和下拉菜单的样式，这里我们为下拉菜单添加了浅灰色的背景和边框。

结语

我们已经介绍了如何使用HTML、CSS和JQuery来创建一个简单的月份和年份选择器。这个引导程序可以帮助用户快速选择日期和时间。如果您想要更丰富的功能，也可以考虑使用其他日期选择器插件或自行开发。