Select only the desired time option from the Datetime-picker in AngularJS

I am working with AngularJS and I need to split a datetime-picker into two separate parts. Normally, when you open the calendar, you first select the day and then the time (hours and minutes). My goal is to have two different datetime-pickers - one for selecting the day and another for choosing the hours/minutes. I attempted to modify the initial format like this:

 datetime-picker="dd/MM/yyyy HH:mm"

to

 datetime-picker="HH:mm"

However, my modification did not produce the desired result.

The issue lies in the fact that when you click on the first calendar to open the initial datetime-picker, it requires you to choose the date before selecting the time. Ideally, I would like to be able to directly select hours and minutes without having to choose a date.

You can view the plunker showcasing the problem here: https://plnkr.co/edit/BLPsNszpUWjXuHXaj7hO?p=preview

Answer №1

Utilizing the datetimepicker component sourced from this repository: https://github.com/Gillardo/bootstrap-ui-datetime-picker. The documentation specifies that you have the option to utilize the following attributes:

enableDate - Determines if the user can select a date. Defaults to true.
enableTime - Determines if the user can select a time. Defaults to true.

If you wish to conceal the date picker section in the component, include enable-date="false" in your input field. For example:

<input type="text" class="form-control" datetime-picker="HH:mm" enable-date="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

Likewise, to hide the timepicker section in the component, add enable-time="false" to your input field. Like so:

<input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>

Find the updated plunker here: https://plnkr.co/edit/luMPl8aOFkzBuW4BeNkx?p=preview. Trust this information proves useful.

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

Hover over a particular element using a loop in Vue.js

Is there a way to change the price button to an Add to Cart button on mouseover, considering the true false data trigger for each item? How can we specify which item to target when hovering over the price section? Below is the code snippet: template: < ...

navigating directly to a particular slide within a Bootstrap carousel on a different page by clicking

Attempting to set up a bootstrap build, where clicking on certain states on one page will direct the user to a specific slide on another page. I'm struggling to grasp this concept. A friend of mine, who is a Javascript developer, provided some code f ...

Troubleshoot: Bootbox Confirm Functionality Issues

Can anyone help me troubleshoot this issue? I'm trying to implement code that uses bootbox.confirm when deleting a file, but it's not functioning correctly. $('#fileupload').fileupload({ destroy: function (e, data) { var that = $(th ...

Update picture using Vanilla Javascript for mobile display

I am looking to change my logo color to white when viewed on mobile devices. Currently, I have the following code for changing the logo on scroll using vanilla JavaScript. The code toggles between a dark and light logo based on the scroll position. Howev ...

An error occurred due to a missing value within the forEach loop

In my JavaScript object, I am encountering an issue with a key. resolve: function () { var result = this.initialValue; console.log('initial value:',result); // 5 this.functions.forEach(function (element, index) { ...

Loading the app.js file in Grails 3 from src/main/webapp folder

Trying to set up a basic Grails 3 and Angular application. When testing it locally, I expect my app.js file to be loaded first and then load my index.html. Uncertain about how the index/main gsps function, but from what I know, using asset-pipeline, it sh ...

Tips for managing the retrieval of non-existent images in JavaScript with LiipImagineBundle

I need to verify the existence of a file in NodeJS. While exploring a previous post, I came across this solution: const tryRequire = (path) => { try { return require(`${path}`); } catch (err) { return null; } }; However, is this the most ...

How do you transform data stored in map to string format?

The main objective is to take a large txt file and replace all words according to the information in a csv file. This process will generate a new txt file as well as a new csv file that shows the frequency of each word. I'm currently struggling with ...

Using jQuery to include a sub-object in the "data" object for each AJAX request made on the webpage

Is there a way to enhance the functionality of jQuery.ajax by including a static sub-data object in every ajax request automatically? For instance, for an ajax request like this: jQuery.ajax({ url: 'request_file.php', data: { da ...

Instructions for arranging dropdown options alphabetically with html, vue, and js

When working with JavaScript, is there a method to populate an options list from a database and then sort it alphabetically? ...

How can I make a method in VueJS wait to execute until after rendering?

There is a button that triggers the parse method. parse: function() { this.json.data = getDataFromAPI(); applyColor(); }, applyColor: function() { for (var i=0; i<this.json.data.length; i++) { var doc = document.getElementById(t ...

Generate a new array using a single value extracted from an existing array

I'm new to working with arrays. Before this, I used to manually code everything in HTML. My question is, can you create an array based on the values of another array? var pmmain =["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", ...

When the button is clicked, display in the console the data retrieved from the API

Programming Section import react, { useEffect } from 'react'; import './styles.css'; export default function App() { useEffect(() => { fetch('https://jsonplaceholder.typicode.com/todos') .then((response) => ...

Guide to Updating Store State with API Data

My goal is to update my component state with data retrieved from an API using a getter in the store. Within the mounted() lifecycle hook, I call the getProducts() getter which is defined as: export const getters = { async getProducts() { axios.ge ...

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

Issue in insert.php file: stdClass::$variable property is undefined when using Ionic, Angular, and PHP together

There are three files. Once the submit button is clicked on the Ionic page, all inputs will be sent to the controller, which will then parse them to insert.php. The form input data is saved successfully when only using HTML (without Ionic content), however ...

Using percentages for sizing and margins in CSS

Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...

Creating an Array in AngularJS with ng-model and submitting it with jQuery: A comprehensive guide

I am struggling to submit an array of values using jQuery and AngularJS. Whenever I click the submit button, only the first array value is being retrieved. How can I get all array values using ng-model? Here is a link to all my code: https://jsfiddle.net/r ...

Chrome automatically scrolling back to the beginning of the page following a remote form submission

Rails Version: 5.2.2 Chrome Version: 78.0.3904.87 While testing my website on Chrome today, I encountered an issue where the page automatically scrolls to the top whenever an AJAX request is made. This problem only occurs in Chrome and not in other brows ...

Determine in Node.js if a word has been altered or has an additional letter compared to the previous word

I'm currently developing a feature for my Discord bot that allows users to play a word game. The objective is to input words that either change one letter from the previous word or add a letter. To implement this, I am utilizing the following function ...