Изменение вида даты

240

28 марта 2017, 13:29

Всем привет. Возможно вопрос очень простой, но сам никак осилить не могу. Есть стандартный вид даты 2017-04-24. Нужно его разделить и обернуть все в тег с классом. Сделать хочу что-то такое:

То есть, после разделения года, месяца и даты, нужно месяц заменить на текст. Под это дело прикрутил массив с месяцами, а вот как сделать замену никак не пойму. Просьба так же посмотреть на саму реализацию кода, можно ли сократить? Есть ли ошибки? JQ подключен.

var date = $(".date").html(); 
var monthName = new Array ("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"); 
var newdate=""; 
date=date.split('-'); 
for(i=0;i<date.length;i++ ){ 
newdate= '<span class="year">' +date[0]+ '</span> <span class="month">' +date[1]+ '</span> <span class="day">' +date[2]+ '</span>'; 
} 
$(".date").html(newdate);

.year { 
color: red; 
} 
.month { 
color: blue; 
} 
.day { 
color: green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="date">2017-03-13</div> 
<div class="date">2014-12-13</div>

Можно ли дополнить этот скрипт, чтоб он изменял вид даты для нескольких элементов с датой на странице? Или потребуется полностью изменить функцию? Это в общем-то не особо и нужно, на всякий случай)

Благодарен за помощь!

Answer 1

Для наглядности форматирование можно вынести в отдельную функцию - formatDate.

А так - у вас все правильно, только вместо самого номера месяца подставляете значение из массива месяцев (не забывая, что индексация начинается с 0):

$(".date").each(function() { 
  $(this).html( formatDate($(this).html()) ); 
}); 
 
 
function formatDate(date) { 
  var monthName = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; 
  var newdate=""; 
  date = date.split('-'); 
  for(i=0;i<date.length;i++ ){ 
    newdate= '<span class="year">' +date[0]+ '</span> <span class="month">' +monthName[date[1]-1]+ '</span> <span class="day">' +date[2]+ '</span>'; 
  } 
 return newdate; 
}

.year { 
color: red; 
} 
.month { 
color: blue; 
} 
.day { 
color: green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="date">2017-03-13</div> 
<div class="date">2014-12-13</div>

Answer 2

Все просто:

monthName[date[1]-1]

-1 тк индекс массива начинается с 0

var date = $(".date").html(); 
var monthName = new Array ("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"); 
var newdate=""; 
date=date.split('-'); 
for(i=0;i<date.length;i++ ){ 
newdate= '<span class="year">' +date[0]+ '</span> <span class="month">' +monthName[date[1]-1]+ '</span> <span class="day">' +date[2]+ '</span>'; 
} 
$(".date").html(newdate);

.year { 
color: red; 
} 
.month { 
color: blue; 
} 
.day { 
color: green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="date">2017-03-13</div> 
<div class="date">2014-12-13</div>