AngularJS Bootstrap Datepicker populating date from input field

I'm currently utilizing Bootstrap for my web application.

I've developed a method that initializes all input fields of type date with a class called form_datetime:

 function initDatepicker(){
        $(".form_datetime").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            language: "it",
            todayHighlight: true,
            autoclose: true,
            orientation:"auto"
        });
 }

The HTML input code:

<input name="date" class="form-control form_datetime date"
                                type="text"
                                ng-model="date"                             
                                required  >

The issue arises when selecting the date field, as it clears the input box and loses the previously set value (obtained from the database).

The date is in string format "dd/mm/yyyy".

How can I have the current date populated in the calendar when selecting the input field?

javascriptangularjsdatepicker

Answer №1

If you are using the AngularJS Material Datepicker along with the moment plugin, you have the ability to enforce a specific date format by utilizing the following code snippet:

  .config(function($mdDateLocaleProvider) {
      $mdDateLocaleProvider.formatDate = function(date) {
        return moment(date).format('DD/MM/YYYY');
      };
      $mdDateLocaleProvider.parseDate = function(dateString) {
        var m = moment(dateString, 'DD/MM/YYYY', true);
        return m.isValid() ? m.toDate() : new Date(NaN);
      };
   });

Take a look at it being implemented here.

Answer №2

To find the solution, you can check out this helpful resource

 function setDatePicker(){
        $(".form_datetime").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            language: "it",
            todayHighlight: true,
            autoclose: true,
            orientation:"auto",
            forceParse: false //
        });
 }

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 automatically trigger a function once another function has completed its execution?

I am diving into the world of JavaScript as a beginner. All I want to do is trigger the function called seconOne() right after the execution of firstOne(). Specifically, I need the function two to be invoked when the value of p1 reaches 4. While I can us ...

javascriptfunctiondelayed-executionasynchronous-javascript

Capture an image from the webcam without any manual intervention and store it in the system's directories

Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...

javascripthtmlimagevideo-capturecapture

Is it possible to pass a random variable into an included template in Jade?

In my jade template called 'main page', I have a reusable template named 'product template'. The 'product template' is designed to display dynamic data and needs to be flexible enough to be used in multiple pages without being ...

javascripthtmlpug

Tips for arranging years in descending order in the material-ui Date Picker's calendar interface

This is the Code I Used - import "./styles.css"; import { DatePicker } from "@mui/x-date-pickers"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDateFns } from "@mui/x-da ...

javascriptreactjsmaterial-uidatepickermomentjs

Retrieving values from multiple Select components in Material-UI is key

I have encountered an issue with my two MUI Select components on the page. I am attempting to set values based on the id of the Select component. Initially, when I check (id === "breed-select") in the console, it returns true, but shortly after ...

javascriptreactjsmaterial-ui

Steps for implementing a datepicker in a dynamically generated element

Snippet of jQuery code that adds an element to a container $(container).append( '<label class="control-label col-md-3">Join Duration</label>' + '<div class="col-md-4">' + '<input type="text" name="join_dura ...

javascriptjquery

Compare the current return value to the previous value in the success callback of an Ajax request

I am currently running an Ajax request to a PHP DB script every 3 seconds, and I need to make a decision based on the result returned. The result is a timestamp. Let's say the ajax request is fired two times. I want to compare the first result with th ...

javascriptajax

Ways to refresh React context in child components

Hey there, I'm facing an issue with context in React. I am trying to update context data after fetching some information in a child component: Check out the code for my app below: export default class App extends Component { constructor(props) ...

javascriptreactjs

Innovative functionality for adding and deleting elements in JQuery/JavaScript

Is there a way to dynamically add and remove items when the Append/Clear buttons are clicked using this code snippet? $("#btn1").click(function(){ $("ul").prepend("<li>List Item</li>"); }); $("#btn2").click(function(){ $("ul").remove ...

javascriptjquery

Leverage the source code of Angular 2 in your project for seamless integration

Currently in the process of setting up Angular with npm: npm install @angular... Encountering an issue where the TypeScript source files are not included. I would like to have access to debug the code using the TypeScript source files (with source maps). ...

javascriptdebuggingangularnpm

Revolutionary Knockout-Kendo MultiSelect Feature: Pressing Enter Erases Previously Selected Options

When using the Knockout-Kendo MultiSelect control, I have encountered an issue. If I select a value from the list, then enter a second value and press enter, the previously entered values are removed. VIEW <select data-bind="kendoMultiSelect: { da ...

javascriptjqueryknockout.jsknockout-kendo

Exploring the significance of a super in Object-Oriented Programming within JavaScript

During my studies of OOP in JS, I encountered the super() method which serves to call the constructor of the parent class. It made me ponder - why is it necessary to invoke the parent class constructor? What significance does it hold for us? ...

javascriptoop

When sending a request from Vue.js using Axios to PHP, the issue arises that the .value property is

There is a chat box with bb smileys underneath. Clicking on the smileys adds them to the text in the input box. However, when using axios to post, the array is empty. Manually entering the smiley bbcode works fine. <input id="txtName" @keyup.enter="ad ...

javascriptvue.jsaxios

unable to reach the factory through the controller

In my AngularJS application, I've developed a factory called 'paging' that provides numbers for pagination. expenseApp.factory('paging', function() { this.pages = function(min, max, step) { if (max <= 5) { min = 1; ...

angularjs

"Exploring the power of NodeJS with createServer, dealing with

Can instances of global.request potentially collide in this NodeJS scenario? I have a basic web server set up in NodeJS where I am globally exposing the request that is created: http.createServer(function(req, res) { global.request = req; // do ...

javascriptnode.js

Implementing a language switch feature for text display in Node.js and Next.js websites

One of the features my client is requesting for a web app is dual language support, where users can easily switch between French and English. To address this requirement, I incorporated a button that toggles a state and saves the user's language pref ...

javascriptnode.jsnext.jsgoogle-translate

How can I verify if my discord.js bot has the necessary permissions from a server or channel?

I need to verify two things: Determine if my bot has a particular SERVER permission (return true/false based on the presence of that permission) Confirm if my bot possesses a specific CHANNEL permission (return true/false depending o ...

javascriptnode.jsdiscord

Transferring information to a partial view using a jQuery click event

In my Index view, there is a list of links each with an ID. My goal is to have a jQueryUI dialog box open and display the ID when one of these links is clicked. Currently, I am attempting to use a partial view for the content of the dialog box in order to ...

javascriptjqueryasp.net-mvcjquery-ui

Is it possible to modify the inline onkeyup function?

Looking for a solution to change the onkeyup function in a textarea element from 255 characters to 150 characters without directly editing the code? <textarea cols="50" rows="4" id="textbox" onkeyup="limitArea(this, 255, '')"></textarea ...

javascriptjqueryhtml

How to display the compilation date in npm

During npm run watch is running in the background, I can see a recompilation process every time I make a change to the jsx code. Is there a way for npm to display the last time a jsx file was compiled? Thank you ...

javascriptnpmjsx