将天数添加到Jquery中的日期值

问题描述 投票:1回答:6

我有一个简单的下拉菜单,显示日期。是否有一种方法可以使用jQuery获取日期,例如Sunday February 2, 2020而不是仅显示在下拉列表中?

var options = document.getElementsByTagName('.date option');
for (i = 0; i < options.length; ++i) {
  options[i].innerHTML = options[i].getDay()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>

  </select>


</div>
javascript jquery
6个回答
1
投票

您可以尝试:new Date('2020-02-02').getDay()

getDay将返回一个介于0到6之间的数字,根据当地时间,该数字将是一周的第一天

我在2020-02-02中使用的new Date()被假定为可用,因为您将其设置为值。然后,您可以在数字和要显示的日期字符串之间建立一个映射]


1
投票

我认为您正在寻找toDateString()函数example

var d = new Date();
var n = d.toDateString();
console.log(n)

输出

Thu Jan 09 2020

0
投票

您可以简单地将日期字符串转换为日期对象,如下所示:

var dateForSelectValue = new Date('2020-01-07');

或者如果您已经有一个日期对象,则可以像下面一样附加它

returnDayString(dateForSelectValue.getDay()) + '' + dateForSelectValue.getDate() + ',' + dateForSelectValue.getFullYear();

上述方法dateForSelectValue.getDay()返回0到6之间的整数,其中1是星期一,依此类推。因此,您可以简单地编写一个JavaScript函数returnDayString,该函数的return来自Day Integer的日期名称。

希望有所帮助


0
投票

您可以使用Moment.js处理日期,然后使用moment(<date>).format('dddd MMMM D, YYYY');获得所需的格式

var options = document.getElementsByTagName('option');

for (i = 0; i < options.length; ++i)
  options[i].innerHTML = moment(options[i].value).format('dddd MMMM D, YYYY');
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<select name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>

0
投票

纯js版本-您可以遍历所有选项,并使用以下选项从选项值中获取短日期:>

var dateValueFromOption = new Date(optionValue);
var stringDateFromOption = dateValueFromOption.toDateString();

然后使用新的日期格式stringDateFromOption更改选项文本

var dropDownElement = document.getElementById("tour-date")
const dropDownOptions = dropDownElement.options;

for (i = 0; i < dropDownOptions.length; i++) {

  //optional, maybe you will need the ids at something else
  let dropDownOptionId = dropDownElement.options[i].id;
  dropDownOptionId = "option_" + i;

  const optionValue = dropDownOptions[i].value;

  var dateValueFromOption = new Date(optionValue);
  var stringDateFromOption = dateValueFromOption.toDateString();

  dropDownOptions[i].text = stringDateFromOption
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="tour-date" name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>

0
投票

为了进行这项工作,您可以使用Date对象的getDay()getMonth()函数来获取可以转换成其文本值的日期的索引。然后,您可以向text()提供一个函数,该函数可以计算给定option元素的完整日期并返回新值。试试这个:

© www.soinside.com 2019 - 2024. All rights reserved.