Show future date using javascript in dropdown. (dynamically each time)

Question

I have the jsfiddle http://jsfiddle.net/92yv2h9n/

As you can see, the first option of dropdown shows the current date. The next two options should show the future dates.

for e.g- today is 11th dec. so future date of 12th dec and 13th dec should be shown. currently it shows the present date only. Its in mm-dd-yyyy format.

Can someone please highlight how can i achieve the future dates.

PS- It should automatically note that feb has 28 days and dec will have 31 days and so on.

Here is the code.

JS code

function Ctrl($scope) {
$scope.date = new Date();
}

HTML code

<div ng-app ng-controller="Ctrl">
<select>
<option>{{date | date:'MM-dd-yyyy'}}</option>
<option>{{date | date:'MM-dd-yyyy'}}</option>
<option>{{date | date:'MM-dd-yyyy'}}</option>
</select>
</div>

bstockwell · Accepted Answer · 2015-12-11 06:45:23Z

2

Convert the date to millis and add a day of milliseconds onto it (or 2 days for the second one):

<div ng-app ng-controller="Ctrl">
  <select>
    <option>{{date.getTime() | date:'MM-dd-yyyy'}}</option>
    <option>{{(date.getTime() + (1000 * 60 * 60 * 24)) | date:'MM-dd-yyyy'}}</option>
    <option>{{(date.getTime() + (1000 * 60 * 60 * 48)) | date:'MM-dd-yyyy'}}</option>
  </select>
</div>

even shorter version using ng-repeat:

<div ng-app ng-controller="Ctrl">
  <select>
    <option ng-repeat="date in [0,1,2]">{{date.getTime() + (1000 * 60 * 60 * 24 * day)| date:'MM-dd-yyyy'}}</option>
  </select>
</div>

Avoid weekends:

<div ng-app ng-controller="Ctrl">
  <select>
    <option ng-repeat="day in dates">{{date | date:'MM-dd-yyyy'}}</option>
  </select>
</div>

Controller:

function Ctrl($scope) {
    $scope.baseAdd = 0;
  $scope.dates = [0,1,2].map(function(day) {
    dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd)));
        while(dateobj.getDay() == 6 || dateobj.getDay() == 0) {
      dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd++)));
    }
    console.log(dateobj)
    return dateobj;
});
}

edited Dec 11, 2015 at 6:45

answered Dec 11, 2015 at 0:22

bstockwell

5144 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jeremy J Starcher Over a year ago

I would double-check that works over daylight savings time.

bstockwell Over a year ago

DST would be reliant on the result of the construction of the Date() in the user's local time object. This function is always going to return + 24 hours of milliseconds. So I suppose there is an hour of time each year in each timezone that observes dst where this would return the Today | Today + 2 | Today + 3. I can imagine how one would go about solving that issue, but it's a rather complex solution.

bstockwell Over a year ago

This logic might possible in the dom, but it would be easier to manage in the controller. If you're looking for that, I would suggest making 3 date objects in your controller, adding the day to each one and then checking that dateObj.getDay() > 4

bstockwell Over a year ago

very sorry, the ng-repeat was incorrect--working now: jsfiddle.net/92yv2h9n/1

bstockwell Over a year ago

I'm guessing you're using "use strict" -- this slightly complicates things since you need to make sure variables are set with var (or let), which changes the scope & availability--I updated the fiddle to make my solution work with strict on, but you'll likely have to do something specific to your case. jsfiddle.net/t3vBE/4

|

Collectives™ on Stack Overflow

Show future date using javascript in dropdown. (dynamically each time)

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related