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.
I am currently using Javascript and webdriverio (v2.1.2) for data extraction on an internal website. The process involves: Authentication Opening the necessary URL once authenticated Searching for an anchor tag with a specific keyword on the new page Cli ...
Currently working on creating an array of objects using jQuery. var selected_tests = $("#selected_tests").find("tr"); jsonLab = []; $.each(selected_tests, function() { jsonLab.push({ test: ($(this).children()).eq(0).text(), amount: ($(this).chil ...
Hey there, I'm currently working on an app using Laravel and VueJS. To restrict certain routes, I've implemented navigation guards. However, I'm facing an issue where I need to access Vuex mutators to determine if the current user is logged ...
I've implemented $timeout in my controller but it doesn't seem to be functioning correctly. app.controller("Friendsrequests",['$http','$log','$location','$timeout','$scope', function($http,$log,$ ...
Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land). Let's say we have a Set: mySet = new Set([{item: SomeItem, s ...
In my AngularJS project, I am utilizing the directive concept to transfer data variables from the controller to the directive. This involves creating an HTML page and setting up the controller and directive in AngularJS. Example in test.html: <div ng- ...
I'm currently exploring the usage of passport and I am in the process of setting up a "register" page functionality. The registration process is working smoothly, along with the log-in form. Yet, I am looking to implement a validation to check if the ...
I have a collection of items, let's call them Products, that I can manage using $resource. When displaying the collection on an index page, I want to show the items if there are any, and display a helpful message if the collection is empty. Controlle ...
Hey there! Just wanted to share that I was able to find a solution by using mesh.material.map.image.src = texture; Here was the original question: I'm working on a ThreeJS project and I'm trying to change the texture on a mesh. Unfortunately, I ...
When using AngularJS for clean URLs, I need to implement $locationProvider.html5Mode(true);. However, upon refreshing the page, I encounter a 404 error. I have come across suggestions to configure the server file accordingly. Directory Structure: /html ...
After establishing a connection using conn = TLS.connect, I am able to view this connection on the server side. However, when I attempt to terminate the connection by calling conn.end(), it does not actually end. The server continues to have an extra conne ...
I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...
Recently, I've been experiencing a frustrating issue that's giving me a splitting headache. Despite scouring this forum for answers, my problem persists. Here's the situation: I have a button that triggers modals. Upon first click after refr ...
For the current project, I have decided to utilize Material UI as the primary library. One of the pages in the project requires four tabs, which I am implementing using the tab component from the Material UI library. By default, when rendering the page wi ...
Is it feasible to create a modal with a blurred (transparent) background for the header section, allowing the site to show through? Additionally, can a sidebar on the left side of the modal also be transparent and blurred, revealing the site underneath? C ...
Encountering an error: Error: [$parse:syntax] Syntax Error: Token 'x.id' is unexpected, expecting [:] at column 11 of the expression [elimina({{x.id}})] starting at [x.id}})]. This is the code snippet causing the issue: <tr ng-repeat="x i ...
Is it possible to execute an AJAX call that has the potential to return either a blob or a text string based on the server's response? My current task involves using AJAX to transform a user-provided video into an audio blob that can be utilized with ...
I've been struggling to make a regular expression work properly: I need it to match anything that starts with __(' or __(" and ends with ') or ") I attempted using /__\(['"][^']*['"]\)/g and /__\([&apos ...
Here is a function I have: setLocalVariableOnAccepted(ogp, hb, responseJson) { if (responseJson.ofgp === undefined) { this.ogpStatus = 'orange'; this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous va ...
Imagine owning a popular social media platform and wanting to integrate an iframe for user signups through third-party sites, similar to Facebook's 'like this' iframes. However, you are concerned about the security risks associated with ifra ...