AngularJS Datepicker with parentheses in the Controller.js

I recently started working with angularJS in Brackets and I am attempting to implement a datepicker from https://codepen.io/anon/pen/ZvVxqg

However, when I paste the JS file into my controller.js in Brackets, an error occurs.

Below are the code snippets that I have inserted into my controller.js, but for some reason, it is not functioning correctly:


.controller('reservationCtrl', ['$scope', '$stateParams', 
function ($scope, $stateParams) {

   $("html").click(function() {
  if ($("#icon_calendar").width() != 80) {
    ok = 0;
    $("#icon_calendar").css({
      width: 80,
      height: 80,
      borderRadius: "18px",
      marginLeft: -40,
      marginTop: -40,
      animation: "bounce2 0.3s",
      cursor: "pointer",
      transform: "scale(1)"
    });
    $(".mois").css({ display: "none", fontSize: 14, width: 80 });
    $(".days").css({
      fontFamily: "'openlight',sans-serif",
      display: "none",
      backgroundColor: "transparent",
      color: "#3C3C3C"
    });
    $("#month_wrap").css({
      backgroundColor: "transparent",
      color: "#F05252"
    });
    $("#month" + mois_choisi).css({ marginLeft: 0, display: "block" });
    $("#day" + jour_choisi).css({
      position: "absolute",
      fontSize: 30,
      width: "100%",
      display: "block"
    });
    $(".fleches_mois").hide();
    console.log("eee");
  }
});

$("body").on("click", "#icon_calendar", function(event) {
  event.stopPropagation();
  if ($(this).width() == 80) {
    ok = 1;
    .
    .
    .
    .
    .   


setTimeout(function() {
  $("#day" + jour_choisi).css({
    position: "absolute",
    fontSize: 30,
    width: "100%",
    display: "block"
  });
}, 10);



}]);

Any assistance would be greatly appreciated.

Answer №1

To ensure that code functions correctly, place it within a directive:

<div my-date-picker id="icon_calendar">
    <!-- date picker html -->
</div>
angular.module('myApp').directive('myDatePicker', [
    function () {
        "use strict";
        return {
            restrict: 'A',
            link: function ($scope, $elem, $attrs) {
                // include date picker code here
            }
        }
    }
]);

Remember to connect it to your model as well.

If you're hesitating to use this method, have you considered utilizing other date pickers with seamless integration such as:
Angular-UI Bootstrap DatePicker (for Angular 1) ng-bootstrap DatePicker (for Angular 2+)

By the way, the provided code pen is based on an outdated version of angular 1.0.4 but can still function properly up until angular v1.4

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

Should commas be used in variables?

Could this be converted in a different way? $('#id').testfunction({ 'source' : [ {'source':'pathimage.jpg','title':'Title 1','description':'This is a description 1.'}, ...

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Upon loading the server side rendered page, data is fetched on the server and passed to client side components. To handle this process, a hook has been created with a state that updates based on checkBox changes. When the state changes, a useEffect is tri ...

Observing a sessionStorage variable within AngularJS version 1.0.7

Is there a way to monitor a sessionStorage variable in AngularJS 1.0.7 without relying on a directive? For example: $scope.$watch("sessionStorage.getItem('OfferStore_items')", function() { console.log("New offer"); ...

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

I need to utilize JavaScript to locate and substitute a word that has been separated into multiple tags. For instance, consider the following HTML code: <html> <body> <div id="page-container"> This is an apple. ...

Execute PHP script after successful AJAX response

I've been struggling to find a solution for this issue. I have an Ajax function that continuously loops, waiting for a specific variable value. Once the variable is not equal to 0, I need to send the data to another script to update the database and t ...

Is it possible to implement pagination for loading JSON data in chunks in jsGrid?

Currently, I am utilizing jsgrid and facing an issue with loading a JSON file containing 5000 registries into a grid page by page. My goal is to display only 50 registries per page without loading all 5000 at once. Even though I have implemented paging in ...

HTML Navigator encountering Javascript Anomaly

Here is the code snippet I'm working with: driver = new HtmlUnitDriver(); ((HtmlUnitDriver) driver).setJavascriptEnabled(true); baseUrl = "http://www.url.com/"; driver.get(baseUrl + "/"); ... However, whenever I ...

JavaScript has been used to modify a cell's URL in jqGrid

Currently, I am utilizing struts2-jqgrid along with JavaScript. After the jqgrid has finished loading, it retrieves <s:url var="updateurl" action="pagosActualizar"/>. Subsequently, in the HTML view source, jqgrid generates options_gridtable.cellurl = ...

Node.js Objects and String Manipulation

Within my nodeJS scenario, I am working with an object that includes both elements and an array of items: var Obj = { count: 3, items: [{ "organizationCode": "FP1", "organizationName": "FTE Process Org" }, { "organizationCode ...

The XMLHttpRequest() function throws NS_ERROR_FAILURE when sending requests to localhost using either an absolute or relative path

Encountering an error in Firefox 31 ESR: Error: NS_ERROR_FAILURE: Source file: http://localhost/Example/scripts/index.js Line: 18 Similar issue observed on Internet Explorer 11: SCRIPT5022: InvalidStateError The script used for AJAX function call i ...

Capturing screen captures while using Protractor on BrowserStack

Greetings! I am currently in the process of capturing screenshots using protractor and browserstack, and I have the following conf.js file: var HtmlReporter = require('protractor-html-screenshot-reporter'); var reporter=new HtmlReporter({ b ...

Text field auto-saving within an iFrame using localStorage is not functioning as expected

My goal is to create a rich text editor with an autosave feature using an iframe. Although each code part works individually, I am struggling to combine them effectively. View LIVEDEMO This graphic illustrates what I aim to accomplish: The editable iFram ...

Ways to retrieve class variables within a callback in Typescript

Here is the code I'm currently working with: import {Page} from 'ionic-angular'; import {BLE} from 'ionic-native'; @Page({ templateUrl: 'build/pages/list/list.html' }) export class ListPage { devices: Array<{nam ...

Utilizing Ajax to dynamically load files within the Django framework

My current project involves working with Django, specifically a feature that requires loading a file and displaying its content in a textarea. Instead of storing the file on the server side or in a database, I am exploring the use of AJAX to send the file ...

JSTree Drag-and-Drop Feature Fails to Follow Return Command

Hey everyone, I could really use some assistance with a problem I'm facing. I am trying to populate a JStree with three different node types. Folder Project Job I have set up some rules for drag and drop functionality between these nodes: Folders ...

How to securely upload and generate a permanent link for the contents of a zip file using express js

I am new to Javascript and Node JS. I have a challenge of uploading a zip file containing only pictures and creating permanent links for these pictures. Currently, I can upload a zip file and extract its contents using the following code snippet: var expr ...

Choosing a recently inserted row in jqGrid

After reloading the grid, I am trying to select the newly added row, which is always added at the end. However, it seems impossible to do so after the reload. Is there a reliable way to select the last row after reloading the grid? The current code I have ...

Tips for maintaining the JSON data on my server up-to-date

I have a question about my architecture. My backend system is built using Spring MVC with MongoDB. The JSON objects are exchanged between the backend and frontend, with the frontend being developed in HTML + AngularJS. None of the processing on the fronten ...

Having trouble accessing the latest props within a setInterval in a React functional component

I'm facing an issue where I can't seem to access the updated prop within setInterval inside Component1; instead, it keeps showing me the old value. Here's the code snippet I'm working with: import { useState, useEffect } from "reac ...

Make a POST request including a JSON object that contains a file

My JSON object is structured as follows: const people = { admin: { name: 'john', avatar: { img: File } }, moderator: { name: 'jake', avatar: { img: File } } }; The img property is a File obj ...