Устройства выбора даты — это распространенный компонент веб-приложений, который позволяет пользователям выбирать определенную дату в интерфейсе, напоминающем календар. Получение выбранной даты из средства выбора даты и использование ее в вашем приложении — фундаментальная задача веб-разработки. В этой статье мы рассмотрим различные методы извлечения дат из средства выбора даты с использованием разных языков программирования и платформ.

Метод 1: JavaScript с jQuery (UI Datepicker):

// HTML
<input type="text" id="datepicker">
// JavaScript
$(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(dateText) {
      var selectedDate = new Date(dateText);
      console.log(selectedDate);
    }
  });
});

Метод 2: JavaScript с Bootstrap Datepicker:

// HTML
<input type="text" class="datepicker">
// JavaScript
$(document).ready(function() {
  $(".datepicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  }).on('changeDate', function(e) {
    var selectedDate = e.date;
    console.log(selectedDate);
  });
});

Метод 3: AngularJS с AngularUI Datepicker:

<!-- HTML -->
<input type="text" ng-model="selectedDate" uib-datepicker-popup="yyyy-MM-dd">
<!-- JavaScript -->
angular.module('myApp', ['ui.bootstrap'])
  .controller('DatepickerCtrl', function($scope) {
    $scope.selectedDate = new Date();
  });

Метод 4: React с React Datepicker:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
const MyDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const handleDateChange = (date) => {
    setSelectedDate(date);
    console.log(date);
  };
  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleDateChange}
      dateFormat="yyyy-MM-dd"
    />
  );
};

Метод 5: Vue.js с Vue Datepicker:

<!-- HTML -->
<template>
  <div>
    <datepicker v-model="selectedDate" format="yyyy-MM-dd"></datepicker>
  </div>
</template>
<!-- JavaScript -->
<script>
import Datepicker from 'vuejs-datepicker';
export default {
  components: {
    Datepicker
  },
  data() {
    return {
      selectedDate: null
    };
  }
};
</script>

В этой статье мы рассмотрели несколько методов получения дат из средства выбора даты на разных языках программирования и платформах. Независимо от того, используете ли вы JavaScript с jQuery, Bootstrap, AngularJS, React или Vue.js, существуют различные подходы для доступа к выбранной дате. Понимая эти методы, вы сможете улучшить свои веб-приложения с помощью мощных возможностей выбора и манипулирования датами.

Не забудьте выбрать метод, который соответствует требованиям вашего проекта и используемым вами библиотекам/фреймворкам. Приятного кодирования!