Check out my code snippet below:
When the datepicker loads initially, it appears empty.
However, if you remove ng-model from the directive template, the datepicker displays its initial value correctly. Yet, changing the selected date does not mark the form as dirty.
Is there a way to set the initial value while still being able to trigger $dirty for the Angular form?
It's likely due to the directives being nested within each other (your custom directive wraps the telerik directive which then wraps the jquery directive). To resolve this, make the following manual changes:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div ng-form="testform">
{{testform.$dirty}}
{{dateAttach}}<br />
<my-datepicker form="testform" ng-model="dateAttach" required></my-datepicker>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.dateAttach = new Date(1444015467000);
}).controller('DatePickerCtrl', [
'$scope', function($scope) {
$scope.$watch('date', function(oldVal, newVal) {
if(oldVal != newVal){
$scope.form.$dirty = true;
}
});
}
]).directive('myDatepicker', [
function() {
return {
restrict: 'E',
scope: {
date: '=ngModel',
form: '='
},
controller: 'DatePickerCtrl',
template: '{{date}}<br /><input kendo-date-picker="datePicker" k-ng-model="date" k-ng-delay="date"/>'
};
}
])
This updated version should help resolve any nesting issues with the directives.
There is an issue with the GPA calculator app built using Node.js and Express. It works fine for a single user, but when multiple users try to use it simultaneously, the scores are being combined, resulting in incorrect values. I need to create an app that ...
Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...
I've got a collection of appointments and I need to create a React view that will show them one by one. Users should be able to navigate through the appointments using arrow buttons. Here's an example of what the data looks like: const arr = [ ...
I am facing an issue with the redirect URL I received from Google OAuth2: http://localhost:997/?#state=pass-through%20value&access_token=ya29.ImC6B1g9LYsf5siso8n_UphOFB0SXc5dqsm6LqHRWXbtNHisEblxjeLoYtGgwSVtCTGxOjjODiuTyH7VCHoZCEfUd_&token_type=Bea ...
I am in the process of creating a constructor function using JavaScript. This constructor needs to be asynchronous because I am utilizing the Phantom JS module for data scraping. As a result, an asynchronous function must be used to scrape data through Pha ...
I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...
What is the process for updating or editing meta fields to display multiple images of each product on Shopify? ...
I am working on a form that requires validation before submission, and I need to display error notifications without refreshing the page. Below is the code for the form: <button name="save" type="submit" form="product_form" ...
As the title suggests, I am working on an application that generates a link using mongoose _id and express's app.get when certain information is inputted. However, I am facing an issue where I have to reload the entire server in order to access the di ...
I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...
I need to compare each row with a specific row and highlight the border accordingly: <table *ngFor="let Question from Questions| paginate: { itemsPerPage: 1, currentPage: p }"> <tr><td>emp.question</td></tr> <tr> ...
Can someone please explain the process of connecting two parts? Specifically, I am using Angular CLI for the front-end and Python for the logic. My goal is to send text responses from the front-end to my Python back-end and receive a response in return. ...
I am dealing with a log file that contains lines structured like this: [Thu Mar 30 2017 11:24:51 GMT+0100 (WEST)] {"serial":"CA-2M-1107619","type":"iface","body":{"action":"up","device":"tun_man","ip":"127.255.0.10","ip6":"2016:900d:c0de::1001"} My goal ...
Seeking assistance with setting up connect-flash for my nodejs express app. My goal is to display a flashed message when users visit specific pages. Utilizing ES6 package module type in this project, my code snippet is as follows. No errors are logged in t ...
The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize ...
I'm trying to retrieve data from a configuration file (.properties) in my code. The structure of my configuration file is as follows: maxTime = 60 upVotePostMaxTime=60 However, I am unsure of how to read this configuration file using JavaScript. Is ...
I am currently in the process of creating a compact NPM package. Here is a basic prototype: function bar() { return 'bar'; } module.exports = bar; This package is meant to be compatible with web browsers as well. To achieve this, I have inst ...
Hello there, I am a beginner working with react and I could really use some help with the issue below. Can you assist me? I am trying to figure out how to populate or check/uncheck checkboxes based on an Array's result. Specifically, I want to have ...
From my understanding, webpack in dev mode stores all imported files in a certain location and then serves the bundle.js file to the client. If the code inside bundle.js requests a CSS file, the css-loader should have already been configured to provide t ...
Looking for: I am in need of a feature where users can input a movie title in a textbox and upon clicking the "move to selectedlist" button, the entered movie title should be added to a dropdown list that displays all the movies selected by the user. Addit ...