Show various pieces of information in my input field

I'm working with an input field:

<div class="search-field search-field-date search-field-calendar ui-datepicker-calendar columns small-3">
    <input type="text" data-ng-model="goDate"
           placeholder="Departure Date" data-mtx-datepicker data-mtx-maxdate="returnDate" data-mtx-time="departureTime" />
</div>

After selecting a date, this is what I get:

Now, my goal is to display multiple pieces of information like this:

Whenever a date is selected:

I am unsure about how to achieve this.

View Plnkr example.

htmlcssangularjs

Answer №1

Make sure to update your code by making the following changes:

$scope.dt = [];
$scope.today = function() {
   $scope.dt[0] = 'DU:'
   $scope.dt[1] = new Date();
   $scope.dt[2] = 'JOURNEE'
};

When implementing in HTML, use this:

ng-model="dt"

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

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

javascriptcssreactjsthree.js

Updating choices within a div in real-time by changing the select box dynamically

I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...

javascriptjqueryhtml

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

I am currently having an issue with navigating to the home page after submitting a form in Bootstrap. Although I have successfully implemented an alert message upon submission, the page does not redirect to the home page as expected. Instead, it redirects ...

javascripthtml

Issue with collapsed navbar button functionality in Bootstrap version 5.1.3

Issue with Bootstrap 5 Navbar Collapse Functionality The navbar collapse button is not working on my PC. The button appears but when clicked, the navbar does not show up. Surprisingly, when I test the code on Codeply (without linking to Bootstrap 5 and ot ...

javascripthtmljquerybootstrap-5

Place an element in relation to the vertical size of a div that includes written content

Currently, I am working on implementing a button with a popup that appears underneath it when the user hovers over it. The specific requirements for this setup are: The size of the button should not affect the size of the popup The popup should always be ...

javascripthtmlcss

"Idle Encasement" resulting in an abundance of empty room

I am currently working on building a website (as a beginner) and encountering an issue where the footer section is abnormally longer on one specific page compared to others. It's puzzling because the same code works perfectly fine on other pages but s ...

phphtmlcssstyleswrapper

"Creating eye-catching popup images in just a few simple steps

<div className="Image popup"> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Image popup" > <img src="../img/navratri-1.png" alt="Image popup" /> <b ...

javascripthtmlreactjsbootstrap-4

Hover over CSS sprite

My anchor tag looks like this: <a href="#"> <i class="ico01"></i> <span>Text</span> </a> The ico01 class applies an image using CSS sprite. I want to change the background color of the entire content inside the a ...

htmlcsscss-sprites

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

htmlcss

Determining the quantity of displays

Can we detect the number of screens in use using JavaScript or jQuery? We are working on an application that should not be displayed on multiple screens, even if the hardware allows for it. Appreciate any assistance with this matter. Thank you. ...

javascriptjqueryhtml

I need assistance with retrieving the value in a password field using JavaScript. I've been stuck on this issue all morning and would greatly appreciate any

Currently utilizing document.getElementById("password").value for retrieving the input value of the password field. Seeking assistance! Additionally, the form contains an action="authenticate_signup.php" Encountering an issue where the password field va ...

phpjavascripthtml

Exploring the possibilities of LimeJS HTML5 through the integration of various

Is it feasible to utilize various libraries such as Node.JS, JQuery, and LimeJS together without any limitations? ...

jqueryhtmlnode.jslimejs

Function did not receive SQLite query result

My goal is to develop a storage service that utilizes a SQLite database to store key-value pairs and retrieve them based on the key. The code I have set up for this purpose is as follows: .service('StorageService', function($cordovaSQLite, $q) { ...

angularjssqlitecordovaionic-frameworkpromise

Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block; I have attempted using float:right and other CSS properties to achieve a ...

htmlcssclass

Retrieve information from HTML form

I am facing an issue with a form that includes an input field of type datetime-local. The form is uploaded using Angular, and I need to convert the local date input to UTC before posting it. Despite trying different methods, I have been unable to resolve t ...

javascripthtmlangularjs

Updating data scope in AngularJS using $http request not functioning properly

I am facing an issue where the $scope.user_free_status is not updating when I set a user free, but works perfectly fine when I unset the parameter. It's strange that I need to reload the page in one case and not the other. The data fetched is stored i ...

javascriptangularjsscopeionic-framework

Ensure that the dimensions of a div remain consistent across all screen resolutions, specifically for desktops and not mobile devices

Currently I am in the process of creating a highly secure and encrypted social network, but I have hit a stumbling block. I hadn't considered how my website would display on other desktops and laptops (not mobile devices). The issue is that I set all ...

htmlcss

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

Guide to adjusting icon placement on top of an image using Bootstrap 4

Is there a way to overlay an icon on top of an image? .item { position: relative; } .des { color: #fff; text-align: left; } <div class="card"> <div class="item"> <img class="card-img-top" src="images/g33.jpg" alt="Avata ...

htmlcssbootstrap-4

Retrieve a result following an AJAX post request to utilize the obtained value in subsequent code functionalities

Below is the code snippet where an "if" statement is used to check if a query has been executed correctly. If it has, a part of the script is stored in a variable called $output. This variable is then immediately read by the notification script included in ...

javascriptphpjqueryhtmlajax