Угловой - тип ввода HTML5 "datetime-local" не работает с объектом Date

Я пробовал разными способами. Сначала я получаю дату как объект Moment.js,

 this.meeting.start = event.date.local().toDate();

Я также пробовал следующее:

this.meeting.start = new Date(this.meeting.start.toLocaleString());

мой HTML:

<input 
  type = "datetime-local" 
  class = "form-control" 
  value = "{{meeting.start}}" 
  [(ngModel)] = "meeting.start" />

но окно пользовательского интерфейса пусто: "-: - дд / мм / гг"

Спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
5 016
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Попробуй это

const fmt = 'HH:mm DD/MM/YY';
const result = moment.utc(this.meeting.start, fmt).local().format(fmt);

Шаблон:

<input type = "datetime-local" [value] = "result">

Образец StackBlitz

Дайте мне образец this.meeting.start. Он дает мне Date: "06/09/2018 20:49:23" на сегодняшнюю дату, то есть по моему местному времени. Для вас вам придется сменить fmt на тот, который я обновил в ответе.

SiddAjmera 06.09.2018 17:20

Пример: «Thu Sep 06 2018 10:00:00 GMT + 0300». Я тоже редактировал пост. Формат работает, но <input> по-прежнему ничего не показывает

Aa Yy 06.09.2018 17:23

Его форматирование от «Thu Sep 06 2018 10:00:00 GMT + 0300» до «06/09/2018 10:00:00», но <input> не имеет значения

Aa Yy 06.09.2018 17:24

Я не хочу, чтобы тип ввода был текстом. он должен быть локальным по дате и времени

Aa Yy 06.09.2018 17:25

Вы связали [(ngModel)] и value. Когда вам следует использовать только один из них.

SiddAjmera 06.09.2018 17:25

Ты почти там; просто формат должен быть YYYY-MM-DDTHH:mm (и вам не нужен формат при вызове utc()): angular-u9inhr.stackblitz.io.

Heretic Monkey 06.09.2018 17:37

@AaYy Какой браузер вы используете? Он работает в Chrome версии 68.0.3440.106 (официальная сборка) (64-разрядная версия).

Heretic Monkey 06.09.2018 17:48

О, эта ссылка запуталась и использовала тот же код, что и ответ. Попробуйте угловой-1fsxgs.stackblitz.io. Вы можете редактировать, используя эта ссылка

Heretic Monkey 06.09.2018 17:51

Это работает для меня:

let today = new Date();
this.meeting.start = today.toISOString().split('T')[0]

в html

<input 
  type = "date" 
  class = "form-control" 
  value = "{{meeting.start}}" 
  [(ngModel)] = "meeting.start" />

см. пример в https://angular-rb5vmu.stackblitz.io (последний элемент: Формат даты ввода)

Отредактировано!

работал, потому что я использовал type = "date", это работает с type = "datetime-local" this.meeting.start = today.toISOString (). split ('.') [0];

wFitz 06.09.2018 17:48

Хорошо, это отображается в окне пользовательского интерфейса, но неправильное (вероятно, UTC) время

Aa Yy 06.09.2018 17:53
Ответ принят как подходящий

Основываясь на помощи, которую я получил здесь, мне удалось заставить это работать с этим обходным путем:

var add = moment(this.meeting.start).add(3, 'hours');
var result = add.toISOString().split('.')[0];
this.meeting.start = result;

Это сработало для меня, я попробовал все ответы выше, но ни один из них не сработал.

// Init dates
let today = moment.utc().local().format('YYYY-MM-DDTHH:mm');
let todayMinus7Days = moment.utc().local().subtract(7, 'days').format('YYYY-MM-DDTHH:mm');

console.info(today);
console.info(todayMinus7Days);

И результат из консоли браузера:

И в результате сам браузер:

Другие вопросы по теме