Форматирование даты по маске

212

03 июля 2018, 01:10

Символы маски:

yy – год в 2 цифры
yyyy – год в 4 цифры
M – месяц в числовом виде без лидирующего нуля
MM – месяц в числовом виде в 2 цифры
MMM – месяц в виде аббревиатуры
MMMM – месяц в виде полного имени
d – число без лидирующего нуля
dd – число в 2 цифры
H – часы в 24-часовом формате без лидирующего нуля
HH – часы в 24-часовом формате в 2 цифры
h – часы в 12-часовом формате без лидирующего нуля
hh – часы в 12-часовом формате в 2 цифры
m – минуты без лидирующего нуля
mm – минуты в 2 цифры
s – секунды без лидирующего нуля
ss – секунды в 2 цифры

Проблема с месяцами при замене MMMM,также заменяется например буква 'h' в 'March'- решена Теперь проблема с заменой M и MM, заменяет без пробела. Между ними.Накосячил с заменой M наверное.

function DateParse() 
{ 
  var year = document.getElementById('year').value; 
  var month = document.getElementById('day').value; 
  var day = document.getElementById('month').value; 
  var hour = document.getElementById('hour').value; 
  var minute = document.getElementById('min').value; 
  var second = document.getElementById('sec').value; 
  var mask = document.getElementById('mask').value; 
   
 
  const monthNames = ["January", "February", "March", "April", "May", "June", 
  "July", "August", "September", "October", "November", "December"]; 
 
  const monthNamesShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",  
  "Aug", "Sep", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
 
 
  var masks = 
  { 
    yyyy : year, 
    yy : year.substring(year.length/2,year.length), 
    MMMM : monthNames[new Date(year,month,day).getMonth()] , 
    MMM : monthNamesShort[new Date(year,month,day).getMonth()], 
    MM : month, 
    M : month[1], 
    dd : day, 
    d : day[1], 
    HH: new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute  + " PM").getHours(), 
    H : new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute  + " PM").getHours()%10, 
    hh :new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute  + " AM").getHours() , 
    h : new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute  + " AM").getHours()%10 , 
    mm : minute, 
    m : minute[1], 
    ss : second, 
    s : second[1] 
  } 
 
  var res = mask; 
 
  res = res.replace(/yyyy/g,masks.yyyy); 
  res = res.replace(/yy/g,masks.yy); 
  res = res.replace(/dd/g,masks.dd); 
  res = res.replace(/d/g,masks.d); 
  res = res.replace(/HH/g,masks.HH); 
  res = res.replace(/H/g,masks.H); 
  res = res.replace(/hh/g,masks.hh); 
  res = res.replace(/h/g,masks.h); 
  res = res.replace(/mm/g,masks.mm); 
  res = res.replace(/m/g,masks.m); 
  res = res.replace(/ss/g,masks.ss); 
  res = res.replace(/s/g,masks.s); 
  res = res.replace(/MMMM/g, masks.MMMM); 
  res = res.replace(/MMM/g, masks.MMM); 
  res = res.replace(/MM/g,masks.MM); 
  res = res.replace(/M[\s\W]/g, masks.M); 
   
  alert(res); 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>JS Basics</title> 
    <script src="main.js"></script> 
</head> 
<body> 
    <h1>JS Basics</h1> 
    <p>Count Numbers</p> 
    <form action="javascript:DateParse()"> 
    <input type="text" value="2015"  pattern="^[1-9][0-9]{3}$" maxlength="4" id = "year" placeholder="Year"> 
    <input type="text" value="02" pattern="[0-9]{2,}" maxlength="2" id="day" placeholder="Month"> 
    <input type="text" value="04" pattern="[0-9]{2,}" maxlength="2" id="month" placeholder="Day"> 
    <input type="text" value="05" pattern="[0-9]{2,}" maxlength="2" id="hour" placeholder="Hour"> 
    <input type="text" value="07" pattern="[0-9]{2,}" maxlength="2" id="min" placeholder="Minute"> 
    <input type="text" value="08" pattern="[0-9]{2,}" maxlength="2" id="sec" placeholder="Second"> 
    <input type="text" id ="mask" placeholder="Enter mask"> 
    <input type="submit" id="replace"> 
    </form> 
</body> 
</html>

Answer 1

Чойта велосипедов захотелось (Vue чисто для вывода):

new Vue({ 
  el: '#root', 
  data: { 
    date: new Date(), 
    masks: { 
      m: { 
        title: 'Месяц без ведущего нуля (1-12)', 
        value: d => d.getMonth() + 1 // Этот callback должен возвращать значение маски 
      }, 
      mm: { 
        title: 'Месяц с ведущим нулём (01-12)', 
        value: d => (d.getMonth() + 1 + '').padStart(2, '0') 
      }, 
      y: { 
        title: 'Год, 4 цифры (2000)', 
        value: d => d.getFullYear() 
      } 
    }, 
    input: 'This \\month: m, another \\month: mm, this \\year: y', 
    result: '' 
  }, 
  computed: { 
    regexp: function () { 
      return new RegExp(`(\\\\?)(${Object.keys(this.masks).sort((a, b) => b.length - a.length).join('|')})`, 'g'); // Важно отсортировать от длинной к короткой строке маски, тогда вхождения будут корректно находится 
    } 
  }, 
  methods: { 
    showMe: function () { 
      let input = this.input.trim(); 
       
      if(!input) return; 
       
      this.result = input.replace(this.regexp, (_, s, m) => s ? m : m in this.masks && 'value' in this.masks[m] && typeof this.masks[m].value === 'function' ? this.masks[m].value(this.date) : `{${m}}`); 
    } 
  } 
});

ul { 
  padding: 5px 10px; 
  margin: 0; 
  list-style: none; 
} 
#result { 
  margin: 10px; 
} 
input { 
  width: 100%; 
} 
input:focus { 
  outline: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> 
<div id='root'> 
  Date: <strong>{{ date.toGMTString() }}</strong><br /> 
  Masks: 
  <ul> 
    <li v-for="(mask, key, i) in masks" :key="i"><span style='color: gray;'>{{ key }}</span>: {{ mask.title}}</li> 
  </ul> 
  Enter your mask here: <input type='text' autofocus v-model='input' @keyup.13='showMe' /><br /> 
  <div id='result'>{{ result }}</div> 
</div>

Answer 2

Проблема в том, что ты делаешь замены последовательно, а надо одновременно:

console.log("ABX".replace(/A/g, "B").replace(/B/g, "C")) 
console.log("ABX".replace(/A|B/g, m => ({A: "B", B: "C"}[m])))

Answer 3

Для таких задач можно использовать библиотеку moment.js

К примеру преобразовать текущую дату в формат DD.MM.YYYY HH:mm:ss будет выглядеть так:

moment().format('DD.MM.YYYY HH:mm:ss');

Любую другую дату в любом формате:

moment('2018-06-07 12-10-33', 'YYYY-MM-DD HH-mm-ss').format('DD.MM.YYYY HH:mm:ss');

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Установка прелоадера на сайт на время прогрузки страницы

https://codepenio/colinhorn/pen/zdNMVy вот такой прелоадер нужен на сайт

201

javascript

Как минимизировать следующий JQuery скрипт?

Изучаю JavaScript в частности JQuery, задался вопросом, как можно минимизировать следующий скрипт? - Открывает мобильное меню с анимацией появления...

167

javascript

Разница между двумя введенными датами в днях

148

javascript

Работа с новым окном JS

Задание такое: Написать программу, которая при выборе определенной опции изменяет HTML и CSS страницыНаписать ее у меня получилось, но нужно...

181