Incorrect format for a date in AngularJS

I have a time input field where I am receiving the date and time format 'Thu Jan 01 1970 12:59:00 GMT+0530 (India Standard Time)', but I only want to display the time. Is there an issue with the time picker in AngularJS? Can anyone help me resolve this?

function HistoryCtrl($scope) {

     $scope.updateForm = function () {
        console.log($scope.booktime);
       //here i am getting Thu Jan 01 1970 12:59:00 GMT+0530 (India Standard Time)
        
    };

    
}
<div ng-app ng-controller="HistoryCtrl">
    
     <div class="col">
            <label class="item item-input item-stacked-label">
            <span class="input-label" >Time</span>
            <input type="time" ng-model="booktime" name="booktime" min="09:00:00" max="21:00:00" required="">
            </label>
            <div class="form-error" ng-messages="projectForm.booktime.$error">
               <div class="form-error" ng-message="required">* Mandatory</div>
               <div class="form-error" ng-message="min">Booking times: 9am - 9 pm</div>
               <div class="form-error" ng-message="max">Booking times: 9am - 9 pm</div>
            </div>
         </div>
   
    <button ng-click="updateForm()">Update</button>
   
</div>
javascriptangularjs

Answer №1

If you're working with Angularjs, you have access to the $filter service which can be used for date formatting.

Here's a sample code snippet to demonstrate how to use it:

function HistoryCtrl($scope, $filter) {

     $scope.updateForm = function () {
        console.log($filter('date')($scope.booktime, 'mediumTime'));          
    };
}

To customize the time format to your liking, you can refer to this link.

I hope this information proves helpful :)

Answer №2

To handle datetime, you have the option of using moment.js.

http://momentjs.com/

Alternatively, for AngularJS, you can use

https://github.com/urish/angular-moment

Date Formatting Examples:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Example: September 15th 2015, 10:30:07 am
moment().format('dddd');                    // Example: Tuesday
moment().format("MMM Do YY");               // Example: Sep 15th 15
moment().format('YYYY [escaped] YYYY');     // Example: 2015 escaped 2015
moment().format();                          // Example: 2015-09-15T10:30:07+05:30
Relative Time
moment("20111031", "YYYYMMDD").fromNow(); // Example: 4 years ago
moment("20120620", "YYYYMMDD").fromNow(); // Example: 3 years ago
moment().startOf('day').fromNow();        // Example: 11 hours ago
moment().endOf('day').fromNow();          // Example: in 13 hours
moment().startOf('hour').fromNow();       // Example: 30 minutes ago
Calendar Time
moment().subtract(10, 'days').calendar(); // Example: 09/05/2015
moment().subtract(6, 'days').calendar();  // Example: Last Wednesday at 10:30 AM
moment().subtract(3, 'days').calendar();  // Example: Last Saturday at 10:30 AM
moment().subtract(1, 'days').calendar();  // Example: Yesterday at 10:30 AM
moment().calendar();                      // Example: Today at 10:30 AM
moment().add(1, 'days').calendar();       // Example: Tomorrow at 10:30 AM
moment().add(3, 'days').calendar();       // Example: Friday at 10:30 AM
moment().add(10, 'days').calendar();      // Example: 09/25/2015
Multiple Locale Support
moment().format('L');    // Example: 09/15/2015
moment().format('l');    // Example: 9/15/2015
moment().format('LL');   // Example: September 15, 2015
moment().format('ll');   // Example: Sep 15, 2015
moment().format('LLL');  // Example: September 15, 2015 10:30 AM
moment().format('lll');  // Example: Sep 15, 2015 10:30 AM
moment().format('LLLL'); // Example: Tuesday, September 15, 2015 10:30 AM
moment().format('llll'); // Example: Tue, Sep 15, 2015 10:30 AM

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having numerous bxsliders implemented in a Genesis child theme

I'm currently working on incorporating multiple bxsliders through custom fields in a wp genesis child theme. The initial slider was successfully implemented using the following function within the genesis child theme functions: add_action('genes ...

javascriptjquerywordpressbxslider

Uploading CSV or text files in Node.js

I am looking to develop a function that can upload CSV or txt files into MongoDB using the MEAN stack. The function should work by allowing me to upload a file, then it will verify if it is in text/csv format before uploading it to MongoDB. I have attemp ...

node.jsangularjsexpress

I am attempting to access an Angular variable using JavaScript, but unfortunately, I am encountering some issues

I'm currently implementing the following code: window.onload=function(){ var dom_el2 = document.querySelector('[ng-controller="myCtrl"]'); var ng_el2 = angular.element(dom_el2); var ng_el_scope2 = ng_el2.scope(); console.log ...

javascriptangularjs

using node.js to extract a cookie from a 302 redirect

Need help simulating a login using node.js. The request is a post method and returns a 302 status code. However, when trying to simulate the request in node, I encounter the following error: Error handling unrejected promise: StatusCodeError: 302 Upon i ...

javascriptnode.jshttprequesthttp-headers

Insert a JavaScript object into the rendered HTML using the componentDidMount lifecycle method

I'm trying to incorporate a JavaScript object into the template once the component has mounted for tracking purposes. Here is how I want the object to be rendered: var tracking = { pagename: 'page name', channel: 'lp&ap ...

javascriptreactjstracking

You can use jQuery AJAX to submit two forms' data simultaneously in just one submission

I am looking to submit two sets of form data with just one click. <form id="form1"> <input type="text" name="name"> <input type="submit" value="Submit"> </form> <form id=&quo ...

javascriptjqueryajax

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

Bring in a JavaScript file from Blogger without using a tag

Is there a way to retrieve blogger feeds code without using