Incorrect format for a date in AngularJS

Question

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>

javascript angularjs

Answer 1

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

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 3

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

Answer 4

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

Incorrect format for a date in AngularJS

Answer №1

Answer №2

Similar questions

Button that triggers HTML Audio play when clicked

Is it possible to process HTML and JavaScript as a request in JMeter?

What is the best way to personalize the Window.Confirm() dialog in JavaScript?

The render props on the child component are not appearing on the screen as expected

What is the best way to connect a nested Vuex object to a Vue.js property within the Tiptap text editor?

Creating an array using Vue.js

Retrieve the URL of the image from an XML document

Is React failing to insert a span element in the client-side code?

Is it possible to use jquery to specifically target classes?

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Prevent those pesky popups with this handy script

Is all of the app fetched by Next.js when the initial request is sent?

Error: Cannot execute products.map in React JS because it is not a function

Searching and replacing query strings in a URL using JQuery according to the chosen option in an HTML dropdown menu

The jQuery .on("change") function keeps triggering repeatedly, but I'd like it to only execute once

Looking for a way to make the spinner disappear in puppeteer while waiting?

Storing information in Firebase using React.js

Formatting specific elements within an array

Is p-queue designed to utilize multiple threads?

How can AngularJS display ellipses using the limitTo filter exclusively for strings that surpass the character limit?