我有一个简单的下拉菜单,显示日期。是否有一种方法可以使用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>
您可以尝试:new Date('2020-02-02').getDay()
getDay
将返回一个介于0到6之间的数字,根据当地时间,该数字将是一周的第一天
我在2020-02-02
中使用的new Date()
被假定为可用,因为您将其设置为值。然后,您可以在数字和要显示的日期字符串之间建立一个映射]
我认为您正在寻找toDateString()
函数example
var d = new Date();
var n = d.toDateString();
console.log(n)
输出
Thu Jan 09 2020
您可以简单地将日期字符串转换为日期对象,如下所示:
var dateForSelectValue = new Date('2020-01-07');
或者如果您已经有一个日期对象,则可以像下面一样附加它
returnDayString(dateForSelectValue.getDay()) + '' + dateForSelectValue.getDate() + ',' + dateForSelectValue.getFullYear();
上述方法dateForSelectValue.getDay()
返回0到6之间的整数,其中1是星期一,依此类推。因此,您可以简单地编写一个JavaScript函数returnDayString
,该函数的return
来自Day Integer的日期名称。
希望有所帮助
您可以使用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>
纯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>
为了进行这项工作,您可以使用Date对象的getDay()
和getMonth()
函数来获取可以转换成其文本值的日期的索引。然后,您可以向text()
提供一个函数,该函数可以计算给定option
元素的完整日期并返回新值。试试这个: