Is there a method to translate the button in the Angular UI datepicker featured in this example on Plunker? I attempted to include
close-text="{{\'lblClose\' | translate}}" current-text="{{\'lblToday\' | translate}}" clear-text="{{\'lblClear\' | translate}}"If you want to make it work, simply update the directive in this manner:
<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" close-text="closeText" current-text="curentText" clear-text="clearText"on-open-focus="false" disabled/></div>Upon further investigation into the functionality of ui-grid-datepicker, I came up with a creative workaround (as I couldn't find a straightforward solution).
You can view a modified plunker here where I altered the text of the close button: http://plnkr.co/edit/za99R9wUOcM2s2EkHLsv?p=preview
The issue lies in the fact that the modification to change the label of the Done button must be applied to the element containing the "uib-datepicker-popup" directive.
Hence, if you wish to customize the label of the Done button, you are required to modify the ui-grid-settings library (which may not be an ideal solution but appears to be necessary).
Transforming from this:
template: function(element, attrs) {
var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
return html;
},
You should alter it as follows (notably adding the close-text attribute with a parameter):
template: function(element, attrs) {
var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" close-text="' + attrs.closeLabel + '" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
return html;
},
Subsequently, in your main file app.js, transition from this:
editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'
to :
editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker close-label="' + closeLabelTranslated + '" row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'
All that's left is to assign your variable closeLabelTranslated with your desired value, perhaps utilizing the angular-translate module (though not included in the plunker):
var closeLabelTranslated = $filter('translate')('DONE');
To reiterate, this might not be the cleanest solution, but since ui-grid-edit-datepicker doesn't offer this feature out-of-the-box, manual intervention seems unavoidable.
In my exploration of HTML inputs, I have noticed a recurring pattern specifically for phone numbers: <input type="text" ng-model="CellPhoneNumber" required ng-pattern="/^[0-9]+$/" ng-minlength="10" /> I am interested in developing a unique directiv ...
I am currently developing a web application with AngularJS where the main page showcases five videos for the user to choose from and play. However, I have encountered an issue where all source video files are being downloaded for each HTML5 video element d ...
I stumbled upon this code snippet that adds a specific property value of all blocks in a nested object to an arrays array. I'm having trouble understanding how iteration is achieved in a nested object like the one shown below using a for loop. Could ...
What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...
I have searched for solutions to my problem on the topic, but haven't found one that works for me. As a newcomer to Angular 4, I am attempting to create an update/delete service using a custom external API. Initially, I encountered CORS issues which ...
Even if an exception is caught, the remaining code will still run. function problematic(){ //throw new Error('I am an exception') return Promise.reject("I am an exception") } ( async function (){ let msg = await problem ...
Here's a snippet of code for a form I'm working on: <form name="registerForm" novalidate role="form"> <div class="row"> <div class="small-3 columns"><label for="pwd" class="right inline">Password:</label> ...
After developing screens for my Android application using PhoneGap and jQuery Mobile, I have included the necessary JavaScript and CSS files in my HTML page: <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" /> <script src="js/jquery-1. ...
In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...
I recently created a webpage in ReactJS and styled it using CSS. In order to enhance the styling of one component, I integrated Bootstrap by adding the latest CDN link to my "index.html" file. However, I noticed that the Bootstrap styles were overriding ...
After searching for a solution to this issue, I still can't figure out why it's not working even though I've seen similar topics. The code I'm using is quite basic and here's an example of what's causing the problem: main.htm ...
On my HTML table, I have certain rows that I don't want to show when the page initially loads. Instead, I plan on making an Ajax request after the page has loaded to retrieve values that will fill in these hidden rows. Therefore, I only want to reveal ...
I have been attempting to create a custom list filter for input using a computed property. In one file, I am developing a widget, while in another file, I am implementing it. Below is the code snippet from the widget creation file: <template> ...
When attempting to utilize helpers, an error arises: ReferenceError: a is not defined The goal is to display home.hbs located under the views directory. The file contains: <li class="{{#if_eq title "Home"}}active{{/if_eq}}"> <a href="/">H ...
After spending more than a day on this and reading countless posts on the topic, I am still unable to make it work. My goal is to retrieve a value from a textbox (starting with a textbox for testing) in a javascript pop-up in asp.net using js / ajax. Below ...
I have been experimenting with creating a 3D piano using three.js. Here is a snippet of the code I am currently working on: let renderer, camera, scene, light, keys, selectedKey; init(); render(); function init() { // Code for initializing renderer, ...
I am currently exploring projects involving NodeJS and npm. While experimenting with foundation CLI in Foundation 6.4, I decided to install a 3rd Party JS plugin called chart.js from https://www.chartjs.org/ Following their documentation, I ran the comman ...
I have four dropdowns listed, but I only want to display one at a time. Depending on the selected values, when I try to show a dropdown, it does not replace the current one; instead, it just appears next to the existing dropdown. Is there a way to keep th ...
My webpage contains a basic Bootstrap Modal with a text input field, which I want to display when the "Report A Bug" button is clicked. <div class="btn-group" id="exampleModal" role="group"> <button id="myBtn ...
https://i.stack.imgur.com/MxAiY.png If you are facing the error/missing CSS, check out this video for a visual representation. While older versions of similar questions exist on Stack Overflow such as React + Material-UI - Warning: Prop className did not ...