I want to set the background color of the active date. The default value is blue and I want to set it green. Any idea how I can achieve that?
I use the datepicker below:
Library
This is my code:
html:
<ng-datepicker [options]=option [(ngModel)]="date"></ng-datepicker>
ts:
this.option = {
minYear: 1970,
maxYear: 2050,
displayFormat: 'MM.DD.YYYY',
barTitleFormat: 'MMMM YYYY',
dayNamesFormat: 'dd',
firstCalendarDay: 1, // 0 - Sunday, 1 - Monday
locale: deLocale,
//minDate: new Date(Date.now()), // Minimal selectable date
//maxDate: new Date(Date.now()), // Maximal selectable date
barTitleIfEmpty: 'Wähle ein Datum aus',
placeholder: 'Wähle ein Datum aus', // HTML input placeholder attribute (default: '')
addStyle: {
}, // Optional, value to pass to [ngStyle] on the input field
fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
useEmptyBarTitle: false, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown
};
Adding the following to your component's CSS would make the current day have a green background
span.day-unit.is-today.is-selected {
background-color: green !important;
}
Related
I'm triggering onBlur javascript function to turn the border of inputs red if the entry is invalid.
This is working fine except for Datepicker.
I can style its border using classname but I need to use inline style to make it change depending on what is input. How can I do this?
My code:
state= {
borderColors:{
startDetails: 'none',
}
}
borderColor = (e, field) => {
e.preventDefault()
let borderColors = this.state.borderColors
e.target.value === '' ? borderColors[field] = 'tomato' : borderColors[field] = '#00988f'
this.setState({borderColors})
}
<DatePicker
className="datePicker"
timeIntervals={15}
selected={values.startDetails}
onBlur = {event => this.borderColor(event, 'startDetails')}
onChange={(event) => this.props.changeField(event, "startDetails")}
showTimeSelect
dateFormat="d MMM yyyy HH:mm"
required
placeholderText={'Date & Time Event Starts'}
style={{borderColor: this.state.borderColors.startDetails}}
/>
I worked around this by deleting the border around datePicker by setting its width to zero in css file.
Then I wrapped datePicker in a div, gave it a border and set an inline style in the div to set the border color according to the value in state that is set by the function
I have a template with multiples class using one color, can I dynamically change that color to another using javascript?
When the page loads, locate all the div, span, p, h, with color #512a69 and change it to #ef7e8e.
Is it possible?
Thanks.
Here is a solution which I'll explain step-by-step.
First, call colorReplace("#512a69", "#ef7e8e");. The first value is the target color, and the second is the replacement color.
Inside it, $('*').map(function(i, el) { will select all tags in the DOM tree. For each element, its getComputedStyle(el) styles array is returned. You can customize the selector for faster processing (e.g. $('div').map(function(i, el)) {).
All style attributes containing "color" (e.g. background-color, -moz-outline-color, etc.), it will be checked if the color value is equal to your target color. If so, it will be replaced with the target color.
Colors are returned like rgba(0,0,0,0) or rgb(0,0,0), not like #FFFFFF, so a quick conversion is done from rgb to hex for the comparison. That uses the internal rgb2hex() function.
I hope this is what you are looking for.
function colorReplace(findHexColor, replaceWith) {
// Convert rgb color strings to hex
// REF: https://stackoverflow.com/a/3627747/1938889
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
// Select and run a map function on every tag
$('*').map(function(i, el) {
// Get the computed styles of each tag
var styles = window.getComputedStyle(el);
// Go through each computed style and search for "color"
Object.keys(styles).reduce(function(acc, k) {
var name = styles[k];
var value = styles.getPropertyValue(name);
if (value !== null && name.indexOf("color") >= 0) {
// Convert the rgb color to hex and compare with the target color
if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
// Replace the color on this found color attribute
$(el).css(name, replaceWith);
}
}
});
});
}
// Call like this for each color attribute you want to replace
colorReplace("#512a69", "#ef7e8e");
Source: https://stackoverflow.com/a/30724171/1136132
I am using the Jquery datepicker and everything is working fine and all styled how i want apart from any events i have in the database.
I would like any day that has an event to have a style using .my_class so instead of the default styling, it has a different colour. I would like this to apply for days that are in other months so if there's an event on the 1st of the next month, then style that.
I have used this to style the days of the other months to how i want but using something similar for the days with events doesn't work.
This works by changing the background colour of the other months
.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
background: #fff;
color: #b4b3b3;
}
This doesn't work
.ui-datepicker-other-month.ui-state-disabled .my_class span {
background: #f00;
color: #b4b3b3;
}
This is the jquery for the datepicker and adding .my_class to any table cells that have an event
var selected_dates = new Array();
// gets all the events from the database using AJAX
selected_dates = getSelectedDates();
$('#datepicker').datepicker({
inline: true,
dateFormat: 'yy-m-d',
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: function (date)
{
// gets the current month, day and year
// Attention: the month counting starts from 0 that's why you'll need to +1 to get the month right
var mm = date.getMonth() + 1,
dd = date.getDate(),
yy = date.getFullYear();
var dt = yy + "-" + mm + "-" + dd;
if(typeof selected_dates[dt] != 'undefined')
{
// puts a special class to the dates in which you have events, so that you could distinguish it from the other ones
// the "true" parameter is used to know which are the clickable dates
return [true, " my_class"];
}
return [false, ""];
},
onSelect: function(date)
{
// puts the event's title in the dialog box
$("#dialog").attr("title",selected_dates[date]['event_title']); // for the first time you open the popup
$("#dialog").dialog("option","title",selected_dates[date]['event_title']);
// puts the event's description text in the dialog box
$("#dialog").text(selected_dates[date]['event_description']);
// show the dialog box
$("#dialog" ).dialog();
}
});
Removed the space, maybe? Not sure what you rly mean tho..
.ui-datepicker-other-month.ui-state-disabled.my_class span {
background: #f00;
color: #b4b3b3;
}
I have a datefield xtype mentioned in my grid's date column editor, once I select any date from the picker, as long as I don't click outside or press Enter, the date is displayed in the default format i.e. 'd/m/Y' (meaning dd/mm/YYYY). But as soon as I click outside of the cell or press enter it changes to an entire date containing the timestamp as well. How do I not let this happen? I want to keep it in d/m/Y format and don't want time or day to be displayed.
Here is an example of what it becomes once I press enter.
Tue May 28 2013 00:00:00 GMT +0530 (India Standard Time)
I want it to be
28/05/2013 or Tue 28/05/2013
How to do this?
My configuration for the column is given below
editor: {
xtype: 'datefield',
anchor: '100%',
format: 'd/m/Y',
submitFormat: 'd/m/Y',
minValue: new Date()
}
1 Define the date field in your model -
{name: 'date', type: 'date', dateFormat: 'Y/m/d'}
2 Use the following in columns config of the grid, in which you are using the date picker -
{header: 'Date', xtype:'datecolumn', width: 200, dataIndex:'date', editor:{xtype: 'datefield', format:'Y/m/d', allowBlank:'fasle'}}
Please refer below code and let me know whether it works!
editor: {
xtype: 'datefield',
anchor: '100%',
format: 'd/m/Y',
submitFormat: 'd/m/Y',
minValue: new Date(),
listeners : {
render : function(datefield) {
// code to convert GMT String to date object
datefield.setValue(new Date());
}
}
}
Thanks
When you use a date field, it sets a date type on the model.
Use a renderer on the grid cell (assumes the field is of type date):
{
xtype: 'datecolumn',
dataIndex: 'myDate',
text: 'Date',
format: 'Y-m-d'
}
Hello
I'm new to Ext JS and I have created grid whidth folowing fields
columns: [
{
header : 'Firs name',
width : 200,
sortable : true,
dataIndex: 'firstName'
},
{
header : 'Last name',
width : 200,
sortable : true,
dataIndex: 'lastName'
},
{
header : 'Favourite color',
width : 195,
sortable : true,
dataIndex: 'favouriteColor'
}
],
Values will be generated in php.
I have to make that when user doubleCllick on any row, that row's background color turns into user's favourite color (Red, Blue, Yellow).
So far I've done that
grid.on('rowdblclick', function(grid,index,e) {
alert(index);
});
... I got the index of the clicked row, but I don't know how to change its background color. Will appreciate any help.
You need to make use of the GridView object to get the DOM of the selected row. And apply CSS with your favorite color onto that row. First you need to create few CSS classes:
.redrow {
background-color: red !important;
}
Similarly for blue and yellow. Next you need to get the row and add the CSS class to the row.
grid.on('rowdblclick', function(grid,index,e) {
var color = grid.getStore().getAt(index).get('favouriteColor');
if(color == 'red')
Ext.fly(grid.getView().getRow(index)).addClass('redrow');
else if( color == 'blue')
Ext.fly(grid.getView().getRow(index)).addClass('bluerow');
.
.
.
});
If you are trying to change the gird row background color according to the the favouriteColor column, you need to use another technique. You can make use of the ViewConfig and implement the getRowClass method as shown below:
viewConfig: {
forceFit: true,
getRowClass: function(record, index,prarms,store) {
var color = record.get('favouriteColor');
if(color == 'red')
return 'redrow';
else if(color == 'blue')
return 'bluerow';
else if (color == 'yellow')
return 'yellowrow';
else
return;
}
}
The ViewConfig is used along with the grid declaration. You don't make use of the return value of the getRowClass. The framework makes use of the return value. You only need to write logic for selecting the right CSS class for the row. getRowClass method can be used if you are need to display the background colors when the grid is rendered. It cannot be used during user events or after the grid is rendered.
In your case, you don't need this method because you are changing the color of the row when the user double click the row right? So, you can refer to the first part for the answer where you change the row's background according to the favouriteColor value for that row.