How convert string in time format in angularjs controller

i have a dataset like this in my controller

{

"schedule":[{"day":"Monday","start":"15:00:00"},{"day":"Tuesday","start":"16:30:00"}]

}

In my view i would like to use input[time]

<div ng-repeat="day in obj.schedule">

 <input  type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

</div>

It doesn't work because it expects a date, not a string.

How can I convert inside controller my string into time?

I tried with

$scope.start = new Date(obj.start)

but it doesn't work

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

1

You are using ng-model="day.start_time" shouldn't that be ng-model="day.start"

– Ankit Agarwal
Nov 26 '18 at 11:59

well, it's a typo while writing post

– frwebdev
Nov 26 '18 at 12:03

Check your question I have added a working snippet and it works

– Ankit Agarwal
Nov 26 '18 at 12:05

i don't understand.. inside my project give error: Error: ngModel:datefmt Model is not a date object Expected 21:00:00` to be a date`

– frwebdev
Nov 26 '18 at 12:13

seems to be a problem with angular 1.3.20 (the one I am using)

– frwebdev
Nov 26 '18 at 12:43

|
show 1 more comment

i have a dataset like this in my controller

{

"schedule":[{"day":"Monday","start":"15:00:00"},{"day":"Tuesday","start":"16:30:00"}]

}

In my view i would like to use input[time]

<div ng-repeat="day in obj.schedule">

 <input  type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

</div>

It doesn't work because it expects a date, not a string.

How can I convert inside controller my string into time?

I tried with

$scope.start = new Date(obj.start)

but it doesn't work

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

1

You are using ng-model="day.start_time" shouldn't that be ng-model="day.start"

– Ankit Agarwal
Nov 26 '18 at 11:59

well, it's a typo while writing post

– frwebdev
Nov 26 '18 at 12:03

Check your question I have added a working snippet and it works

– Ankit Agarwal
Nov 26 '18 at 12:05

i don't understand.. inside my project give error: Error: ngModel:datefmt Model is not a date object Expected 21:00:00` to be a date`

– frwebdev
Nov 26 '18 at 12:13

seems to be a problem with angular 1.3.20 (the one I am using)

– frwebdev
Nov 26 '18 at 12:43

|
show 1 more comment

i have a dataset like this in my controller

{

"schedule":[{"day":"Monday","start":"15:00:00"},{"day":"Tuesday","start":"16:30:00"}]

}

In my view i would like to use input[time]

<div ng-repeat="day in obj.schedule">

 <input  type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

</div>

It doesn't work because it expects a date, not a string.

How can I convert inside controller my string into time?

I tried with

$scope.start = new Date(obj.start)

but it doesn't work

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

i have a dataset like this in my controller

{

"schedule":[{"day":"Monday","start":"15:00:00"},{"day":"Tuesday","start":"16:30:00"}]

}

In my view i would like to use input[time]

<div ng-repeat="day in obj.schedule">

 <input  type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

</div>

It doesn't work because it expects a date, not a string.

How can I convert inside controller my string into time?

I tried with

$scope.start = new Date(obj.start)

but it doesn't work

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

var app = angular.module('myApp', );

app.controller('mainCtrl', function($scope) {

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div ng-repeat="day in obj.schedule">

    <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start" />

  </div>

</div>

javascript angularjs datetime-format

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

edited Nov 26 '18 at 12:04

Ankit Agarwal

23.9k52144

asked Nov 26 '18 at 11:58

frwebdev

265

asked Nov 26 '18 at 11:58

frwebdev

265

asked Nov 26 '18 at 11:58

frwebdev

265

1

You are using ng-model="day.start_time" shouldn't that be ng-model="day.start"

– Ankit Agarwal
Nov 26 '18 at 11:59

well, it's a typo while writing post

– frwebdev
Nov 26 '18 at 12:03

Check your question I have added a working snippet and it works

– Ankit Agarwal
Nov 26 '18 at 12:05

i don't understand.. inside my project give error: Error: ngModel:datefmt Model is not a date object Expected 21:00:00` to be a date`

– frwebdev
Nov 26 '18 at 12:13

seems to be a problem with angular 1.3.20 (the one I am using)

– frwebdev
Nov 26 '18 at 12:43

|
show 1 more comment

1

You are using ng-model="day.start_time" shouldn't that be ng-model="day.start"

– Ankit Agarwal
Nov 26 '18 at 11:59

well, it's a typo while writing post

– frwebdev
Nov 26 '18 at 12:03

Check your question I have added a working snippet and it works

– Ankit Agarwal
Nov 26 '18 at 12:05

i don't understand.. inside my project give error: Error: ngModel:datefmt Model is not a date object Expected 21:00:00` to be a date`

– frwebdev
Nov 26 '18 at 12:13

seems to be a problem with angular 1.3.20 (the one I am using)

– frwebdev
Nov 26 '18 at 12:43

You are using ng-model="day.start_time" shouldn't that be ng-model="day.start"

– Ankit Agarwal
Nov 26 '18 at 11:59

well, it's a typo while writing post

– frwebdev
Nov 26 '18 at 12:03

Check your question I have added a working snippet and it works

– Ankit Agarwal
Nov 26 '18 at 12:05

i don't understand.. inside my project give error: Error: ngModel:datefmt Model is not a date object Expected 21:00:00` to be a date`

– frwebdev
Nov 26 '18 at 12:13

seems to be a problem with angular 1.3.20 (the one I am using)

– frwebdev
Nov 26 '18 at 12:43

|
show 1 more comment

1 Answer
1

active

oldest

votes

If it's expecting a date in your case, maybe try something along these lines

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480648%2fhow-convert-string-in-time-format-in-angularjs-controller%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If it's expecting a date in your case, maybe try something along these lines

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

add a comment |

If it's expecting a date in your case, maybe try something along these lines

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

add a comment |

If it's expecting a date in your case, maybe try something along these lines

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

If it's expecting a date in your case, maybe try something along these lines

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

angular.module('app',)



.controller('mainCtrl', function($scope){

  var vm = this;

  

  $scope.obj = {

    "schedule": [{

      "day": "Monday",

      "start": "15:00:00"

    }, {

      "day": "Tuesday",

      "start": "16:30:00"

    }]

  }

  

  for(var i = 0; i < $scope.obj.schedule.length; i++) {

    $scope.obj.schedule[i].start = stringToDate($scope.obj.schedule[i].start);

  }

 

  function stringToDate(stringDate) {

    var date = new Date();

    var splitDate = stringDate.split(':');

    date.setHours(splitDate[0], splitDate[1], splitDate[2]);

    

    return date.toLocaleTimeString();

  }

})

<html ng-app="app">

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    <div ng-controller="mainCtrl as vm">

      <div ng-repeat="day in obj.schedule">

        <input type="time" min="00:00:00" max="23:59:00" placeholder="" ng-model="day.start"/>

      </div>

    </div>

  </body>

</html>

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

edited Nov 30 '18 at 16:24

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

answered Nov 27 '18 at 15:46

LazioTibijczyk

35913

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

add a comment |

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

ok, the problem is i have "start": "16:30:00" and not "start": stringToDate("16:30:00"). This dataset came from external api service, so i can't change it

– frwebdev
Nov 30 '18 at 10:07

Can you iterate through the array of objects? Edited my answer.

– LazioTibijczyk
Nov 30 '18 at 16:21

it doesn't work with angularjs 1.3.20

– frwebdev
Dec 3 '18 at 1:10

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl