Geek asks and answers

Combining date and time input lines as a Date object

I have two input tags for selecting date and time from the user.

<p>Start Date</p><p> <input ng-model="sdate" type="date" ></p>
<p>Start Time</p><p> <input ng-model="stime" type="time" ></p>

These two values ​​are passed to the function where I want to combine these two input values ​​as an object Date:

 new Date(y, m, d, hh, mm, a)

Then I can use to create event details in the calendar. How can I combine these two values? I tried:

start:new Date(sdate + stime)


start:new Date(sdate , stime)


start: new Date(sdate.getFullYear() + sdate.getMonth() + sdate.getDate() + stime.getHours + stime.getMinutes())

But none of what I tried works.

How to achieve this when using AngularJS?

+3
source share
4 answers

In angular, it will look something like this:

Controller:

function exampleController($scope) {
    $scope.title = "$Watch sample";   

    $scope.$watch('sdate', function() {
       tryCombineDateTime(); 
    });

    $scope.$watch('stime', function() {
       tryCombineDateTime();
    });

    function tryCombineDateTime() {
        if($scope.sdate && $scope.stime) {
            var dateParts = $scope.sdate.split('-');
            var timeParts = $scope.stime.split(':');

            if(dateParts && timeParts) {
                dateParts[1] -= 1;
                $scope.fullDate = new Date(Date.UTC.apply(undefined,dateParts.concat(timeParts))).toISOString();
            }
        }
    }
}

HTML

<div ng-app ng-controller="exampleController">
    <h2>{{title}}</h2>
    <p>Start Date</p><p> <input ng-model="sdate" type="date" ></p>
    <p>Start Time</p><p> <input ng-model="stime" type="time" ></p>

    {{fullDate}}
</div>

You need to use the $ watch listener for the variable when it changes, and then call your function.

: , .

Fidle

+6

. Date .

:

<p>Start Date</p><p> <input ng-model="sdate" type="date" ></p>
<p>Start Time</p><p> <input ng-model="stime" type="time" ></p>

script :

        var dd = new Date(sdate).getDate();
        var mm = new Date(sdate).getMonth()+1;
        var yy = new Date(sdate).getFullYear();
        var hh = new Date(stime).getHours();
        var ms = new Date(stime).getMinutes();

( ):

var x = yy + ',' + mm + ',' + dd + ' ' + hh + ':' + ms;

Date:

var finaldate = new Date(x);
+2

- , AngularJS, . , / UTC, Date, ISO8601 . , , HTML5 ECMA5, .

HTML

<p>Start Date</p><p> <input id="myDate" ng-model="sdate" type="date" ></p>
<p>Start Time</p><p> <input id="myTime" ng-model="stime" type="time" ></p>
<div id="myIso"></div>

Javasceipt

var myIso = document.getElementById('myIso'),
    dateParts,
    timeParts;

function joinPartsAsDate() {
    if (dateParts && dateParts.length === 3 && timeParts && timeParts.length === 2) {
        // dateParts[1] -= 1; could be done here
        myIso.textContent = new Date(Date.UTC.apply(undefined, dateParts.concat(timeParts))).toISOString();
    } else {
        myIso.textContent = '';
    }
}

document.getElementById('myDate').addEventListener('change', function (e) {
    dateParts = e.target.value.split('-');
    if (dateParts[1]) { // this could be done in joinPartsAsDate, here for clarity
        dateParts[1] -= 1;
    }

    joinPartsAsDate();
}, false);

document.getElementById('myTime').addEventListener('change', function (e) {
    timeParts = e.target.value.split(':');
    joinPartsAsDate();
}, false);

On jsFiddle

+1
source

After testing all the material described here, I found a very simple solution. In my opinion, I have

<input type="date" ng-model="tsc.untilDate">
<input type="time" ng-model="tsc.untilTime">

In my Angular controller, both model elements are Date objects by default. With input type = "date", the time of this Date object is always 00:00. With input type = "time", the date-date of the Date object is always set to date. So I just read the daytime (if installed) TimeDate and set it to DateObject.

if(tsc.untilTime)
{
  tsc.untilDate.setHours(tsc.untilTime.getHours());
  tsc.untilDate.setMinutes(tsc.untilTime.getMinutes());
}
0
source

More articles:


All Articles