I am using bootstrap datepicker. I have set the minimum date of datepicker to the current date.Its working fine and i can choose dates starting only from the current date.The problem is although previous dates are disabled user cannot differentiate between the active date and disabled dates(he can do so only by hovering over the respective dates).
How can I make the disabled dates to fade so that user can understand merely by selecting the datepicker.
$('.dueDate').datepicker({
autoclose: true,
startDate: '+0d', // set default to today's date
datesDisabled:??//How can I set this option
})
You can use the startDate field to specify when you want the calendar to start, which should by default make the disabled dates look faded / unselectable.
You can also make certain days of the week disabled, like the weekends by using daysOfWeekDisabled.
For Example:
$("#datepicker").datepicker({
startDate: "dateToday",
daysOfWeekDisabled: "0,6",
todayHighlight: true,
})
Edit:
If that isn't working, it may be an issue with your css.
You could add something like this below (which should have been in your bootstrap-datepicker3.css file by default):
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
You can use this
var nowDate = new Date();
var today = new Date(
nowDate.getFullYear(),
nowDate.getMonth(),
nowDate.getDate(), 0, 0, 0, 0
);
$('#date').datepicker(
{
startDate: today
}
);
Related
I am modifying a simple datepicker.
I would like to only have the Year dropdown (Month is not required).
I have tried to remove the Month dropdown by adding the css:
select.custom-select {
display: none;
}
Unfortunately this not only removes the Month dropdown but the Year also, see below:
Please see STACKBLITZ
You can add style to the first select
#Component({
selector: 'ngbd-datepicker-basic',
templateUrl: './datepicker-basic.html',
styles:[':host ::ng-deep select:first-child{display:none;}']
})
export class NgbdDatepickerBasic {
...
}
Reference: https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-kyjfjz
The best thing to use will be Datepicker from ngx-bootstrap.
Check out this link:
https://valor-software.com/ngx-bootstrap/#/datepicker#min-mode
It has an option for display mode called min-mode, so you can't go beyond that.You can set min-mode to "year" in your case. Works beautifully!
You can use yyyy formate to only a year.Try below code.
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1,
minMode: 'year'
};
Working Demo http://plnkr.co/edit/0SPMYQ6ND7AOfZwDAFB8?p=preview
A simple solution will be to use css to hide the first select element inside ngb-datepicker-navigation-select using display:none
Working example : https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-8ag1xe
i am having a datetime field in my table, in user view to select the date time i am using datetime_select view helper. i want to style this with bootstrap classes and i don't want the default date format that it is showing. how can i format this date time select and how can i style this field?
this is the code i am using now.
<%= f.datetime_select :check_out_req , ampm: true , :class => "form-control"%>
it's displaying datetime select drop downs in the format year,month, date,hours, minutes. but i want it to display the dropdowns in the format day,month,year,hours,minutes .
and when i apply styling like this :class => "form-control" the styling is not applyig. how to style this field?
The datetime_select method has two hashes, one for options and one for html_options. You need to tell Ruby explicitly which keys belong to which hash. Since ampm belongs in the options hash and class belongs in the html_options hash, you need to separate the hashes. In addition, if you want to re-order the drop downs, provide the order option:
<%= f.datetime_select :check_out_req, { ampm: true, order: [:day, :month, :year] }, { class: "form-control" } %>
Easily insert your datetime select field inside a span element and assign a CSS class to it. Take this snippet as an example;
HTML:
<span class="datetime"><%= f.datetime_select :check_out_req , ampm: true , :class => "form-control"%><span/>
CSS:
.datetime select:nth-child(1) {
width: 130px;
text-indent: 15px;
}
You can change the order by passing order parameter.
example:
date_select("article", "written_on", order: [:day, :month, :year])
for more detail please refer the the link:
http://apidock.com/rails/ActionView/Helpers/DateHelper/date_select
These two URLs point to files which are identical except for one thing:
mobileCSS.html
noCSS.html
The mobileCSS.html file contains this line:
<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">
The noCSS.html file has the same line commented out:
<!--link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"-->
Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.
When jquery.mobile-1.4.3.css is used:
The initial values of the <select> elements are not displayed
The checkbox inputs do not update
Is this a known issue? Can you suggest a workaround for this?
Partial solution: correctedCSS.html
This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:
.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}
.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}
Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png
I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.
JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "Français" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
ng-change="setSource()" ng-model="selectedOption">
The solution is as #Omar suggested:
you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically
However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.
// Delay initial "refresh" until the page is ready
$(function () {
$("#source").selectmenu("refresh");
$("#target").selectmenu("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
})
// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
window.setTimeout(function () {
$("input[type='checkbox']").checkboxradio("refresh");
$("#target").selectmenu("refresh");
}, 1)
}
You can find these fixes in solutionCSS.html
I'm stuck with a project I get at work. I need to change the background color of some days. It's a calendar where the user should see, which days are available and which not. I found out that there is an attribute called "data-date", but I didn't found a possibility to use it.
Is there any way to manipulate the background of specific days?
I think there must be a way, cause the cell which shows the current date has another color too.
For the views month, basicWeek and basicDay you can change the rendering of the days by providing a dayRender function. E.g.:
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
cell.css("background-color", "red");
}
});
The documentation for dayRender is available here: http://arshaw.com/fullcalendar/docs/display/dayRender/
And here's a working example on jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/
For those looking to simply change the color of past dates, target .fc-past in your css and add a background-color property. E.g.,:
.fc-past {
background-color: silver;
}
dayRender: function(date, cell){
if (moment().diff(date,'days') > 0){
cell.css("background-color","silver");
}
},
If any one want to jquery fullcalendar previous all day red(or any other) colored then this is the code.
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if (check < today) {
cell.css("background-color", "red");
}
}
});
Regin Larsen code help me achive this.
Thanks Regin Larsen.
Why not using the "data-date" attribute?
$("#calendar").fullCalendar(function() {
viewRender: function() {
$("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},
....
When working with external libraries, you should try not to take advantage of anything that was generated by the library. Since in the next version, if they change the way the library works internally, the library will still be backward compatible but your code will stop working. So try to use the library API as much as possible instead of doing hacks.
Answering your question, one way to do it will be, add a new event to all the days that are not available. This can be done by creating event object and doing a renderEvent(.fullCalendar( 'renderEvent', event [, stick ] )). While creating an event object assign the background color as the color you want and set the color, text color, border color to the same as background if you dont want it to be visible.
Edit:
Regin Larsen's answer seems better. I didn't notice that in the documentation.
To compare using the date parameter for a specific day:
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
if (date.isSame('2016-08-04')) {
cell.css("background-color","red");
}
}
});
isSame comes from moment.js, which is used by fullcalendar:
http://momentjs.com/docs/#/query/is-same/
getDate does not work I guess, use moment instead.
inside var calendar = $('#calendar').fullCalendar({ ... }
dayRender: function (date, cell) {
var today = moment('2018-06-22T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background-color", "blue");
}
},
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });