Set default date input in Ionic to be today's date

I'm currently developing a project using Ionic framework and I need to set a default date (which is today's date) on an input field.

My code works perfectly when the input type is set to text, but it doesn't work if I specify the type as date.

This is the HTML code snippet:

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Date with Ionic</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">

  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="GraphCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Date</h1>
  </ion-header-bar>

  <ion-content>
    Text : <input type="text" ng-model="date_rdv" />
    Date : <input type="date" ng-model="date_rdv" />
  </ion-content>

</body>
</html>

Here is my JavaScript code:

angular.module('ionicApp', ['ionic'])

.controller('GraphCtrl', function($scope, $filter) {
  $scope.date_rdv = $filter('date')(Date.now(), 'yyyy-MM-dd');
});

Any suggestions or solutions?

Link to Codepen.io

Resolution (based on Elec's response)

To set a default value on a date input field (which does not work on text input), you should define your model like this:

$scope.date_rdv = new Date();

Answer №1

It is recommended to utilize the new Date() function instead of filtering unnecessarily.

Ensure that the model is always a Date object to prevent Angular from throwing errors. Date objects with invalid getTime() values will display as empty strings.

Refer to AngularJs documentation for input[data]

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

The context provider in Next.js wraps the App component with a layout component specific to each page, resulting in data

Within my project, I have an authentication context component wrapping the main app component. Simultaneously, I am also attempting to implement a page-specific layout component based on the Next.js documentation found here. I'm unsure if my approach ...

What is the best way to loop through properties of a Typescript interface?

I am currently working with an interface called FilterData, which has the following structure: export interface FilterData { variables?: string[]; processDefinitionKey?: string; } When I make a request to the server, I receive an object named filterS ...

Step-by-step guide on uploading a template in unlayer-react-email-editor

<EmailEditor ref={emailEditorRef} onReady={onTemplateReady} /> const onTemplateReady = () => { try { const templateJson = htmlToJSON(savedData?.email?.content); console.log({ templateJson }); emailEditorRef?.current?.editor?. ...

Response received from AngularJS http get request

I am making an HTTP GET request here $http({ method: 'GET', url: baseURL + '/couponManager/createCoupon?token=' + token + query1 + query2 + query3 + query4 + query5, }).then(function successCall ...

Using a dynamic template URL in a directive

I am currently working with this directive: Directives.js module.directive('vdGuarantees', function () { return { restrict: 'A', template: '<div ng-include="contentUrl"></div>', link: ...

What is the best way to choose all elements from an array based on their key and then combine their values?

Currently, I am working on an application that allows users to read articles and take quizzes. Each article is assigned to a unique category with its own _id. Quiz attempts are stored in a separate table that references the articles, which in turn referenc ...

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

My initial plan was to log all the IDs of news in my database using console. However, when I executed the code, an error occurred as shown in this image. What is the best way to address and resolve this issue? https://i.stack.imgur.com/ci8G1.png ...

Issue with serving static files in ExpressJs

I'm facing an issue with my Express app where the static files are not working properly for certain routes. For example, when I visit '/', all styles and images load correctly as expected when the index.ejs is rendered. However, when I navi ...

Issue: When calling setState(...), you must provide either an object containing the state variables to update or a function that will return an object with the updated

Encountering an error in the else section with this.state.incorrect + 1 and this.state.correct + 1 I've come across a similar issue that wasn't resolved by visiting this link: React Native: setState(...): takes an object of state variables to up ...

Is there a way to toggle a command for a specific discord server rather than enabling it for all servers where the bot is present?

I've been working on a Discord bot with multiple commands managed by a custom command handler. However, I'm facing an issue where enabling a command affects all servers the bot is in. How can I implement a system using message.guild.id to toggle ...

Accordion checkbox with dynamic features

Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...

Utilize AJAX to accurately capture and handle error codes

Here is a snippet of code that I want to send to my server: $.ajax({ type: 'POST', url: 'post.php', data: { token: '123456', title: 'some title', url: 'http://somedomain.com', data: & ...

Servlet does not parse $http GET parameters

I'm encountering an issue where my Angular $http call is sending the userId, but the servlet is not able to receive the request parameter. I am trying to fetch the parameter using request.getParameter("userId"); Below is the code snippet for referenc ...

Whenever there is a click event triggered within the map function, it will affect every element within the collection

I am struggling to make changes to a specific item in the map function when clicked. Can someone assist me with achieving this functionality? const Product = ({categories}) => { const [active,setActive] = useState(true) function activeCat ...

The controller in AngularJS is not defined

I'm currently developing a small Angular project where I am utilizing the bootstrap calendar by mattlewis92. However, I am running into issues with my controller. Below is my .js file: 'use strict'; var app = angular.module('Calendri ...

Tips for displaying multiple results from a MySQL query in a single .ejs file using Node.js and Express

Currently diving into Node.js and working on a web application, I am faced with the challenge of rendering twice in the same .ejs file. Consider the scenario presented in the following .ejs file: <table> <% rows.forEach(function(ind){ %> /* m ...

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

Implementing AJAX requests in jQuery DataTable with ASP.NET MVC

For some time now, I have been using the jQuery DataTables 1.10.13 plugin. Recently, I encountered an issue related to the ajax data source for my HTML table. This is how I initialized jQuery DataTable inside Files.cshtml <script language="javascript" ...

The useEffect hook fails to recognize changes in dependencies when using an object type obtained from useContext

Utilizing the useContext hook to handle theme management in my project. This is how the ThemeContext.js file appears: "use client"; import { createContext, useState } from "react"; let themes = { 1: { // Dark Theme Values ...

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...