Steps to dynamically set the value of an input type="time" using JavaScript

Despite the repetitive nature of these questions, I have yet to find a solution to my specific query. Any help would be greatly appreciated. Thank you in advance.

The HTML code is as follows:

var start="10:30 PM";
$scope.edit={}

frtime=start.split("PM")[0];
frtime = frtime.trim();
frtime= $filter('date')(frtime, "HH:mm");

$scope.edit.fromtime=new Date("2010-12-28T"+frtime+":00");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input type="time" ng-model="edit.fromtime">

The current time is displayed in the input field in HTML. However, I require 10:30 PM to be displayed instead.

javascriptangularjs

Answer №1

When working with the JS Date object, you have the ability to easily manipulate the hours, minutes, and more:

var newDate = new Date();
newDate.setHours(10,30,0)

To customize the date object to your specific needs, simply create a new date and set it accordingly:

Check out this Plunker example

You can find all available methods for the Date object here.

Answer №3

A simple solution for formatting dates is shown in the following method:

formatDate = function (dateValue) {
 if (dateValue != undefined) {
    var dateObj = new Date(dateValue.match(/\d+/)[0] * 1);
    return new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate(), 
 dateObj.getHours(), dateObj.getMinutes());
 }
}

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

Is there a way to simulate pressing the ENTER/RETURN key using JavaScript executor in Selenium using Python?

Greetings everyone, I am a newcomer to Python Selenium and currently working on automating a website. However, I have encountered an issue with the search text box of the website as it does not feature any clickable buttons once the text is entered. Here ...

javascriptpython-2.7selenium-webdriverautomationwebdriver

The date displayed on the popup calendar is local time, while the date selected is in Coordinated

Is there a way to maintain the selected date in UTC format? I am experiencing an issue where the pop-up calendar does not synchronize with the selected datetime. For instance, when I click on 08/13 and the selected date shows as 08/12. This discrepancy ...

javascriptangularjsangular-ui-bootstrap

Exploring Validation Techniques in AngularJS

As I delve into AngularJS, my excitement grows. However, there seems to be a gap when it comes to validation. The current options, like the pre-installed mechanisms and the AngularUI project, use directives for validators, requiring each validation to be d ...

model-view-controllervalidationangularjs

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

javascripthtmlcsssasswatch

Turning off strict mode in the bundling process of React with webpack can be achieved by following

I'm facing an issue with my application. It works perfectly in all browsers except for IE, where it throws the following error: 0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode In my webpack.config ...

javascriptreactjswebpackstrict-mode

componentWillReceiveProps with excessive conditional statements

Having recently ventured into React development, I've already worked on 3 major projects utilizing React+Redux. However, I've noticed a recurring pattern that I find quite displeasing: componentWillReceiveProps(nextProps) { if (nextProps.par ...

javascriptreactjsreduxreact-redux

A guide on accessing JavaScript files from the components directory in a React Native iOS application

I am encountering difficulty in accessing the components folder within my React Native Project on IOS. The error message I am receiving is: Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find ...

javascriptiosnode.jsreact-native

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

Controlling an AJAX request to fetch individuals

I am currently using an ajax request to display people data on the page, which is retrieved from a backend database. The search form on the page includes options for location, sector, service, and job title. Below is the javascript code being used: //var ...

javascriptjqueryajax

Converting an Observable Array into a nested JSON structure

Having difficulty storing an array of information properly as JSON. A visual representation of the issue can be seen in this fiddle. Input a set of tags and check the console for output. Additional detail: An input captures a comma-separated list of tag ...

javascriptjqueryarraysjsonknockout.js

Delete local data storage in Angular 2 upon closing the window

After the user logs in, I store their token in local storage so that it is accessible across all tabs. However, I need to remove this token from local storage when the user closes the browser or window. What is the best way to clear local storage upon clo ...

javascriptangularlocal-storage

Which Browser (or version) is the Only One That Cannot Manipulate Flash Objects?

In my attempts to modify Flash Objects / Embeds using Javascript, I've found that it works in all browsers except for IE. This has led me to consider abandoning IE altogether for this application, unless there are other older or less used browsers tha ...

javascriptjqueryhtmlinternet-explorerbrowser

Employing ng-click within a displayed column of Datatable

Currently, I am utilizing a plain Datatable in AngularJS without any Angular-Datatable libraries. Everything appears to be working well except for one issue. Here is the datatable code snippet: $scope.siInfoTable = $('#siInfoTable').DataTable({ ...

javascriptjqueryangularjsdatatable

Is it possible to determine the number of JSON properties without the need for a loop?

I have a question about organizing data. I have a vast amount of data with various properties, and I am looking for a way to display each property along with how many times it occurs. For example: 0:[ variants:{ "color":"blue" "size":"3" } ] 1 ...

javascriptarraysjsonloopscounting

Is it possible to personalize Carousel-indicators within react-bootstrap?

I'm currently utilizing the Carousel component from . My goal is to customize the carousel-indicators, adding text and making them appear as buttons with text. However, when I attempt to do so, React renders 'ol' tag into a new CarouselItem ...

javascriptreactjscomponentscarouselreact-bootstrap

Generate a PDF file using a byte array and save it for download

I am working on an AJAX function that calls a server-side method which in turn calls an API and returns a byte array. My goal is to convert this byte array into a PDF file and then download the file. Here is the code I have: AJAX function: function Obtai ...

javascriptc#asp.net

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

Issue arise when utilizing async/await in conjunction with .forEach method

My code is attempting to make a basic request to Redis in order to retrieve all the values (not keys) from my database. However, I am encountering an issue where the tab is being returned before the .forEach function even begins. This is evident because ...

javascriptnode.jsredis

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...

javascripthtmlangularjs

Using axios to pass parameters in a post request

In my webpack project, I am currently using vue-resource for ajax calls. Everything works perfectly with "get" calls, but when I try a post request, my PHP file does not receive any parameters. Even when I use var_dump($_POST), it just gives me an empty ar ...

javascriptajaxpostvue.jsaxios