I am using Express and AngularJS. I tried to add a date picker with ui-bootstrap module. When I add uib-datepicker, it works fine. But when I tried to add a uib-datepicker-popup the result was like that
uib-datepicker-popup
When I click the calendar button, it shows a pop-up but there are only today, clear and close buttons. It do not show the calendar.
Here is my html
<div ng-controller="DatepickerPopupDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div class="col-md-6">
<p class="input-group">
<input type="text" uib-datepicker-popup class="form-control" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
And the controller
app.controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$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.toggleMin();
$scope.open2 = function() {
$scope.popup2.opened = !$scope.popup2.opened;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.format = 'yyyy-MM-dd';
$scope.altInputFormats = ['M!/d!/yyyy'];
$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 '';
}
});
Here is the doc that I take the code: https://angular-ui.github.io/bootstrap/
Thanks in advance.
You should use jade with angularjs.
if you want to add date picker popup , you can use the code below
for html
<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format"
ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions"
ng-required="true" close-text="Close" class="form-control"/>
<span class="input-group-btn">
<button type="button" ng-click="open2()" class="btn btn-default">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
and add this in your controller
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(1970, 1, 1),
startingDay: 1
};
$scope.open = function() {
$scope.popup.opened = true;
};
$scope.popup = {
opened: false
};
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 '';
}
and this in your css file
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
In my case, I was not using npm (or bower) in my project. Hence I had to manually place the following files (downloaded from here ) in the path to make the calendar popup with dates when we use uib-datepicker-popup.
WebPages
L___uib
L___template
L____datepicker
L____datepicker.html
L____day.html
L____month.html
L____year.html
L____datepickerPopup
L____poup.html
Related
I am trying to check if a see if this date picker (pickadate.js) has selected the current day on set. Here is my code:
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
var nextyear = new Date();
nextyear.setFullYear(nextyear.getFullYear() + 1);
var pickupdatepicker = $("#car-rental-pickup-date").pickadate({
editable: true,
format: "mm/dd/yyyy",
min: today,
max: nextyear,
today: "",
close: "",
clear: "",
onSet: function(context) {
var d = new Date(context.select);
dnotime = new Date(d.toDateString());
todaynotime = new Date(today.toDateString());
var currenthour = new Date().getHours();
var hourp3 = currenthour + 13;
console.log (dnotime);
console.log (todaynotime);
if (dnotime == todaynotime) {
time.set({
disable: [
{ from: [0,0], to: [hourp3,00] }
]
});
console.log ("today!");
}else{
console.log ("not today!");
}
}
});
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<input type="date" name="car-rental-pickup-date" id="car-rental-pickup-date" class="form-control tleft readonly" value="" placeholder="Select Pickup Date" required>
But the if statement comparing the two dates isn't working but the console says they are identical. What gives? Can someone check this out and tell me what I am doing wrong?
In your code:
if (dnotime == todaynotime) {
compares two Date objects, so it's always false. Coerce to number first:
if (+dnotime == +todaynotime) {
However, you can make it simpler than that as context.select returns a time value for the local start of the selected date, so you can do:
if (context.select == new Date().setHours(0,0,0,0))
and simplify the preceding code. Here's the original code modified to work:
var today = new Date();
// Set to start of day
today.setHours(0,0,0,0);
// Copy today as root for tomorrow
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
// And for next year
var nextyear = new Date(today);
nextyear.setFullYear(nextyear.getFullYear() + 1);
var pickupdatepicker = $("#car-rental-pickup-date").pickadate({
editable: true,
format: "mm/dd/yyyy",
min: today,
max: nextyear,
today: "",
close: "",
clear: "",
onSet: function(context) {
// Could keep value as number, but OK as Date too
var d = new Date(context.select);
// This is unnecessary
// dnotime = new Date(d.toDateString());
// todaynotime = new Date(today.toDateString());
// Not relevant to issue
// var currenthour = new Date().getHours();
// var hourp3 = currenthour + 13;
// Compare time values
// Could also do: if (+d == + today) {...}
if (d.getTime() == today.getTime()) {
/* Not relevant
time.set({
disable: [
{ from: [0,0], to: [hourp3,00] }
]
});
*/
console.log ("today!");
} else {
console.log ("not today!");
}
}
});
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<input type="date" name="car-rental-pickup-date" id="car-rental-pickup-date" class="form-control tleft readonly" value="" placeholder="Select Pickup Date" required>
How do I compare 2 values? I managed to compare the two values, but I can not get the right date. In addition, I want to add a class exactly to the date that is in the array. I use air-datepicker, and I want to designate certain dates from the array in a different color and disabled. Who can tell me how to do this?
Hhow to prohibit the choice of a date, if there is a reserve between them ?
$(document).ready(function () {
var disabledDates = ['2018-5-20', '2018-5-21', '2018-5-22', '2018-5-23'];
var $startDate = $('#start');
var $endDate = $('#end');
$startDate.datepicker({
inline: false,
range: true,
toggleSelected: true,
minDate: new Date(),
multipleDatesSeparator: ",",
dateFormat: 'dd-mm-yyyy',
onSelect: function (fd, date) {
if(date){
var arrDate = fd.split(",");
$startDate.val(arrDate[0]);
$endDate.val(arrDate[1]);
if(arrDate[1]){
$('.datepicker').css("left", "-100000px");
$startDate.blur();
}
$endDate.on('click', function () {
$startDate.datepicker().val(arrDate[0]).data('datepicker').show();
});
}
},
onRenderCell: function(date, cellType) {
var formatted = getFormattedDate(date);
if (cellType == 'day') {
var returnDay = {
disabled: false
};
var selectedDate = disabledDates.filter(function(date){
return date == formatted;
}).length;
if( selectedDate > 0 || disabledDates[0] <= formatted && formatted <= disabledDates[1]){
returnDay = {
disabled: true
};
}
return returnDay;
}
}
});
function getFormattedDate(date) {
var year = date.getFullYear(),
month = date.getMonth() + 1,
date = date.getDate();
return year + '-' + month + '-' + date;
}
});
.reservation-calendar {
display: flex;
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<div class="reservation-calendar">
<div class="reservation-calendar__item line">
<input class="start" type="text" id="start">
</div>
-
<div class="reservation-calendar__item">
<input class="start" type="text" id="end">
</div>
</div>
You may just return the class you want and make it disable when you found it in the array.
$(document).ready(function () {
var disabledDates = ['2018-5-30', '2018-6-3'];
var $start = $('#start');
var $end = $('#end');
$start.datepicker({
inline: false,
range: true,
toggleSelected: true,
minDate: new Date(),
multipleDatesSeparator: ",",
dateFormat: 'dd-mm-yyyy',
onSelect: function (fd, date) {
if(date){
var arr = fd.split(",");
$start.val(arr[0]);
$end.val(arr[1]);
if(arr[1]){
$('.datepicker').css("left", "-100000px");
$start.blur();
}
$end.on('click', function () {
$start.datepicker().val(arr[0]).data('datepicker').show();
});
}
},
onRenderCell: function(date, cellType) {
var formatted = getFormattedDate(date);
console.log(formatted);
if (cellType == 'day') {
let returnDay = {
classes: 'my-class',
disabled: false
};
var ab = disabledDates.filter(function(date){
return date == formatted;
}).length;
console.log(ab);
if( ab > 0){
returnDay = {
classes: 'class-you-want-to-add-to-disable-day',
disabled: true
};
}
return returnDay;
}
}
});
function getFormattedDate(date) {
var year = date.getFullYear(),
month = date.getMonth() + 1,
date = date.getDate();
return year + '-' + month + '-' + date;
}
});
.reservation-calendar {
display: flex;
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<div class="reservation-calendar">
<div class="reservation-calendar__item line">
<input class="start" type="text" id="start">
</div>
-
<div class="reservation-calendar__item">
<input class="start" type="text" id="end">
</div>
</div>
I have a calendar that has a wrong behaviour.
As soon as someone opens it there's a wrong date selected.
I'd like it to show the current date when opened.
This is what happens now:
HTML:
<p class="input-group">
<input id="dataClass" type="text" name="input"
placeholder="gg-mm-aaaa"
tooltip="Inserire una data nel formato gg-mm-aaaa"
tooltip-placement="bottom" class="form-control input-sm"
custom-datepicker-pattern="{{customDatePattern}}"
datepicker-popup="{{formatoDataDatePicker}}"
show-button-bar="false" ng-model="systemDate"
is-open="status.opened" min-date="'01-01-1900'" max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"
close-text="Chiudi" current-text="Oggi" />
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-sm"
ng-click="open($event)" tooltip="Cambia data timbro"
tooltip-placement="right">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
JS:
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.today = new Date();
$scope.dt = $filter('date')($scope.today , 'yyyy-MM-dd');
$scope.systemDate = $filter('date')($scope.dt , 'dd-MM-yyyy');
$scope.clear = function () {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.toggleMax = function() {
$scope.maxDate = $scope.maxDate ? null : new Date();
};
$scope.toggleMax();
$scope.maxDate = $filter('date')($scope.today , 'yyyy-MM-dd');
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
What am I doing wrong?
In your directive's config you've set:
ng-model="systemDate"
In your code you set for this var:
$scope.systemDate = $filter('date')($scope.dt , 'dd-MM-yyyy');
You have to change from:
$scope.systemDate = $filter('date')($scope.dt , 'dd-MM-yyyy');
to
$scope.systemDate = $scope.today();
I been using the Ui angular bootstrap datepicker, and it's been working fine.... in chrome.
As it turn out, Firefox and safari won't show the datepicker. Anyone ever run into this before.
my HTML looks like this
<p class="input-group">
<input type="date" class="form-control" datepicker-popup ng-model="startDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
</p>
And my JS/Controller looks like this
$scope.today = function () {
$scope.startDate = new Date();
$scope.startDate.setMonth($scope.startDate.getMonth() - 1);
$scope.endDate = new Date();
$scope.endDate.setMonth($scope.endDate.getMonth() + 1);
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function (date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.open = function ($event) {
$scope.status.opened = true;
};
$scope.setDate = function (year, month, day) {
$scope.startDate = new Date(year, month, day);
$scope.endDate = new Date(year, month, day);
};
$scope.dateOptions = {
formatYear: 'yy',
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.status = {
opened: false
};
As told before This works. But in firefox and safari, it's not showing the datepicker, but it does so in chrome.
Not sure which version of UI Bootstrap you are using but in 1.2.4 the datepicker markup looks like this:
<input type="text" class="form-control" uib-datepicker-popup ng-model="startDate" is-open="opened" ... />
tried your code in FF 44 and IE 11 - seems fine to me: http://plnkr.co/edit/deE1lR?p=preview
I'm setting the minDate for the datepicker to today, just as it is set on the angularJS bootstrap site, however it's not working properly. I'm not getting any console errors, but it doesn't seem that minDat is really getting set or something. Thank you for your help!!
Here's the js
angular.module('SelfExam.Quiz', [])
.controller('QuizCtrl',['$scope','MeetingsService', function($scope, MeetingsService) {
// DATEPICKER
//Sets the default date, making adjustments for meetings that would otherwise land on a weekend date.
$scope.date = new Date();
$scope.date.setHours(0,0,0,0);
if($scope.date.getDay() == 3 || $scope.date.getDay() == 4) {
$scope.date.setDate($scope.date.getDate() + 5);
} else {
$scope.date.setDate($scope.date.getDate() + 3);
}
// Clears selection
$scope.clear = function () {
$scope.date = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.minDate = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 0
};
$scope.initDate = new Date('2016-15-20');
$scope.formats = ["shortDate"];
$scope.format = $scope.formats[0];
}]);
And the HTML
...
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" id="date-field" ng-model="date" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar" id="cal-button"></i></button>
</span>
</p>
</div>
...
Change min-date and max-date in the html to min and max