JavaScript日期选择功能示例

下面是详细讲解“JavaScript日期选择功能示例”的完整攻略：

1. 简介

JavaScript是一种流行的前端编程语言，它可以让网站的交互性更好。其中，日期选择功能是一个常见的功能，在表单上使用时，非常常用。在JavaScript中，我们可以使用Date对象来实现日期相关的功能。本文将演示如何构建一个简单的日期选择器。

2. Date对象

在JavaScript中，我们可以使用Date对象来表示一个日期。创建一个Date对象的语法如下：

var date = new Date();

上面的代码会创建一个Date对象，表示当前时间。

Date对象有一些常用的方法，可以用来获取日期的各个部分。例如：

var date = new Date();
var year = date.getFullYear();     // 获取当前年份
var month = date.getMonth() + 1;  // 获取当前月份，注意月份从0开始计算
var day = date.getDate();         // 获取当前日期

3. 构建日期选择器

基于上面的内容，我们可以开始构建一个简单的日期选择器。我们可以创建一个文本框，并在用户点击文本框时弹出一个日期选择框。用户选择日期后，日期选择框会自动关闭，并将选中的日期显示在文本框中。

示例1

HTML代码：

<input type="text" id="date-input" />

JavaScript代码：

var input = document.getElementById('date-input');

input.addEventListener('click', function() {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var dateString = year + '-' + month + '-' + day;
  input.value = dateString;
});

上面的代码会在用户点击文本框时，获取当前日期，并将日期字符串赋值给文本框的值。注意，日期的格式是YYYY-MM-DD。

示例2

HTML代码：

<input type="text" id="date-input" />

JavaScript代码：

var input = document.getElementById('date-input');

input.addEventListener('click', function() {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();

  var picker = document.createElement('div');
  picker.style.position = 'absolute';
  picker.style.top = input.offsetTop + input.offsetHeight + 'px';
  picker.style.left = input.offsetLeft + 'px';
  picker.style.border = '1px solid #ccc';
  picker.style.background = '#fff';
  picker.style.padding = '10px';

  var yearSelect = document.createElement('select');
  for (var i = year - 10; i < year + 10; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.text = i;
    yearSelect.appendChild(option);
  }
  picker.appendChild(yearSelect);

  var monthSelect = document.createElement('select');
  for (var i = 1; i <= 12; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.text = i;
    monthSelect.appendChild(option);
  }
  picker.appendChild(monthSelect);

  var daySelect = document.createElement('select');
  for (var i = 1; i <= 31; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.text = i;
    daySelect.appendChild(option);
  }
  picker.appendChild(daySelect);

  var okButton = document.createElement('button');
  okButton.textContent = 'OK';
  okButton.addEventListener('click', function() {
    var year = yearSelect.value;
    var month = monthSelect.value;
    var day = daySelect.value;
    var dateString = year + '-' + month + '-' + day;
    input.value = dateString;
    document.body.removeChild(picker);
  });
  picker.appendChild(okButton);

  var cancelButton = document.createElement('button');
  cancelButton.textContent = 'Cancel';
  cancelButton.addEventListener('click', function() {
    document.body.removeChild(picker);
  });
  picker.appendChild(cancelButton);

  document.body.appendChild(picker);
});

上面的代码会在用户点击文本框时，弹出一个日期选择框。日期选择框中包含了年份、月份、日期三个下拉框。用户选择日期后，可以通过OK按钮确认选择，也可以通过Cancel按钮取消选择。注意，日期的格式仍然是YYYY-MM-DD。