html怎么在下拉列表添加日期,javascript – 如何使用HTML / JS实现“人类”日期范围选择下拉列表？ (今天,昨天,上周…)...

所以,我要做的是实现一个数据范围选择,它不会从’和’到’显示两个日期选择器.我想让用户在今天,昨天,上周,上个月等之间做出选择.

我在服务器端的应用程序中有这样的东西但是：1-代码看起来很糟糕; 2-我希望API接收“发件人”和“收件人”日期,我只希望用户看到友好的日期范围选择.

附加信息：我的前端基于AngularJS.

我希望它看起来像这样：

服务器端的实际代码是这个烂摊子：

var today = DateTime.Now.Date;

if (dateRange == (int)DateRange.Custom)

{

var start = DateTime.ParseExact(dateFrom, "dd/MM/yyyy", null);

var end = DateTime.ParseExact(dateTo, "dd/MM/yyyy", null).AddDays(1);

query = query.Where(ss => ss.DateRecevied >= start && ss.DateRecevied < end);

return query;

}

if (dateRange == (int)DateRange.Today)

{

query = query.Where(ss => ss.DateRecevied >= today);

return query;

}

if (dateRange == (int)DateRange.Yesterday)

{

var dateShift = today.AddDays(-1);

query = query.Where(ss => ss.DateRecevied >= dateShift && ss.DateRecevied < today);

return query;

}

if (dateRange == (int)DateRange.ThisWeekFromSunToday)

{

var dt = DateTime.Now.StartOfWeek(DayOfWeek.Sunday);

query = query.Where(ss => ss.DateRecevied >= dt);

return query;

}

if (dateRange == (int)DateRange.ThisWeekFromMonToday)

{

var dt = DateTime.Now.StartOfWeek(DayOfWeek.Monday);

query = query.Where(ss => ss.DateRecevied >= dt);

return query;

}

if (dateRange == (int)DateRange.Last7Days)

{

var dateShift = today.AddDays(-7);

query = query.Where(ss => ss.DateRecevied >= dateShift);

return query;

}

if (dateRange == (int)DateRange.Last14days)

{

var dateShift = today.AddDays(-14);

query = query.Where(ss => ss.DateRecevied >= dateShift);

return query;

}

if (dateRange == (int)DateRange.ThisMonth)

{

var dateShift = new DateTime(today.Year, today.Month, 1);

query = query.Where(ss => ss.DateRecevied >= dateShift);

return query;

}

if (dateRange == (int)DateRange.Last30days)

{

var dateShift = today.AddDays(-30);

query = query.Where(ss => ss.DateRecevied >= dateShift);

return query;

}

if (dateRange == (int)DateRange.LastMonth)

{

var dateShift = new DateTime(today.Year, today.Month, 1);

var dateShift2 = dateShift.AddMonths(-1);

query = query.Where(ss => ss.DateRecevied >= dateShift2 && ss.DateRecevied < dateShift);

return query;

}

if (dateRange == (int)DateRange.AllTime)

{

query = query.AsQueryable();

return query;

}

if (dateRange == (int)DateRange.Last90Days)

{

var dateShift = today.AddDays(-90);

query = query.Where(ss => ss.DateRecevied >= dateShift);

return query;

}

if (dateRange == (int)DateRange.LastWeekFromMonSun)

{

var dateLastWeekMonday = DateTimeExtensions.GetDateForLastWeekMonday(today);

var dateLastWeekSun = DateTimeExtensions.GetDateForLastWeekSun(today).AddDays(1);

query = query

.Where(ss =>

ss.DateRecevied >= dateLastWeekMonday

&&

ss.DateRecevied < dateLastWeekSun);

return query;

}

if (dateRange == (int)DateRange.LastWorkingWeekFromMonFri)

{

var dateLastWeekMonday = DateTimeExtensions.GetDateForLastWeekMonday(today);

var dateLastWeekFri = DateTimeExtensions.GetDateForLastWeekFri(today).AddDays(1);

query = query

.Where(ss =>

ss.DateRecevied >= dateLastWeekMonday

&&

ss.DateRecevied < dateLastWeekFri);

return query;

}

return query;

解决方法:

我最终使用MomentJS库(http://momentjs.com)并在我的AngularJS应用程序上创建了一个新模块.

代码(如果链接无法打开)：

var options = [{ name: "Custom", id: 1 }, { name: "Today", id: 2 }, { name: "Yesterday", id: 3 }, { name: "This Week (Sun - Today)", id: 4 }, { name: "This Week (Mon - Today)", id: 5 }, { name: "Last 7 Days", id: 6 }, { name: "Last Week (Mon - Sunday)", id: 7 }, { name: "Last Business Week (Mon - Fri)", id: 8 }, { name: "Last 14 days", id: 9 }, { name: "This Month", id: 10 }, { name: "Last 30 Days", id: 11 }, { name: "Last Month", id: 12 }, { name: "Last 90 Days", id: 13 }];

var selectedOption = 2;

function setSelectedOption (optionId) {

selectedOption = optionId;

};

function getOptions() {

return options;

};

function getFromDate() {

//Today

if (selectedOption == 2) {

return new Date();

}

//Yesterday

if (selectedOption == 3) {

return moment().subtract(1, 'd').toDate();

}

//This Week (Sun - Today)

if (selectedOption == 4) {

return moment().day("Sunday").toDate();

}

//This Week (Mon - Today)

if (selectedOption == 5) {

return moment().day("Monday").toDate();

}

//Last 7 Days

if (selectedOption == 6) {

return moment().subtract(7, 'd').toDate();

}

//Last Week (Mon - Sunday)

if (selectedOption == 7) {

return moment().day('Monday').subtract(1, 'w').toDate();

}

//Last Business Week (Mon - Fri)

if (selectedOption == 8) {

return moment().day('Monday').subtract(1,'w').toDate();

}

//Last 14 days

if (selectedOption == 9) {

return moment().subtract(14, 'd').toDate();

}

//This Month

if (selectedOption == 10) {

return moment().startOf('month').toDate();

}

//Last 30 Days

if (selectedOption == 11) {

return moment().subtract(30, 'd').toDate();

}

//Last Month

if (selectedOption == 12) {

return moment().startOf('month').subtract(1,'M').toDate()

}

//Last 90 Days

if (selectedOption == 13) {

return moment().subtract(90, 'd').toDate();

}

}

function getToDate() {

//Today

if (selectedOption == 2) {

return new Date();

}

//Yesterday

if (selectedOption == 3) {

return moment().subtract(1, 'd').toDate();

}

//This Week (Sun - Today)

if (selectedOption == 4) {

return new Date();

}

//This Week (Mon - Today)

if (selectedOption == 5) {

return new Date();

}

//Last 7 Days

if (selectedOption == 6) {

return new Date();

}

//Last Week (Mon - Sunday)

if (selectedOption == 7) {

return moment().day(0).toDate();

}

//Last Business Week (Mon - Fri)

if (selectedOption == 8) {

return moment().day(-2).toDate();

}

//Last 14 days

if (selectedOption == 9) {

return new Date();

}

//This Month

if (selectedOption == 10) {

return moment().endOf('month').toDate();

}

//Last 30 Days

if (selectedOption == 11) {

return new Date();

}

//Last Month

if (selectedOption == 12) {

return moment().subtract(1, 'M').endOf('month').toDate();

}

//Last 90 Days

if (selectedOption == 13) {

return new Date();

}

}

标签：jquery,javascript,angularjs,html5,html

来源： https://codeday.me/bug/20190519/1136736.html