I am using Angular.UI Bootstrap Datepicker (http://angular-ui.github.io/bootstrap/#/datepicker)
Now I am challenging one problem: the client always wants to see current date highlighted, even if it is not selected. Just like in this example (http://angular-ui.github.io/ui-date/).
Tried to google this problem, but no solution found for Angular.UI Bootstrap Datepicker.
There is no way, to switch to ui-date. Any ideas?
Thank you!
Replace in the datepicker control this
var days = getDates(firstDate, numDates), labels = new Array(7);
for (var i = 0; i < numDates; i++) {
var dt = new Date(days[i]);
days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month);
}
with
var today = new Date();
var days = getDates(firstDate, numDates), labels = new Array(7);
for (var i = 0; i < numDates; i++) {
var dt = new Date(days[i]);
var highlight = (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear());
if(!highlight) {
highlight = (today.getDate() === dt.getDate() && today.getMonth() === dt.getMonth() && today.getFullYear() === dt.getFullYear());
}
days[i] = makeDate(dt, format.day, highlight, dt.getMonth() !== month);
}
You can also use the custom-class attribute of the datepicker.
Like this:
<datepicker custom-class="isToday(date, mode)" show-weeks='false' class="well well-sm" ng-model="selectedDate" ng-change="onDateSelect()"></datepicker>
Then you add the function on the controller:
$scope.isToday = function(date, mode) {
var today = new Date();
today.setHours(12,0,0,0);
if(today.toDateString() == date.toDateString() ){
return 'today';
}
};
(another option is comparing day, month and year if you prefer)
Now just the css you want to evidence the day:
.today button{
background-color: #BCBCBC;}
PS: This will show the day if you change the date from today, if you want to have the current day highlighted always just make a stronger css selector to override the default '.active' class.
Related
I want to get date of birth of a user, with predefined min and max date which is working fine.
And the date format i want is DD-MM-YYYY, for this i have defined following in config;
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD-MM-YYYY');
}}]);
and the controller has
$scope.user = {};
$scope.user.dob = new Date();
$scope.maxDate = new Date(
$scope.user.dob.getFullYear() - 10,
$scope.user.dob.getMonth(),
$scope.user.dob.getDate()
);
$scope.minDate = new Date(
$scope.user.dob.getFullYear() - 120,
$scope.user.dob.getMonth(),
$scope.user.dob.getDate()
);
and the HTML is;
<md-datepicker
ng-model="user.dob"
md-placeholder="Enter date of birth"
md-min-date="minDate"
md-max-date="maxDate">
</md-datepicker>
with this code the field shows current date by default, which i don't want,
i want the date field to be empty by default.
Also i want to get values in both ways as follows
1) date-month-year
And
2) date-month-year hour-minutes-seconds
When i tried to get the value it shows this "09-11-2016T18:30:00.000Z"
i want either "09-11-2016" or "09-11-2016 18:30:00"
Your mdDateLocaleProvider doesnt check for null values.
Your Problem is:
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD-MM-YYYY');
}}]);
it needs to be something like:
$mdDateLocaleProvider.formatDate = function(date) {
var m = moment(date);
return m.isValid()? m.format('DD-MM-YYYY') : '';
};
Then you can set
$scope.user.dob=null;
And get an empty Datepicker.
The problem is your ng-model. You're initializing it with the current date:
$scope.user.dob = new Date();
Simply empty this variable and you'll be good ;)
I am using a Ext.picker.Month.
Setting maxDate does not disable dates which are grater than the maxDate value, but causes a validation error when selecting one.
How can I disable all future dates?
See fiddle -
1. Set maxDate to new Date()
2. Use ExtJS 4.2
You are instantiating a MonthPicker, not a DatePicker, yet you are using dozens of config options that are only available for a DatePicker.
You can see here how to instantiate a MonthPicker. As you can see there and especially in the docs, MonthPicker does not provide a config option to disable anything. Also, if you check the DatePicker behaviour, you see that disabledDates option does not change anything in MonthPicker, only AFTER the month has been selected, all days in the DatePicker are disabled.
So you would be on your own in implementing disabledDates for the MonthPicker, which I would do by looking at the code from DatePicker and MonthPicker, and trying to transfer.
Try this one...working on ExtJS 6.0.0.
You need to override 'Ext.picker.Month'
find attached image
Accepted values -
new RegExp('(?:)'); disable all month/year
new RegExp('^((?!^Apr/2016$|^May/2016$|^Jun/2016$|^Jul/2016$).)*$') disable all values other than Apr/May/Jun/Jul 2016
CSS -
.x-monthpicker-disabled {
background-color: #eee !important;
cursor: default !important;
color: #bbb !important;
}
disabledCls: Ext.baseCSSPrefix + 'monthpicker-disabled',
disabledMonthYearsRE: null,
disabledMonthYearsText: 'Disabled',
updateBody: function () {
//default Extjs code
if (me.rendered) {
//default Extjs code
//remove disabled cls and tooltip
years.removeCls(disabledCls);
months.set({
'data-qtip': ''
});
years.set({
'data-qtip': ''
});
months.removeCls(disabledCls);
//default Extjs code
if (dmyMatch) {
if (month == null && year == null) {
months.set({
'data-qtip': dmyText
});
months.addCls(disabledCls);
}
yrInView = false;
for (y = 0; y < yLen; y++) {
yr = yearNumbers[y];
el = Ext.fly(yearItems[y]);
if (dmyMatch.toString().indexOf(yr) == -1) {
el.dom.setAttribute('data-qtip', dmyText);
el.addCls(disabledCls);
}
if (yr == year) {
yrInView = true;
}
}
if (year != null && yrInView) {
for (m = 0; m < mLen; m++) {
mNo = m;
if (mNo < monthOffset) {
mNo = mNo * 2;
} else {
mNo = (mNo - monthOffset) * 2 + 1;
}
mt = months.elements[mNo];
if (dmyMatch.test(mt.text + "/" + year)) {
mt.setAttribute('data-qtip', dmyText);
mt.className = disabledCls + ' ' + mt.className;
}
}
} else {
//Add tooltip 'disabled'
months.set({
'data-qtip': dmyText
});
months.addCls(disabledCls);
}
}
}
},
//Disable month and year click for disabled values
onMonthClick: function (target, isDouble) {
var me = this;
if (!me.disabled && !Ext.fly(target).hasCls(me.disabledCls)) {
//default Extjs code
}
},
onYearClick: function (target, isDouble) {
var me = this;
if (!me.disabled && !Ext.fly(target).hasCls(me.disabledCls)) {
//default Extjs code
}
}
I've got a list of events on a site I'm building and I would like the past events to be removed automatically. I've written a filter that is doing this, except it is removing today's events as well. I'm trying to use Angular Moment. Here is my code:
angular.module('zenCityApp')
.filter('filterPastDates', function (moment) {
return function (events) {
var filterByDate = [];
for (var i = 0; i < events.length; i++) {
var currentDate = new Date();
if(moment(currentDate).isBefore(events[i].date, 'hour')) {
console.log("we're in!");
filterByDate.push(events[i]);
console.log(filterByDate);
}
}
return filterByDate;
};
});
And here is the markup:
div ng-repeat="event in events | limitTo:100 | filter:tfilter | orderBy: 'date' | filterPastDates">
<div class="row">
<div class="col-md-6">
<h4>{{event.date | amDateFormat:'MMMM Do'}}</h4>
</div>
<div class="col-md-6">
<h4>{{event.name}}</h4>
</div>
</div>
Any help would be greatly appreciated.
What would be better is to create a cut-off moment for which you want to test. Moments api gives you a pretty easy way to do it by using .startOf('day'). That will give you a moment that represents today at 12:00am (the first second in the day). But since you also want to include that value in your filter, you can then subtract 1 millisecond from the value.
var cutOffDate = moment().startOf('day').subtract(1,'millisecond');
And now you can easily use that in your filter. Notice that I created that object outside of the loop (since it's not supposed to change), and I created it as a moment directly instead of creating a new moment object each time in the loop.
app.filter('filterPastDates', function () {
return function (events) {
if (events && events.length) {
var filtered = [];
var cutOffDate = moment().startOf('day').subtract(1,'millisecond');
for (var i = 0; i < events.length; i++) {
var evt = events[i];
if (cutOffDate.isBefore(evt.date)) {
filtered.push(evt);
}
}
return filtered;
} else {
return events;
}
};
});
Here's a sample plunker: http://plnkr.co/edit/kSXu0Z3J7zoyBMBjoE84?p=preview
In my application, I have used pricing slider. When I change minimum and maximum value of pricing slider, I need to filter based on the range. In angularjs, how to do this one. Can you please any one help me.
$scope.min_price = 0;
$scope.max_price = 10000;
$scope.priceFilter = function (hotel) {
console.log(hotel.AvailableRoom[0]);
if(hotel.AvailableRoom[0] !== null && hotel.AvailableRoom[0].HotelRoom.Price != null){
console.log(hotel);
return (hotel.AvailableRoom[0].HotelRoom.Price.Amount >= $scope.min_price && hotel.AvailableRoom[0].HotelRoom.Price.Amount <= $scope.max_price);
}
else if(hotel.AvailableRoom.HotelRoom[0].Price != null) {
console.log(hotel);
return (hotel.AvailableRoom.HotelRoom.Price.Amount >= $scope.min_price && hotel.AvailableRoom.HotelRoom.Price.Amount <= $scope.max_price);
}
};
and I have added filter:priceFilter in ng-repeat. It is called whenever reload page. But I want to call this one when price range is changed.
<div id="rangeslider" range-slider min="0" max="1000" model-min="min" model-max="max" ></div>
above is pricing slider.
Have you tried adding an ng-mouseup (https://docs.angularjs.org/api/ng/directive/ngMouseup) to your rangeslider div and calling your priceFilter method from there?
i have same problme.. and i finding the mouse-release event, but still not got exact.
but i solve this problem by $watch and it's just slow but working properly..
$scope.$watch( '[demo7.maxPrice, demo7.minPrice]', function() {
$scope.filterByPriceRange();
});
$scope.filterByPriceRange = function() {
$rootScope.filteredRooms = [];
angular.forEach(
$rootScope.filteredRoomsByPricingType,
function(availableRoom) {
for (i in availableRoom.roomPricings) {
if (availableRoom.roomPricings[i].price >= $rootScope.demo7.minPrice
&& availableRoom.roomPricings[i].price <= $rootScope.demo7.maxPrice
&& availableRoom.roomPricings[i].pricingType.pricingType == $rootScope.pricingType) {
$rootScope.filteredRooms
.push(availableRoom);
}
}
});
};
I wanted to set different date in Extjs date picker by replacing default date of date picker that comes system date.
for that I override Date field - below is my code -
Ext.override(Ext.form.field.Date, {
expand: function() {
var value = this.getValue();
var customDate = '07/08/2013';
var myDate = new Date(customDate );
this.getPicker().setValue(Ext.isDate(value) ? value : myDate);
}
});
Now I was expecting myDate as default in picker.
But picker is not populating when I click on picker to select date.
Thanks
I fixed the issue myself. Here is the code to do that. Hopefully it will help someone and will save precious time.
Ext.override(Ext.form.field.Date, {
expand: function() {
var myDate = new Date('07/08/2017');
var value = this.getValue();
this.getPicker().setValue(Ext.isDate(value) ? value : myDate);
var me = this, bodyEl, picker, collapseIf;
if (me.rendered && !me.isExpanded && !me.isDestroyed) {
bodyEl = me.bodyEl;
picker = me.getPicker();
collapseIf = me.collapseIf;
me.isExpanded = true;
me.alignPicker();
bodyEl.addCls(me.openCls);
me.mon(Ext.getDoc(), {
mousewheel: collapseIf,
mousedown: collapseIf,
scope: me
}); Ext.EventManager.onWindowResize(me.alignPicker, me);
me.fireEvent('expand', me);
}
}
});