Am trying with pickadate datepicker calendar in my application, is that possible to display the calendar with only month and year?
$('#datePicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 150, // Creates a dropdown of 15 years to control year
format: 'mmm-yyyy',
max: true,
onSet: function (arg) {
if ('select' in arg) { //prevent closing on selecting month/year
this.close();
}
}
});
var from_$input = $('.from_date').pickadate({
today: 'Ok',
format: 'mmmm-yyyy',
min: new Date(),
formatSubmit: 'yyyy-mm-dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix',
selectYears: true,
selectMonths: true,
}),
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 0, 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
Related
Is there a good date-range picker for ExtJs?
Something like this: http://www.daterangepicker.com/?
I whipped this up in about 2 hours, so I'm sure there are some lingering bugs and things left to be desired, but it at least gets you started with a custom date range component. Here's my Fiddle. And the code:
Ext.define('DatePickerEnhanced', {
extend: 'Ext.picker.Date',
alias: 'widget.datePickerEnhanced',
config: {
startDate: null,
endDate: null
},
isDateRange: true,
isDragging: false,
initComponent: function () {
this.callParent()
this.on({
mouseover: {
element: 'el',
fn: 'onMouseOverEnhanced',
delegate: 'td.x-datepicker-cell',
scope: this
}
});
},
handleDateClick: function (e, t) {
this.callParent(arguments)
if (this.isDateRange) {
if (this.isDragging) {
this.isDragging = false;
var startCell = this.getCellByValue(this.startCell)
if (startCell) {
Ext.get(startCell).addCls(this.selectedCls)
}
this.setEndDate(new Date(this.getCellDateValue(this.activeCell)))
this.updateDateRange(this.startCell, this.endCell);
} else {
this.setStartDate(new Date(this.getCellDateValue(this.activeCell)))
this.isDragging = true;
this.updateDateRange(this.getCellDateValue(), -1);
}
}
},
getCellByValue: function (value) {
var cells = this.cells.elements;
for (var i = 0; i < cells.length; i++) {
var cell = cells[i]
if (cell.firstChild.dateValue === value) {
return cell;
}
}
},
onMouseOverEnhanced: function (e, target, eOpts) {
if (this.isDragging) {
this.updateDateRange(this.getCellDateValue(), this.getCellDateValue(target));
}
},
updateDateRange: function (startValue, endValue) {
var cells = this.cells.elements;
var selectedCls = this.selectedCls;
for (var i = 0; i < cells.length; i++) {
var cell = Ext.fly(cells[i])
var dateValue = this.getCellDateValue(cells[i]);
if (dateValue !== startValue && (dateValue < startValue || dateValue > endValue)) {
cell.removeCls(selectedCls)
} else {
cell.addCls(selectedCls)
}
}
},
getCellDateValue: function (cell) {
return cell && cell.firstChild.dateValue || this.startCell;
},
getDateRange: function () {
return {
start: this.getStartDate(),
end: this.getEndDate()
}
},
/**
* Update the contents of the picker for a new month
* #private
* #param {Date} date The new date
*/
fullUpdate: function (date) {
var me = this;
me.callParent(arguments);
Ext.asap(function () {
if (me.isDateRange && me.endCell) {
me.updateDateRange(me.startCell, me.endCell)
}
})
},
updateStartDate: function (value) {
this.startCell = value.getTime()
this.publishState('startDate', value);
},
updateEndDate: function (value) {
this.endCell = value.getTime()
this.publishState('endDate', value);
}
});
Ext.create('Ext.container.Viewport', {
viewModel: {
data: {
theStart: Ext.Date.add(new Date(), Ext.Date.DAY, 2),
theEnd: Ext.Date.add(new Date(), Ext.Date.DAY, 5)
}
},
items: [{
xtype: 'datePickerEnhanced',
minDate: new Date(),
bind: {
startDate: '{theStart}',
endDate: '{theEnd}'
}
}, {
xtype: 'displayfield',
fieldLabel: 'Start',
bind: {
value: '{theStart:date("m/d/Y")}'
}
}, {
xtype: 'displayfield',
fieldLabel: 'End',
bind: {
value: '{theEnd:date("m/d/Y")}'
}
}]
});
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.
angular.module('...', ['...'])
.controller('main', main);
function main($scope, $firebaseArray) {
$scope.assign = function() {
$scope.assigned = $scope.deviceName;
};
$scope.today = function () {
// must put to set hours before isostring
$scope.dth = new Date();
$scope.test = moment($scope.dth).format('YYYY-MM-DD');
console.log($scope.test);
// this console.log is to check if the date format is correct
};
$scope.today();
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.open1 = function () {
$scope.popup1.opened = true;
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
$scope.dateOptionsM = {
formatYear: 'MM',
startingDay: 1,
minDate: new Date(2018, 0, 1, 0, 0, 0, 0),
minMode: 'month'
};
$scope.dateOptionsY = {
formatYear: 'yyyy',
startingDay: 1,
// minDate: start from which date
minDate: new Date(2018, 0, 1, 0, 0, 0, 0),
minMode: 'year'
};
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;
}
}
}
return '';
}
$scope.$watch('[assigned, test]', function(values) {
//UI for calendar function
var newtest = values[1];
var value = values[0];
var newRef = firebase.database().ref('editedData').child(value);
var hourRef = newRef.child('H');
$scope.halfhourlyData = $firebaseArray(hourRef.orderByChild('timestamp').limitToLast(48).startAt(newtest));
console.log(newtest);
// this console log only displays once
$scope.halfhourlyData.$loaded();
So what I want to do is to push the date that is set on the calendar into the startAt() function. However, upon testing, I realized that both logs only have been displayed once. Meaning that the value is not changing. However, on the HTML page the value does change and it uses $scope.dth. Is there a way for me to make the values change according to the calendar display? I'm using angular-bootstrap UI. Thanks!
This is my calendar object
$scope.uiConfig = {
calendar: {
height: 450,
editable: false,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.onEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.onDayClick,
viewRender: $scope.getData
}
};
and
$scope.getData = function(view, element){
$scope.intervalStartDate = new Date(view.start);
$scope.intervalEndDate = new Date(view.end);
$scope.managedEvents = Event.getFittingsForDateInterval({
intervalStartDate : convertDate($scope.intervalStartDate),
intervalEndDate : convertDate($scope.intervalEndDate)
});
$scope.managedEvents.$promise.then(function(data){
$scope.uiConfig.calendar.events = data;
});
}
if I remove
$scope.uiConfig.calendar.events = data;
no data is populating and if i include that it is refreshing and loading current month data
for the first time it is loading the data for January month, whenever I click on next month icon, it is calling for February month data and again calendar is resetting to present month (it is calling $scope.getData again)
data = [{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name},{start : some_date, end : some_date, title : event_name}];
I want to get data for only current view instead of all at once.
any help would be appreciated.
Controller.js Code: .
$scope.getEvents = function(){
var obj = {};
$scope.events = [];
obj.startDate = new Date($scope.myView.intervalStart).getTime();
obj.endDate = new Date($scope.myView.intervalEnd).getTime();
if($scope.myView.name == "month"){
obj.endDate = obj.endDate - 19801000;
}
//Give a call to database from here, in which obj contains
// start and end of the view
var getEventsPromise = masterCalendarAPI.getEvents(obj);
getEventsPromise.then(function (response) {
if(response.statusCode == 200){
//Assign $scope.event the list object retrieved from database
}
},
function (error) {
console.log(error);
});
}
//Remember this method will be called on each view change with all details in 'view' object
$scope.renderView = function (view) {
$scope.myView = view;
$scope.getEvents();
}
$scope.uiConfig = {
calendar: {
height: 500,
editable: false,
header: {
left: 'prev,next title',
center: '',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
views: {
month: {
eventLimit:3
}
},
columnFormat:'dddd',
timezone: 'local',
timeFormat: 'hh:mm a',
titleFormat:'MMMM D, YYYY',
slotDuration:'00:30:00',
eventRender:$scope.eventRender,
eventClick: $scope.eventClicked,
dayClick: $scope.dayClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
viewRender: $scope.renderView
}
} ;
//event sources array
$scope.eventSources = [$scope.events];
I am trying to disable some dates (eventually via an array I provide) using the datepicker control. However, it seems that nothing useful is passed in to the dateDisabled function. When I set a breakpoint in the developer tools, the first variable (which is set to data in the documentation examples) comes across as simply the number zero.
I have verified that the option itself works, as blankly returning a true disables all dates. What must I do to get valid inputs?
Note: I just discovered we are using angular-ui-bootstrap version 0.12.1.
JS
//options object for the datepicker control
$scope.dateOptions = {
dateDisabled: disableDates,
formatYear: "yyyy"
};
// Disable weekend selection
function disableDates(date, mode) {
//return mode === 'day' && (date.getDay() === 5 || date.getDay() === 6);
//return true;
return date === new Date(2016, 6, 18);
}
//Set the calendar open
$scope.openCalendar = function (e) {
e.preventDefault();
e.stopPropagation();
$scope.vm.is_cal_open = !$scope.vm.is_cal_open;
};
$scope.hasInvalidErrorDate = function (date) {
if (!date || date <= Date.parse("1/1/1900")) {
return true;
}
return false;
};
$scope.earliestErrorDate = Date.parse("1/1/1900");
HTML
<div class="col-sm-4">
<!-- Error Date -->
<div class="form-group" ng-class="{'has-error': hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty}">
<label for="error_date">Error Date</label>
<p class="input-group calendar-wrapper">
<!--input disabled the input so that it forces users to use the date picker and therfore ensure good input-->
<input type="text" datepicker-popup="MM/dd/yyyy"
title="Click the calendar button"
name="error_date"
datepicker-options="dateOptions"
class="form-control"
is-open="vm.is_cal_open"
width="5"
ng-disabled="true"
ng-model="vm.data.adjustment.error_date"
min-date="dateOptions.minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default delegate-cal-btn" ng-click="openCalendar($event)"><i class="fa fa-calendar"></i></button>
</span>
</p>
<span class="text-danger small" ng-show="hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty">
Please select an error date
</span>
</div>
</div>
Working absolutely fine.
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass : getDayClass,
minDate : new Date(),
showWeeks : true
};
$scope.dateOptions = {
formatYear : 'yy',
maxDate : new Date(2199, 12, 31),
minDate : new Date(),
startingDay : 1
};
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null
: new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
/*
* $scope.open2 = function() { $scope.popup2.opened =
* true; };
*/
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = [ 'dd-MMMM-yyyy', 'yyyy/MM/dd',
'dd.MM.yyyy', 'shortDate' ];
$scope.format = $scope.formats[0];
$scope.altInputFormats = [ 'M!/d!/yyyy' ];
$scope.popup1 = {
opened : false
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
/*
* $scope.popup2 = { opened : false };
*/
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [ {
date : tomorrow,
status : 'full'
}, {
date : afterTomorrow,
status : 'partially'
} ];
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;
}
}
}
return '';
}