How to create datetime from date and time in AngularJs?

Question

I am working on a project with AngularJs. Here I have 3 html controls.

datepicker (html5's date) => $scope.date
timepicker (html5's time) => $scope.from
timepicker (html5's time) => $scope.to

below is html code.

<form>
  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Set date</label>
    <div class="col-sm-5">
      <!-- <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> -->
      <datepicker date-format="yyyy-MM-dd" selector="form-control">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date" ng-model="date" id="date" />
          <spam class="input-group-addon" style="cursor: pointer">
            <i class="fa fa-lg fa-calendar"></i>
          </spam>
        </div>
      </datepicker>
    </div>
  </div>
  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Set time</label>
    <div class="col-sm-4">
      <input type="time" class="form-control" placeholder="From" ng-model="from" id="from">
    </div>
    <label for="" class="col-sm-1 col-form-label">To</label>
    <div class="col-sm-4">
      <input type="time" class="form-control" placeholder="To" ng-model="to" id="to">
    </div>
  </div>
</form>

now for service call i need to pass datetime, but here I'm having date and time separately.

How can I construct datetime from and datetime to from above available data?

You need to share the HTML and JS, or a working snippet with the problem for debugging the issue! — Naren Murali
– Naren Murali, Commented Sep 16, 2017 at 10:20
@NarenMurali I have provided HTML. well right now there's no useful JS hence I haven't included it. **Problem is how to construct complete date time from from date and time? for example. datetimeFrom and datetimeTo from data selected by a user. — sachin
– sachin, Commented Sep 16, 2017 at 10:37

Matthew Cawley · Accepted Answer · 2017-09-16 12:47:25Z

2

You can combine the dates in a function in your controller. First format the dates/times using the Date.prototype.toISOString() method, then use the String.prototype.substring() method to take the datePart and the timePart separately, finally combine the two to create a new Date instance.

$scope.fromDate = getCombinedDateTime($scope.date, $scope.from);
$scope.toDate = getCombinedDateTime($scope.date, $scope.to);

function getCombinedDateTime(date, time){
  var datePart = date.toISOString().substring(0, 10);
  var timePart = time.toISOString().substring(10, 24);
  return new Date(datePart + timePart);
}

answered Sep 16, 2017 at 12:47

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to create datetime from date and time in AngularJs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related