Компонент Date

@oxy2388 · Регистрация: 02.11.2021

Студворк — интернет-сервис помощи студентам

Создайте компонент Date, который отрисовывает обычный

JavaScript
1
<input type="text" />

. Компонент должен получать свойство value в виде даты с разделителем - точкой. Если дата корректна, input нужно выделить зеленоё рамкой, иначе - другого цвета
Например,

JavaScript
1
<Date value="16.01.2022" />

Добавлено через 2 часа 51 минуту
Рамки, как понимаю, отдельно в styled описывать? И как сделать разделение точкой...тоже тот еще вопросец

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function tick() {
  const element = (
    <div>
     <h1>{new Date().toLocaleTimeString()}.</h1>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}
 
setInterval(tick, 1000);

@oxy2388 · 18.01.2022, 02:47 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Date extends React.Component{
    constructor(){
      super();
      this.state={
        date:'16.01.2022',
         
      }
      this.handleDate=this.handleDate.bind(this);
    }
    
    handleDate(e){
      const newDate=e.target.value;
      console.log(newDate);
      this.setState({
        date:newDate,
        
      });
    }
    
    render(){
      
      return(
        <div>
          <input type="date" value={this.state.date} onChange={this.handleDate} /><br/>
          <p>date is : {this.state.date}</p>
  
           
          </div>
      )
    }
  }
  
  ReactDOM.render(
    <Date/>,
    document.getElementById('app')
  );

@bodynar · 18.01.2022, 13:19

oxy2388, Ваш код не соответствует постановке

Сообщение от oxy2388

который отрисовывает обычный

HTML5
1
<input type="text" />

В вашем случае используется type="date"

Сообщение от oxy2388

Компонент должен получать свойство value в виде даты с разделителем - точкой. Если дата корректна, input нужно выделить зеленоё рамкой, иначе - другого цвета

Вам просто нужен компонент, который будет принимать дату, проводить валидацию и в результате выводить в текстовое поле с тем или иным классом
Если примитивно, то так

JavaScript
1
2
3
4
5
const Date = (date) => {
    const isDateValid = checkIsDateValid(date);
 
    return <input type="text" className={isDateValid ? "valid" : "invalid"} />;
};

@oxy2388 · 18.01.2022, 15:22 **[ТС]**

Точно...Спасибо вам огромное!

@Splaisto · 21.01.2022, 16:04

Студент начальных курсов решил разложить курсач на кучу вопросов форума.

Сообщение от oxy2388

И как сделать разделение точкой...тоже тот еще вопросец

Для того что б этот "вопросец", закрыть надо ознакомиться с типами данных (string!) и как с ними работать.

прямые ответы давать на вопросы типа "а как создать переменную" немного борщ.

@DrType · 24.01.2022, 22:59

Не по теме:

Splaisto, я вот не уверен, что правильно понимаю, в чём была суть затруднения ТС в первом посте, что имелось в виду — вопросец в том, чтобы проверить корректность даты в таком формате, или в том, как вывести дату в таком формате...
И кстати, не факт, что задача решается методами строк — метод .toLocaleString() объекта Date как раз может отформатировать дату 'с точками'.

@Splaisto · 25.01.2022, 11:36

Сообщение от DrType

метод .toLocaleString() объекта Date как раз может отформатировать дату 'с точками'.

методы - тоже способ работать с разными типами данных. так что актуальность не падает)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@oxy2388 1 / 1 / 0 Регистрация: 02.11.2021 Сообщений: 55
	18.01.2022, 15:22 [ТС]
	Точно...Спасибо вам огромное! 0

@DrType
	24.01.2022, 22:59
	Не по теме: Splaisto, я вот не уверен, что правильно понимаю, в чём была суть затруднения ТС в первом посте, что имелось в виду — вопросец в том, чтобы проверить корректность даты в таком формате, или в том, как вывести дату в таком формате... И кстати, не факт, что задача решается методами строк — метод `.toLocaleString()` объекта `Date` как раз может отформатировать дату 'с точками'. 0

Компонент Date

Решение