How to find and replace date and time in textarea and convert to persian calender in javascript?

Question

Here's What I've in textarea:

<textarea>
<currentdate>2021-04-24 14:27:41.267617</currentdate>
<currentdate>2021-03-25 16:23:23.125432</currentdate>
<currentdate>2021-05-27 12:32:35.114312</currentdate>
<currentdate>2021-07-28 03:11:34.332411</currentdate>
</textarea>

and what i know about converting Gregorian calendar to Persian calendar is: How to change Gregorian date to Persian date in JavaScript?

and also i know for converting current time which is gregorian to persian i can use:

    let today = new Date().toLocaleDateString('fa-IR');
    console.log(today);

My question is: How can i create clickable button for clicking to find and convert those Gregorian dates and times to Persian date and Iran local time(fa-IR) in the textarea?

With this Format: yyyy/mm/dd hh:mm:ss

just number format, not name of month or ...

I'm sure it's not complicated , but I've searched everywhere and found nothing to solve my problem

thank you in advance:)

mplungjan · Answer 1 · 2021-04-25T16:24:40.470

1

Something like this?

const ta = document.getElementById('ta')

document.getElementById('convert').addEventListener('click', function() {
  const curDates = document.querySelector('textarea').value
  const domFragment = document.createElement('div')
  domFragment.innerHTML = curDates;
  ta.value = [...domFragment.querySelectorAll('currentdate')]
    .map(cd => `<currentdate>${new Date(cd.textContent).toLocaleDateString('fa-IR')}</currentdate>`).join("\n");
})

textarea {
  width: 500px;
  height: 200px;
}

<textarea id="ta">
<currentdate>2021-04-24 14:27:41.267617</currentdate>
<currentdate>2021-03-25 16:23:23.125432</currentdate>
<currentdate>2021-05-27 12:32:35.114312</currentdate>
<currentdate>2021-07-28 03:11:34.332411</currentdate>
</textarea>
<button type="button" id="convert">تبدیل</button>

edited Apr 25 '21 at 16:24

answered Apr 25 '21 at 15:39

mplungjan

169,008
28
173
236

1

Yeah, Exactly but not in a separate textarea, on itself, the second answer by @filoscoder is what I'm looking for:) thanks. – Mahdi Apr 25 '21 at 16:23
@Mahdi Not clear from your question. It is VERY trivial to change to output to same textarea. See update – mplungjan Apr 25 '21 at 16:25
You're right, Thanks man, Next time I'll make my question more clear – Mahdi Apr 25 '21 at 17:10
So I was the first to answer – mplungjan Apr 25 '21 at 19:58
your suggestion is just fine, and you're the first:) but if you compare both of answers you will notice that there is sth wrong with your js code and it's about when I'm trying to click again on "تبدیل" button , it turns to "invalid date" so i still like to use 2end answer;) – Mahdi Apr 25 '21 at 20:13
Where do you say anything about wanting to click twice? The reason my code gives an issue, is because there is no valid dates the second time. I did not bother testing that, since I had two textareas before. Anyway, you got working code – mplungjan Apr 25 '21 at 20:18

score 1 · Accepted Answer · edited Apr 26 '21 at 08:21

Try this code:

function convertToPersianDate() {
  const textArea = document.getElementById("textarea");
  const dateRegExp = /\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) ([0-5]\d):([0-5]\d):([0-5]\d).\d{6}/gm;

  return (textArea.value = textArea.value.replace(dateRegExp, function(date) {
    return new Date(date).toLocaleDateString('fa-IR')
  }));
}

<textarea id="textarea">
<currentdate>2021-04-24 14:27:41.267617</currentdate>
<currentdate>2021-03-25 16:23:23.125432</currentdate>
<currentdate>2021-05-27 12:32:35.114312</currentdate>
<currentdate>2021-07-28 03:11:34.332411</currentdate>
</textarea>

<div>
  <button onclick="convertToPersianDate()">Convert</button>
</div>

I would move `const textArea = document.getElementById("textarea"); const dateRegExp = /\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) ([0-5]\d):([0-5]\d):([0-5]\d).\d{6}/gm;` outside the function — mplungjan, Apr 26 '21 at 08:21

How to find and replace date and time in textarea and convert to persian calender in javascript?

2 Answers2