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 need to set label as separate numbers with using CSS not code behind.
I have already this code and it's work fine :
TextBox1.text= String.Format("{0,0:N0}", val(TextBox1.text))
But problem is i have alot of these labels and i can't set this format to all of them one by one, is there any solution i can do it with CSS?
This my number 1600000 and i like to show my number like this 1,600,000
Thank you
you can add this jquery mask plugin
https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.js
and apply it as below
$('.txt').mask("#,000", {
translation: {
'.': {
pattern: /[.]/,
fallback: '.'
},
},
reverse: true
});
Fiddle
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
}
);
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
In my GWT-Application I have a Custom-Table with a DatePicker-Column. Now I have to set the z-index for the Popup. I did this in my form with:
.dateBoxPopup {
z-index:5000;
}
Is there an equivalent for the Cell-Popup like .DatePickerCellPopup?
Are you refering to the DatePickerCell in the CellWidgets?
In case you are: The DatePickerCell uses a DatePicker and the DatePicker uses following CSS classes for styling (use Firebug to check them):
.gwt-DatePicker { }
.datePickerMonthSelector { the month selector widget }
.datePickerMonth { the month in the month selector widget }
.datePickerPreviousButton { the previous month button }
.datePickerNextButton { the next month button }
.datePickerDays { the portion of the picker that shows the days }
.datePickerWeekdayLabel { the label over weekdays }
.datePickerWeekendLabel { the label over weekends }
.datePickerDay { a single day }
.datePickerDayIsToday { today's date }
.datePickerDayIsWeekend { a weekend day }
.datePickerDayIsFiller { a day in another month }
.datePickerDayIsValue { the selected day }
.datePickerDayIsDisabled { a disabled day }
.datePickerDayIsHighlighted { the currently highlighted day }
.datePickerDayIsValueAndHighlighted { the highlighted day if it is also selected }
You have to specify these css classes with the #external tag to suppress selector obfuscation
Unfortunately .dateBoxPopup is not applied to the popup of DatePickerCell. Therefore, you need a z-index rule for .gwt-PopupPanel{ z-index: 15000 }