Is there any way to update the option(s) of datetimepicker dynamicaly ?
In my case, on start, i setting my "busy dates" array in the option **disabledTimeIntervals ** of the plugin. It working fine but when I change my differents dates, I update the "busy dates" array and I try to set new option disabledTimeIntervals by passing the updated array each time I change the date like this :
$scope.options = {
locale: 'fr',
sideBySide: true,
format: 'DD/MM/YYYY à HH:mm',
useCurrent: false,
daysOfWeekDisabled: [0, 6],
stepping: 15,
disabledTimeIntervals: $scope.getBusyDates(),
ignoreReadonly: true
};
element.datetimepicker(eval($scope.options));
Unfortunatly that doesn't work and datetimepicker ignore my news settings ... How I can force datetimepicker to review the options when I want ? thank's
Response : For set this new option I have to use the Option function : (http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#options)
So, the correct syntaxe response is :
element.data('DateTimePicker').options(eval(scope.options));
Related
I have the below code in a cakephp templage
echo $this->Form->input('Applicant.application_date',array('between'=>$star,))
the value from the database is a date type and the form displays it as a series of dropdown for the month date and year
how do i make it display as a date picker or just an input box with values in the format DD/MM/YYYY
To display a datepicker, you can add a piece of javascript.
Here is a sample with jquery :
Template:
$this->Form->control("horaire",[
'value'=>$horaire
]);
Javascript part:
$("#horaire").datetimepicker({
dateFormat : "dd/mm/yy",
timeFormat: 'HH:mm',
hourGrid : 4,
minuteGrid : 10,
stepMinute: 5,
hour : 20,
minute : 0
});
I am using ExtJS 6 (although from what I can tell it applies up to version 7.4 as well) and I have a grid with a booleancolumn xtype. For that boolean column I wanted to use the filter list option. Yes I know there is a boolean filter option however I don't like how it works using a radio button. I wanted to be able to select the Yes or No with checkboxes, however I found that only the option with true as the value worked. Here is my column config:
{
header: 'Active'
, dataIndex: 'inactive'
, xtype: 'booleancolumn'
, trueText: 'No'
, falseText: 'Yes'
, filter:{
type: 'list',
options: [[true,"No"],[false, "Yes"]]
}
}
This didn't work when excluding the 'options' property and letting it get the data from the store either by the way. After looking through the code I discovered that it takes the 'options' config and creates its own Ext.Data.Store using that as the data. See here as a simple example that can be run that will get the same issue:
var teststore = new Ext.data.Store({
fields: [
'id',
'text'
],
data: [[true,"No"],[false, "Yes"]]
});
The problem is that the 'false' boolean value is changed and is replaced with a dynamically created generic id. I discovered the issue lays in the constructor for 'Ext.data.Model' for the following line:
if (!(me.id = id = data[idProperty]) && id !== 0) {
If that line evaluates to true it will replace the id with the generated one. To fix this I just added ' && id !== false' to the end of the if statement and this fixed the issue.
I have not tested this fully, however the logic seems sound and it looks like the same type of issue occurred with the value of '0' hence the ' && id !==0'. Since we are directed here from the sencha forums I wanted to bring this up in case it helps someone.
Since my post already has the answer I will post a better way to do it other than directly changing the Ext code file (whether this is the proper way I may be wrong). Instead, you can create a new js file that will need to be included in your application (you can name it ext-overrides.js). In the new js file you need only type:
Ext.override(Ext.data.Model, {
constructor: function(data, session) {
.....
}
}
You would then copy the constructor function code from your version of the ExtJS code in where the '.....' is (if perchance the constructor function arguments are different you would have to update those as well) and just add the suggested change I made above in the 'question'. A search of the Extjs code for Ext.define('Ext.data.Model' should get you there easily and then just scroll to the constructor function.
I have a ng-multiselect dropdown. When I select all the values Instead of displaying all the values from the dropdown It should just display "All" in the dropdown.
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: false
};
When selected all the dropdowns it should display 'All' in the dropdown
you can try by changing the value of dropdowns.value with "ALL" when you select all options.
and you can do this in this event (onSelectAll).
In .ts file:
onSelectAll(event){dropdowns.value="ALL"}
It seems you have done some changes in node_module and you are not able to get changes in build. It's common in angular. Angular will not get your custom changes in the production build.
If you your custom changes works fine then use this command to make a build. With the help of this command you will get your changes in build.
ng build --aot=false
I have tried a lot for implementing the same but couldn't find any solution as it is already built library.
I've found an alternative for it. Set the itemShowLimit to 0, this means there won't be any item to display. In that case, add a span right next to the multiselect dropdown and adjust the position accordingly. Worked for me :)
Sample code:
In .ts file:
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 0,
allowSearchFilter: false
};
In HTML File:
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
><span>All</span>
I have customized display as I wanted to show the number of items selected: https://i.stack.imgur.com/BsmRN.png
I'm a newbie at angularjs and facing a problem.
I'm using an angular calendar (not a creation of mine).
Passing an object array (events) is mandatory for using it's directive in my code.
In templates of this plugin I can "consume" this array of object.
My issue is located here.
The array (eventArray) is composed of object like this one:
currentEvent = {
_id: bookingArray[i]._id,
private: bookingArray[i].private,
space: space_name,
user: user,
isOwnBook: $scope.connected_user._id === user._id,
title: resource_title,
startTime: new Date( bookingArray[i].ts_start),
endTime: new Date( bookingArray[i].ts_end),
allDay: false,
deleted: false,
};
Let's say I log each currentEvent.title in the array, console would be like this:
RoomA RoomB RoomC RoomA RoomB RoomZ ...
I want to create a div each time the currentEvent.title is different.
<span ng-repeat="currentEvent in dt.eventArray">{{currentEvent.title}}</span>
This previous code should print only:
RoomA RoomB RoomC RoomZ
How should I proceed in order to obtain this behavior ?
Best regards !
I manage to find out a solution.
You need to install angular-filter first.
Then the code in the template is like this:
<span ng-repeat="(key, value) in dt.eventArray | groupBy: 'title'">{{key}}</span>
And finally you get as many span as title variation
I have simple chart with x-axis lables and tooltips,
the date of the months on the tooltips are correct while the months on the x-axis labels is one month behind.
when i change the time zone from GMT+2 US East to UTC-5 the issue resolved.
i also added the following global options useUTC, but it has no affect.
you can see the GMT+2 results in JSFiddle, when you change your timezone, to utc it will resolved.
Highcharts.setOptions({
global: {
useUTC: true
}
});
Any help will be appreciated. (http://jsfiddle.net/liad/uVZ4Z/)
I use highcharts, angularjs and highcharts-ng.
I added the following options (it works for me):
Highcharts.setOptions({
global : {
useUTC : true,
timezoneOffset: -2 * 60 //GMT +2
}
});
Honestly, I don't know how to set global options in highcharts-ng. Is that enough:
$scope.chartConfig = {
global: {
useUTC: true
},
Anyway, I'm in UTC+2h and I see chart properly, Apr for first column (and the same in a tooltip).
It seems this option is not developed at this moment. So have to use Highcharts object directly.
For example, put that code in any of your Angular's config section:
Highcharts.setOptions({
global: {
useUTC: true
}
});