Calendar with only month and year in pickadate js api - angularjs

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

Date range picker for extjs?

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")}'
}
}]
});

Show Color on Specific dates in datetime-picker AngularJs

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.

How to push date from calendar into startAt() function in angularJS

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!

Load data dynamically when I change the date

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];

Disable Dates Using Bootstrap datepicker

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 '';
}

Resources