使用数据属性在JavaScript转换日期

Question

我有一个JavaScript函数转换阳历日期贾拉利日期：

year=2019;
month=2;
day=6;

shamsi=gregorian_to_jalali(year,month,day);

document.write(shamsi[0]+ '/' +shamsi[1]+ '/' +shamsi[2]);

这个结果告诉我：1397年12月4日

出于某种原因，我想使用多个标签，如数据属性：

<date year="2019" month="2" day="6"></date>

每一个必须返回内

主要功能是：

function gregorian_to_jalali(gy,gm,gd){
 g_d_m=[0,31,59,90,120,151,181,212,243,273,304,334];
 if(gy > 1600){
  jy=979;
  gy-=1600;
 }else{
  jy=0;
  gy-=621;
 }
 gy2=(gm > 2)?(gy+1):gy;
 days=(365*gy) +(parseInt((gy2+3)/4)) -(parseInt((gy2+99)/100)) +(parseInt((gy2+399)/400)) -80 +gd +g_d_m[gm-1];
 jy+=33*(parseInt(days/12053)); 
 days%=12053;
 jy+=4*(parseInt(days/1461));
 days%=1461;
 if(days > 365){
  jy+=parseInt((days-1)/365);
  days=(days-1)%365;
 }
 jm=(days < 186)?1+parseInt(days/31):7+parseInt((days-186)/30);
 jd=1+((days < 186)?(days%31):((days-186)%30));
 return [jy,jm,jd];
}

Answer 1

您可以使用数据 - *属性来存储这些值。

<div id="date" data-year="2019" data-month="2" data-day="6"></div>

稍后，您可以使用HTMLElement.dataset属性读取JavaScript的这些值。

const dateElement = document.getElementById('date')

const year = dateElement.dataset.year // "2019"
const month = dateElement.dataset.month // "2"
const day = dateElement.dataset.day // "6"

另外，如果你要打印的转换日期相同的元素，只是Node.textContent设置。

dateElement.textContent = gregorian_to_jalali(year, month, day).join('/')

Answer 2

你可以把它们放在一个JSON格式的单一属性，那么你就可以解析JSON得到的值：

// Stub for dev
function gregorian_to_jalali(gy, gm, gd){
  console.log(`From gregorian_to_jalali: ${gy}, ${gm}, ${gd}`);
}

// Get value from element and parse
function getValue(element) {
  let {year, month, day} = JSON.parse(element.dataset.value);
  return [year, month, day];
}

// Get values
console.log(getValue(document.querySelector('date')));

// Use in a function
gregorian_to_jalali(...getValue(document.querySelector('date')));

<date data-value='{"year":"2019","month":"2","day":"6"}'></date>

Answer 3

这工作就像一个魅力！

const year = Number(dateElement.dataset.year) // "2019"
const month = Number(dateElement.dataset.month) // "2"
const day = Number(dateElement.dataset.day) // "6"

我想使用它的多个标签，如：

<div id="date" class="date" data-year="2019" data-month="3" data-day="6"></div>
<div id="date" class="date" data-year="2019" data-month="4" data-day="7"></div>
<div id="date" class="date" data-year="2019" data-month="5" data-day="8"></div>
<div id="date" class="date" data-year="2019" data-month="6" data-day="9"></div>
<div id="date" class="date" data-year="2019" data-month="7" data-day="10"></div>

我知道document.getElementById()一次仅支持一个名称和仅返回单个节点不是节点的数组。而且它不工作getElementsByClassName或标签名