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);
}
}
});
Related
I'm using bootstrap datetime-picker in angularjs
I need to show color on some specific dates i.e. on weekend and holiday dates
Here is my date picker option :-
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays
};
I'm getting list of holidays from database and weekends I'm able to identify.
How to show color to specific date?
I tried using some custom css but its applying on all the dates not to specific.
Thanks!
Answering your question
How to show color to specific date?
Bootstrap datetime-picker for Angularjs Do provide an option to apply custom class.
Try this
$scope.dateOptions = {
dateFormat: 'yyyy-MM-dd',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1,
onChangeDate: countDays,
customClass: getDayClass // fucntion having logic to select particular dates
};
The function getDayClass can be implement like this
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
// check for weekend 0 for sun and 6 for sat
if(date.getDay() == 0 || date.getDay() == 6)
{
return 'full'; //return class to be applied
}
}
return '';
}
Set the class for dates
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
The date picker calls date picker options for every date at the time of initialization.
you can check the Plunker example.
I have a date as "2017-04-03 05:00:07". I need to check for the date is today's date. If it is today's date i need to display as today or time.
If it is yesterday's need to display as yesterday or date as "MMM dd"
If it is last month or with in this year then, "MMM dd".
If it is last year then dd/mm/yyyy
I tried to display like this using a directive but this is not working for me.
Is there anyother way?
app.directive('myDirective', function($filter) {
return {
restrict: "A",
scope: {
myDirective: '='
},
link: function(scope, element, attrs) {
var date1 = new Date(scope.myDirective.updateddate);
var date2 = new Date();
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
if (diffDays == 1) {
scope.myDirective.updateddate = 'yesterday'
} else if (diffDays > 2 && diffDays <= 365) {
scope.myDirective.updateddate = $filter('date') scope.myDirective.updateddate, 'dd-MMM');
}
else if (diffDays > 365) {
scope.myDirective.updateddate = $filter('date') scope.myDirective.updateddate, 'dd-MM-YYYY');
} });
Use Moment.js while displaying like
{{moment(date).calendar()}} // Today at 11:17 AM
For reference: https://momentjs.com/
Using a custom filter is the most correct approach to this.
You define a filter much like a directive:
app.filter('myfilternamehere', function() {
return function(input) {
//do some stuff that creates the correct output
return output;
}
});
I have created a JSFiddle that might contain a solution for your problem and at the same time shows you how to create a custom directive in a bit more detail.
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 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.
I have an ExtJS Date field. During some operation in the application, min value and max value get assigned to the date field. The min value and max value are 4 years prior to the current dat, but when the date picker opens up, it opens to the disabled current dates. The user has to manually scroll back 4 years to select a date. Anyways I can update the datepicker to open up by showing the date between the min value and max value ?
Adding code:
cmpDt.setMinValue(new Date(2000, 0, 1));
cmpDt.setMaxValue(new Date(2004, 0, 1));
this sets the min and max value. I cant use setValue() because it inialises/changes the textfield. I want the textfield to get value only on selection from the datepicker.
Thanks
You have to set an initial value using the value property of the Ext.form.field.DateView:
{
...,
minValue: new Date(2000, 0, 1),
maxValue: new Date(2004, 11, 31),
value: new Date(2002, 5, 15),
...
}
EDIT after more info from the OP:
You may override the onExpand method that initializes the value on the picker. The original one looks like (given that you use ExtJS 4 - but 3 should not be that much different):
...,
onExpand: function() {
var value = this.getValue();
this.picker.setValue(Ext.isDate(value) ? value : new Date());
},
...
You could override the method to read:
...,
onExpand: function() {
var value = this.getValue(),
myDefaultDate = /* do some processing to determine the default date*/;
this.picker.setValue(Ext.isDate(value) ? value : myDefaultDate);
},
...
Just add the override to the initial form field configuration.
For anyone interested in an EXTJS 3 solution to this problem, I've made the following code.
This allows you to pass initialDateToShowOnPicker as a config to the Ext.DatePicker when declaring it, if needed.
It also allows you to call setInitialDateToShowOnPicker(initialDateToShowOnPicker) on the datepicker component to set it dynamically.
Both require a Date() type to be used, and there cannot be a value already set on the datepicker.
if (Ext.versionDetail && Ext.versionDetail.major == 3) {
Ext.form.DateField.prototype.setInitialDateToShowOnPicker = function (initialDateToShowOnPicker) {
this.initialDateToShowOnPicker = initialDateToShowOnPicker;
};
Ext.form.DateField.override({
onTriggerClick: function() {
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
startDay: this.startDay,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue)),
initialDateToShowOnPicker: this.initialDateToShowOnPicker // Date() type
});
this.menu.picker.setValue(this.getValue() || this.initialDateToShowOnPicker || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
}
}); }