Issue with Datepicker in Angular Bootstrap: format identifier not being utilized

Check out this Plunk for reference.

This is how my controller is set up:

app.controller("myController", [
      "$scope",
      function($scope){
        $scope.DateFormat = "DD/MM/YYYY";

        $scope.From = '15/01/2015'; // DD/MM/YYYY
        $scope.To = '31/12/2015'; // DD/MM/YYYY
      }]);

When I use it in the HTML, it looks like this:

<input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    date-format="DateFormat" />

However, the date format always comes out as MM/DD/YYYY, which causes issues on the backend. Any ideas on how to fix this?

Answer №1

To ensure proper functionality of the datepicker elements, it is recommended to update the "date-format" attribute to "data-date-format". This can be achieved by assigning "DateFormat" using a template in the element, like so: data-date-format={{DateFormat}}. Additionally, the date format should be adjusted to "dd/mm/yyyy". Check out the modified plunker for a visual example, http://plnkr.co/edit/Ep7LcJHpssFb4vnZXdC6?p=preview - I hope this proves helpful.

script.js:

$scope.DateFormat = "dd/mm/yyyy";

index.html:

<input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    data-date-format={{DateFormat}} />

  <input type="text" 
    ng-model="To" 
    data-provide="datepicker" 
    data-date-format={{DateFormat}} />

For more information on bootstrap-datepicker options, please refer to:

Answer №2

When binding the string value ('15/01/2015') to an angular $scope variable, you may not get the desired output. To achieve this, I made some slight changes to your plnkr. I hope you don't mind.

For the updated working code, visit: http://plnkr.co/edit/PRbDW1g1JmmkUb7T7NJr?p=preview

You should use (bootstrap datepicker) like this:

<script type="text/javascript>
                    $(document).ready(function () {
                        $('.myDP').each(function(){
                                        $(this).datepicker({
                                           format: "dd/mm/yyyy",
                                           autoclose: true
                                        });;
                        });

        });
   </script>

Your controller should have the following code:

       var fromDate=new Date(2015,00,15);
        var toDate=new Date(2015,11,31);
        $scope.From =$filter('date')( fromDate,'dd/MM/yyyy'); // DD/MM/YYYY
        $scope.To = $filter('date')( toDate,'dd/MM/yyyy') ; // DD/MM/YYYY

Please review the solution and let me know if there are any issues.

Answer №3

To define the layout, simply utilize the uib-datepicker-popup attribute.

 <input type="text"
    ng-model="FromDate"
    data-provide="datepicker"
    date-format="DateLayout"
    uib-datepicker-popup="MM/DD/YYYY" />

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

Struggling to retrieve data from AJAX call

I'm having trouble accessing the data returned from a GET AJAX call. The call is successfully retrieving the data, but I am unable to store it in a variable and use it. Although I understand that AJAX calls are asynchronous, I have experimented with ...

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

Tips on resolving the Hydration error in localStorage while using Next.js

Having issues persisting context using localStorage in a Next.js project, resulting in hydration error upon page refresh. Any ideas on how to resolve this issue? type AppState = { name: string; salary: number; info: { email: string; departme ...

What's the best way to pass parameters through Higher-Order Components in React?

my custom component App import React, { Component } from "react"; import City from "./City"; import withDataLoader from "./withDataLoader"; const MyApp = () => { const MyCity = withDataLoader( City, "https://5e5cf5eb97d2ea0014796f01.mockapi ...

Aligning Text to the Right Using CSS

HTML <body> <div class="menu_items"> <h1>My Heading</h1> <nav> <a>Item 1</a> <a>Item 2</a> <a>Item 3</a ...

Include a clickable jQuery icon in an HTML document for testing purposes

Is there a way to include an icon [+] at the end of this statement, so that when clicked it triggers an alert? <div id="catalog" style="width: 518px;"> <ul id="catalog111" style="left: -37px;top: -140px;width=500%;"> < ...

Dynamic Code for Removing List Items Based on Date

I need assistance in resolving an issue with my company's website design and function. Specifically, I am working on a page that displays a list of events where employees will be present throughout the year. Here is an example: <div class="contai ...

Looking to find the video code in the page source and figure out how to get the video to play

I have a requirement where I must embed the video code directly in a blog post. After figuring out the necessary code for the video and saving it in a html file named video.html, I encountered an issue when trying to upload the file to the blog. Only the ...

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

Is there a way to make the switch case condition shorter?

I need to dynamically select a text input field based on the variable type chosen, without having to include the textfield component in every single condition. const chooseInputType = () => { switch (type) { case 'boolean': ...

Is there a way to improve scrolling speed on Mobile Safari?

I'm currently working on a project utilizing angularjs and bootstrap, aiming to replicate iOS's navigationController feature. However, I'm encountering speed issues, particularly when scrolling between views on mobile safari iOS. The transi ...

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

Steps to forward a restricted user to a specific webpage

I am currently utilizing NextJs and am in the process of creating a redirecting function for users who have been banned or blocked from accessing the DB/session. My attempt at this involved: redirect.js, where I created a custom redirect function. impo ...

Unable to assign a value to a null property during the onchange event

I'm currently working on a project where I need to display flight details based on the selected flight number. To achieve this, I have created a dropdown menu that lists all available flight numbers and a table displaying various flight details such a ...

Button-controlled automated presentation

I have devised a method to create an automatic slideshow using JavaScript. However, I am looking to incorporate manual control buttons as well. After adding manual control code, the slideshow seems to be malfunctioning. The provided code below is used for ...

Modifying properties of an array of objects in React Native using JavaScript

I have a scenario where I am using Flatlist to render a couple of boxes. If the "shapes" element's "visible" key is false, the box will be blank. This visibility property is defined in state and I'm not sure if this is the correct approach. Now, ...

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

Check if the user is null using React's useEffect hook and then perform a

I am currently working on implementing a protected route in Next JS. I have included a useEffect to redirect to the sign-in page if there is no user detected. const analytics = () => { const { userLoaded, user, signOut, session, userDetails, subscri ...

Removing an object from the scene using three.js

Is there a way to remove an object from a three.js scene? I am trying to delete a cube when a specific key is pressed, but so far I can only clear the entire scene instead of removing just one cube. ...