AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days

I'm brand new to Angular and currently encountering some issues.

Here's what I'm trying to create:

  1. I need to display the current Date: yyyy-MM-ss (Functional)
  2. I want to show the current Calendar Week: yyyy-Www (Not Working)
  3. When a button is clicked, I want to add 10 days to today's date. (Only works for point 1)

CODE: JSFiddle

HTML

<div ng-controller="MyCtrl">
<div>
    DateToday<br>
    <input type="date" placeholder="yyyy-MM-dd" value="{{today | date :'yyyy-MM-dd'}}"><br><br>

    CalendarWeek:<br>
    <input type="week" placeholder="YYYY-W##" value="{{today | date :'yyyy-Www'}}"/><br><br>

    <input ng-click="add10Days()" value="Add 10 Days" type="button"/>
  </div>
</div>

JS/AngularJS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

$scope.today = new Date();

$scope.add10Days = function () {
      var numberOfDaysToAdd = 10;
      $scope.today.setDate($scope.today.getDate() + numberOfDaysToAdd);
  }; 
});

I suspect it might be related to the week format yyyy-w## or possibly the browser (Chrome) I'm using. Any help would be greatly appreciated :)

Thank you

Answer №1

  1. 'ww' filter is only compatible with Angular 1.3 and above, but it seems like you are using version 1.0.1
  2. Everything appears to be in order in the demo. You can view the GIF below for reference:

https://i.stack.imgur.com/RLwFn.gif

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

Troubleshooting Coffeescript Jasmine-Node Tests in Webstorm/Intellij

Using node-jasmine 2 beta4 and writing in Coffeescript, I have successfully set up my tests to run in Intellij 13.1 by configuring the following Run Settings: Node interpreter: /usr/local/bin/node Working Dir: [Project Directory] Javascript File: node_mo ...

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...

Tips on optimizing website performance by implementing lazy loading for images and ensuring they are ready for printing

Many websites feature an abundance of images, prompting the use of lazy loading to enhance load times and reduce data consumption. But what happens when printing functionality is also required for such a website? One approach could involve detecting the p ...

Navigating through the additional plugins in WebDriver

After installing a plugin in Chrome, the next step is to access it through webdriver. Here's how you can do it: File addonpath = new File("path of .crx file"); ChromeOptions chrome = new ChromeOptions(); chrome.addExtensions(addonpath); WebDriver dri ...

Transferring a DOM element to a different window while preserving event listeners in Internet Explorer 11

I am tasked with creating a webpage feature that allows users to detach a section of the page and move it to a new window on a second monitor, then reattach it back to the main page. The detached section must retain its state and event listeners during the ...

Choose from the options provided to display the table on the screen

One of the challenges I am facing involves a table with two columns and a select option dropdown box. Each row in the table is associated with a color - green indicates good, red indicates bad, and so on. My goal is to have all values displayed when the pa ...

Should the use of readFileSync() during the initialization of a Node.js web application be avoided?

I have a Node app that serves web pages with static HTML-snippet files included conditionally. I am considering implementing a cache map for these snippets by adding the following code to my Express's app.js file: var cache = Object.create(null); cac ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

Sorting Data in AngularJS with Custom OrderBy Function

As I delve into defining my custom sorting function with the help of the tutorial provided at http://docs.angularjs.org/api/ng.filter:orderBy, I am faced with an intriguing challenge. Before delving into the code itself, let me elaborate on the anticipate ...

Is it possible to divide a column in an HTML table into two separate

I am currently working with an array of elements that I need to iterate over. For each element, I create a <td></td> tag. When dealing with 10 elements, it results in a table with one column and 10 rows. Is there a method, using either HTML o ...

Optimal row settings for different reports using Material-UI table pagination

Recently, I've been exploring an example involving material-ui's TablePagination. In this scenario, they present a useTable component with the following code snippet: import React, { useState } from 'react' import { Table, TableHead, Ta ...

I'm having trouble with the calculator, unable to identify the issue (Typescript)

I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...

Encountering issues when trying to build a Nestjs app with node-crc (rust cargo) in Docker

I am encountering an issue with building my Nest.js app using Docker due to a dependency called "node-crc" version "2.0.13" that fails during the docker build process. Here is my Dockerfile: FROM node:17.3.1-alpine RUN curl https://sh.rustup.rs -sSf | sh ...

JavaScript Error: Unable to determine the value of a null property

Is there a way to validate the user's input in real-time on an HTML form? Take a look at the following HTML code: <div class="col-md-2"> <input class="form-control" name="nbequipement" id="nbequipement" placeholder="" type="text"> ...

The scroll function is executed only one time

I'm currently working on implementing a sticky sidebar snippet using jQuery. However, I am facing an issue where the function within .scroll() is only executing once instead of on every scroll event. Can anyone help me identify what I might be doing i ...

Unable to retrieve res.user.username while using passport within express-session

I'm currently diving into the realm of creating sessions with Passport.js and Express.js. My goal is to retrieve the username from a user stored in a session using res.user.username, but I seem to be facing some challenges. Below is the snippet of m ...

Utilizing the power of jQuery's $.each method to dynamically generate HTML select options within an AJAX

I am working with a bootstrap modal that includes a form which requires data from the database. To retrieve this data, I am using PHP as shown below: public function get_view_for_inspection_report_belum_eor(){ $q = $this->inspection->get_view_fo ...

Best practice for integrating Typescript into an established ASP.NET 4 Webforms project

Currently, I am working on an older asp.net 4.0 Webforms project using Visual Studio 2015. My goal is to transition from using Javascript to TypeScript for certain client side code tasks. While I have experience using TypeScript in projects outside of Vis ...

When I pass a date from Angular to C#, I receive a default datetime value

When sending a date through Angular and C#, I am encountering an issue where I receive an unintended default date from datetime. For instance, if I send 05/06/2022 in C#, I end up receiving {01/01/0001 00:00:00}. Is there a way for me to retrieve the orig ...

How come the gridApi.on.edit.beginCellEdit function in angular-ui-grid does not immediately refresh the dropdown options after being updated?

I am encountering a similar issue as described in this post Regarding the assignment of ui grid value drop-down box before beginCellEdit event fires in Angular However, I have noticed a slight difference. Even after updating the editDropdownOptionArray, th ...