I would like to request assistance on how can I block a specific dates on my date selector.
Specific dates are:
December 24, 25, 30, 31 - 2020 and January 1, 2021 ONLY.
Note: We need to remain the current function where the selected available dates are 2 days advanced from today. Weekends are also blocked. This functions are already in the script
<style>
select {
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#000;
}
</style>
<select name="APPOINTMENTDATE" id="date-range" data-field-type="Text">
<option value="" selected="selected">Select date</option>
</select>
<script>
var dateRange = document.getElementById('date-range'),
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for(var day = 2; day < 30; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
if(!(date.getDay()==6|| date.getDay()==0))
dateRange.options[dateRange.options.length] = new Option([monthNames[date.getMonth()], date.getDate(), date.getFullYear()].join(' '));
}
</script>
You can do something like this.
var dateRange = document.getElementById('date-range'),
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var day = 2; day < 30; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
if (!(date.getDay() == 6 || date.getDay() == 0)) {
dateRange.options[dateRange.options.length] = new Option(
[monthNames[date.getMonth()],
date.getDate(),
date.getFullYear()
].join(' '));
}
}
//define dates to be blocked.
var arr = ["Dec 24 2020", "Dec 25 2020", "Dec 30 2020", "Dec 31 2020", "Jan 01 2021"];
//loop through dateRange.options
for (var i = 1; i < dateRange.options.length; i++) {
//when date to be blocked found, mark it as disabled
arr.includes(dateRange.options[i].value) ? dateRange.options[i].disabled = true : dateRange.options[i].disabled = false;
}
Related
My function displays the current date along with the next 60 days however I want the current date to be highlighted. What would be the best approach?
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 60; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var cellText = document.createTextNode(day);
var date = ('0' + date.getDate()).slice(-2) + ' '
+ monthNames[date.getMonth()] + ' '
// + date.getFullYear();
cell.innerHTML = date;
dateRange.appendChild(cell);
}
Since you're always showing the next 60 days, the current date is always the first date in the list, so it's easy to target with a CSS selector. For example:
#calendar-table-range li:first-child {
background-color: yellow;
}
Another way to go about it is to create a timestamp in the same format as the dates in the range then search for it.
E.g. the following, which puts formatting into a separate function and removes code that wasn't being used:
function formatDate(d){
let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return ('0 ' + d.getDate()).slice(-2) + ' '
+ monthNames[d.getMonth()];
}
function highlightToday() {
let today = formatDate(new Date());
let cells = document.querySelectorAll('#calendar-table-range > li');
for (var i=0, iLen=cells.length; i<iLen; i++) {
if (cells[i].textContent == today) {
cells[i].style.color = 'red';
return;
}
}
}
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 6; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var date = formatDate(date);
cell.innerHTML = date;
dateRange.appendChild(cell);
}
<div id="month"></div>
<div id="year"></div>
<input type="button" onclick="highlightToday()" value="highlight today">
<ol id="calendar-table-range">
</ol>
How to get month and year data in Nodejs and query to insert into database?
var months = ["jan", "feb", "mar", "apr", "may", "jun", "july", "aug", "sep", "oct", "nov", "dec"];
var date = new Date();
var month = date.getMonth(); // returns 0 - 11
var year = date.getFullYear();
console.log(months[month]);
console.log(year);
To get the current month and year you can do the following
var date= new Date();
var month = date.getUTCMonth() + 1; //months from 1-12
var year = date.getUTCFullYear();
However i cannot answer on how to save to Database since that depends entirely on the Database and Object Modelling you are using. Can you provide more info on the Database please.
Thanks.
I am using bootstrap-datepaginator Source.
The below code returns date in this format Sun Aug 14 2016 00:00:00 GMT+0400
Instead of that i want to return it in this format 14/Aug/2016
<script>
$(document).ready(function () {
var options = {
selectedDate: '2016-01-01',
selectedDateFormat: 'YYYY-MM-DD'
}
$('#paginator').datepaginator(options);
$('#paginator').datepaginator();
$('#paginator').on('selectedDateChanged', function (event, date) {
// Your logic goes here
alert(date);
});
});</script>
try this
var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Ntove", "Dec" ];
var dati = "Sun Aug 14 2016 00:00:00 GMT+0400";
var date = new Date(dati);
var thedate = date.getDate();
var themonth = date.getMonth();
var theyear = date.getFullYear();
alert(thedate);
alert(themonth);
alert(theyear);
var newdate = thedate +"/"+months[themonth]+"/"+theyear;
alert(newdate);
working example
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
</body>
<script type="text/javascript">
var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Ntove", "Dec" ];
var dati = "Sun Aug 14 2016 00:00:00 GMT+0400";
var date = new Date(dati);
var thedate = date.getDate();
var themonth = date.getMonth();
var theyear = date.getFullYear();
alert(thedate);
alert(themonth);
alert(theyear);
var newdate = thedate +"/"+months[themonth]+"/"+theyear;
alert(newdate);
</script>
</html>
I have written a code, where it will show the next 12 months from current month. Suppose, now is Oct 2015, so it will show all next 12 months, that is upto Oct 2016. I am showing it in a list. But, I want to create a box with right-left arrow enabled. After clicking on left-right arrow it will show next item. After clicking on right arrow it will show next item and after clicking on left arrow it will show previous item. Data items will be shown in a box. Please check my below code, which will print next 12 months from current.
angular.module('picker', []).controller('pickercontroller', function($scope) {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
for(var i = 0; i <= 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.months = months;
});
<div ng-app="picker">
<div ng-controller="pickercontroller">
<li ng-repeat="currMonth in months">{{currMonth}}</li>
</div>
</div>
Also, check my fiddle :- http://jsfiddle.net/abhijitloco/cqbqow2L/
Check this code to see how you can change the selected month via ng-click
https://jsfiddle.net/jddg3som/
Controller
angular.module('picker', []).controller('pickerCtrl', function($scope) {
var date = new Date();
var months = [],
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
for (var i = 0; i < 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.changeMonth = function(steps) {
if ($scope.monthIndex + steps >= 0 &&
$scope.monthIndex + steps <= 11
) {
$scope.monthIndex = $scope.monthIndex + steps;
$scope.monthName = $scope.months[$scope.monthIndex];
}
};
$scope.monthIndex = 0;
$scope.months = months;
$scope.monthName = months[0];
});
View
<div ng-app="picker">
<div ng-controller="pickerCtrl">
<h1> {{monthName}} </h1>
<button ng-click="changeMonth(1);">Next Month</button>
<button ng-click="changeMonth(-1);">Previous Month</button>
<li ng-repeat="currMonth in months">{{currMonth}}</li>
</div>
</div>
Use ng-click to handle button event and for next month check whether next month is available in months array or not. If available then set next month from array.
Same for previous month
angular.module('picker', []).controller('pickercontroller', function($scope) {
var date = new Date();
var months = [],
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
for (var i = 0; i <= 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.months = months;
$scope.currMonth = months[0];
$scope.nextMonth = nextMonth;
$scope.prevMonth = prevMonth;
function prevMonth() {
var index = $scope.months.indexOf($scope.currMonth);
if (index != 0 && index < $scope.months.length) {
$scope.currMonth = $scope.months[index - 1];
}
}
function nextMonth() {
var index = $scope.months.indexOf($scope.currMonth);
if (index < $scope.months.length - 1) {
$scope.currMonth = $scope.months[index + 1];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="picker">
<div ng-controller="pickercontroller">
<p>{{currMonth}}</p>
<button ng-click="prevMonth()">Previous Month</button>
<button ng-click="nextMonth()">Next Month</button>
</div>
</div>
I have an Angualr service that lists out 12 months and year from the current month:
JS:
app.factory('12months', function() {
return {
getMonths: function() {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
for(var i = 0; i < 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() - 1);
}
return months;
}
};
});
Which output is:
Oct 2014, Sep 2014, Aug 2014 etc etc
How can i modify this to display the day too, so:
21 Oct 2014, 21 Sep 2014, 21 Aug 2014 etc etc
How about using the date filter
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', ['$scope', '12months',
function($scope, tmonths) {
$scope.tmonths = tmonths.getMonths();
}
])
app.factory('12months', ['dateFilter',
function(dateFilter) {
return {
getMonths: function() {
var date = new Date();
var months = [];
for (var i = 0; i < 12; i++) {
months.push(dateFilter(date, 'dd MMM yyyy'));
date.setMonth(date.getMonth() - 1)
}
return months;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<pre>{{tmonths | json}}</pre>
</div>
append date to string:
app.factory('12months', function() {
return {
getMonths: function() {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
for(var i = 0; i < 12; i++) {
months.push(date.getDate()+ ' ' +monthNames[date.getMonth()] + ' ' + date.getFullYear());
}
return months;
}
};
});
You can just concatenate the day to the string in the months array:
So instead of this:
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
Do this:
months.push(date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear());
You can date in jquery
var date = new Date();
date.getDate() //output:- 21
Add Total days in the days Array:
app.factory('twelvemonths', function() {
return {
getMonths: function() {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
days=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
for(var i = 0; i < 12; i++) {
months.push(days[date.getDate()]+ ' ' +monthNames[date.getMonth()] + ' ' + date.getFullYear());
}
return months;
}
};
});
If you want to use your function you could change the line to
months.push(date.getDate() + ' ' monthNames[date.getMonth()] + ' ' + date.getFullYear());