Develop Reference

set the disabled dates of a datepicker by a database json list of timestamp dates

I want to disable dates in flatpicker plugin by a list from the database. this is the code to get them from the database
public List<DateTime> DisablingDates()
{
List<DateTime> dates = new List<DateTime>();
var groups = OrderContext.Collection().GroupBy(o => o.DueDate);
foreach (var g in groups)
{
if (g.Count() == 2)
{
var val = g.Key.Date;
val.ToString("dd/MMM/yyyy");
dates.Add(val);
}
}
return dates;
}
I passed the list through viewbag to the jquery but the plugin stopped working.. the browser debugger showes the DisabledDates array with timestamp dates , so I tried to convert them to readble dates but the alert function doesn't show the values.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.js"></script>
<script>
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable:
function (date) {
var DisabledDates = #Html.Raw(Json.Encode(ViewBag.DisabledDates));
var array = [];
$.each(DisabledDates, function (index, value) {
var date1 = new Date(value * 1000).toDateString();
alert(index + ": " + date1);
array.push(date1);
});
var fulldmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
if ($.inArray(fulldmy, array) === -1) {
return false;
} else {
return true;
}
},
});
DisabledDates array in the browser debugger
function (date) {
var DisabledDates = ["\/Date(1599166800000)\/","\/Date(1599253200000)\/","\/Date(1599944400000)\/"];
var array = [];
then I tried using JsonResult action with an ajax method and the plugin stopped working again.
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable: function (date) {
$.ajax({
url: '#Url.Action("GetReservedDates", "Basket")',
type: "GET",
success: function (result) {
var fulldate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
if ($.inArray(fulldate, result) === -1) {
return false;
} else {
return true;
}
}
});
}
});
the JsonResult action
[HttpGet]
public JsonResult GetReservedDates()
{
var dates = orderService.DisablingDates();
return Json(new { dates }, "text/x-json", JsonRequestBehavior.AllowGet);
}
this is the second plugin I'm currently tring.
What should I do?
Thanks in advance.

I found what made the plugin stop working .. the disable option takes a function between array brackets [].
then to convert the timestamp dates to readable dates I edited the value to contain only milliseconds from /Date(1599166800000)/ to 1599166800000.
finally, the plugin disabled the database-retrieved dates as intended.
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable: [Ddates],
onMonthChange: [Ddates],
});
function Ddates (date) {
var DisabledDates = #Html.Raw(Json.Encode(ViewBag.DisabledDates));
var array = [];
$.each(DisabledDates, function (index, value) {
value = value.replace("\\", "")
value = value.replace("/Date(", "")
value = value.replace(")\/", "")
var date1 = new Date(parseInt(value, 10)).toLocaleDateString();
array.push(date1);
});
date = date.toLocaleDateString();
return ($.inArray(date, array) != -1);
}

How to filter by Date strings (yesterday, today, this month, last month) in Angular

I have build the filtration code with the long way or traditional way with if else, I need to do it with advance JavaScript method (like filter, map, reduce)
home.html
<div class="row">
<div class="col text-right">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="filterByDate" ngbDropdownToggle>Filter By {{ generalValue }}</button>
<ul aria-labelledby="filterByDate" ngbDropdownMenu class="date-filter">
<li><a (click)="filterByDate('today')">Today</a></li>
<li><a (click)="filterByDate('yesterday')">Yesterday</a></li>
<li><a (click)="filterByDate('sevenDays')">Last 7 Days</a></li>
<li><a (click)="filterByDate('thirtyDays')">Last 30 Days</a></li>
<li><a (click)="filterByDate('lastMonth')">Last Month</a></li>
<li><a (click)="filterByDate('custom')">Custom Range</a></li>
</ul>
</div>
</div>
</div>
home.ts
filterByDate(filterRequest: any) {
this.isCustomDate = false;
if (filterRequest === 'today') {
this.generalValue = 'Today';
this.requestDate.fromDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-26",
this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
}
if (filterRequest === 'yesterday') {
this.generalValue = 'Yesterday';
let newdate = new Date();
newdate.setDate(newdate.getDate() - 1);
this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US'); // "2019-03-26",
this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
}
if (filterRequest === 'sevenDays') {
this.generalValue = 'This Week';
let newdate = new Date();
newdate.setDate(newdate.getDate() + 7);
this.requestDate.fromDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-26",
this.requestDate.toDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
}
if (filterRequest === 'thirtyDays') {
this.generalValue = 'This Month';
this.topcustomerValue = 'This Month';
this.estimatedValue = 'This Month';
let newdate = new Date();
newdate.setDate(newdate.getDate() - 30);
this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US'); // "2019-03-26",
this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
}
if (filterRequest === 'lastMonth') {
this.generalValue = 'Last Month';
this.topcustomerValue = 'Last Month';
let thisMonth = new Date();
thisMonth.setDate(thisMonth.getDate() - 30);
let newdate = new Date();
newdate.setDate(newdate.getDate() - 60);
this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US'); // "2019-03-26",
this.requestDate.toDate = formatDate(thisMonth, 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
}
if (filterRequest === 'nextYear') {
this.estimatedValue = 'Next Year';
}
if (filterRequest === 'custom') {
this.generalValue = 'Custom';
this.topcustomerValue = 'Custom';
this.isCustomDate = true;
console.log('custom');
}
console.log(this.requestDate);
}
this code is working perfectly fine, but its too lengthy. I need to concise it. so I want the shortest way, please suggest. UI is here Check URL for UI

What I would do is, create all the date definitions in the typescript and just loop them:
today = new Date();
dateFilters = [{
from: today,
to: today.getDate() - 30,
label: 'Last Month'
}, ...
]
then in the template:
<li *ngFor="let dateFilter of dateFilters"><a (click)="filterByDate(dateFilter)">{{dateFilter.label}}</a></li>
Then your filterByDate function would be reduced to 2 lines of code:
this.requestDate.fromDate = dateFilter.from
this.requestDate.toDate = dateFilter.to

enable dates based on condition

I'm working on angularjs application.I have two date fields, requirement is when user selects date in Available Date calendar,the Expire Date field should enable and user should be able to choose the date with in 24days from the date selected in Available Date field.
Example, when user selects date in Available Date field as 2017-03-02, the expire Date field should enable and the calendar should only enable 24days followed by 2017-03-02 (i.e.,2017-03-25), and all dates should be disabled so that user cannot able to select any date after 2017-03-25 or before 2017-03-02..
Please find the demo here
js code:
myApp.controller("myController", ["$scope",
function($scope) {
var today = new Date();
$scope.AvailableDate = new Date();
$scope.ExpireDate = new Date();
$scope.dateFormat = 'yyyy-MM-dd';
$scope.availableDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: "2016-03-12",
maxDate: today
};
$scope.expireDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: today,
maxDate: "2017-06-12"
};
$scope.availableDatePopup = {
opened: false
};
$scope.expireDatePopup = {
opened: false
};
$scope.ChangeExpiryMinDate = function(availableDate) {
if (availableDate != null) {
var expiryMinDate = new Date(availableDate);
$scope.expireDateOptions.minDate = expiryMinDate;
$scope.ExpireDate = expiryMinDate;
//code to set maxDates in Expire Date field -start
var date = new Date(expiryMinDate);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 3);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = y + '/' + dd + '/' + mm;
$scope.expireDateOptions.maxDate = someFormattedDate;
//code to set maxDates in Expire Date field -end
}
};
$scope.ChangeExpiryMinDate();
$scope.OpenAvailableDate = function() {
$scope.availableDatePopup.opened = !$scope.availableDatePopup.opened;
};
$scope.OpenExpireDate = function() {
$scope.expireDatePopup.opened = !$scope.expireDatePopup.opened;
};
}
]);
Below is the code i tried but not succeded.
var date = new Date(expiryMinDate);
var newdate = new Date(date);
newdate.setDate(newdate.getDate() + 3);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = y + '/' + dd + '/' + mm;
$scope.expireDateOptions.maxDate = someFormattedDate;

Given your requirements, I have used the following to keep the minDate and maxDate set:
$scope.ChangeExpiryMinDate = function(availableDate) {
if (availableDate != null) {
var availableDate = new Date(availableDate);
var expiryMinDate = angular.copy(availableDate);
expiryMinDate.setDate(expiryMinDate.getDate() + 23);
$scope.ExpireDate = availableDate;
$scope.expireDateOptions.minDate = availableDate;
$scope.expireDateOptions.maxDate = expiryMinDate;
} else {
delete $scope.ExpireDate;
}
};
$scope.ChangeExpiryMinDate($scope.AvailableDate);
You forgot to pass the current AvailableDate into the function, so when controller first loads, the Expiry Date Field is already limited.
To disable weekends, you can update the ExpiryDate Options with:
$scope.expireDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: today,
maxDate: "2017-06-12",
dateDisabled: function(data) {
var date = data.date;
var mode = data.mode;
return (mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ));
}
};
I have created a working JSFiddle here: https://jsfiddle.net/1ahyk735/

How to open a Calendar in Angular JS

I have implemented Angular JS in my Phonegap Application. Where I wish to open a Calendar in the App. But The application is not allowing me to do so.
Following is the code, where I am using with the plugins.
$scope.reminderTimes.selected = returnDate.getHours();
$scope.reminderMins.selected = returnDate.getMinutes();
var newDate = new Date();
$scope.showDatePicker = function($event) {
//console.log('dfdsfsdfsdfdsfsf sdfdsfs');
var options = {
date: new Date(),
mode: 'date'
};
datePicker.show(options, function(date){
if(date != 'Invalid Date') {
console.log("Date came" + date);
} else {
console.log(date);
}
});
$event.stopPropagation();
};
$scope.toogle = function(){
var options = {date: new Date(), mode: 'date'};
var options = {date: new Date(), mode: 'time'}; for time
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
};
If there is any other way please tell that as well.

How to disable dates in jQuery datepicker?

I have 2 datepicker for filling checkin text box and checkout text box. I have to enable only checkin+13 days in checkout datepicker.
What I tried is-
$("#Chkin").datepicker({ dateFormat: 'dd/mm/yy', minDate: '+0', onClose: function (dateText, inst) {
if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/yy") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
}
else {
var cin = new Date(dateText);
}
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
$("#Chkout").datepicker('option', 'minDate', cout).datepicker('show');
showDays();
}
});
var cin = new Date($("#Chkin").val());
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getDate()+13);
$("#Chkout").datepicker({ dateFormat: 'dd/mm/yy', minDate: cout, maxDate: maxOut, onSelect: showDays });
Where I went wrong?

I was able to make it work using the following code. Note that I had to deviate a bit from your pasted code since I did not have access to the showDays function. Anyway the issue in your code was that while constructing the maxOut date object, you were using var maxOut = new Date(cin.getDate()+13), which would actually construct a date object using cin.getDate()+13 as the given year. I am also setting the maxdate option on the checkout datepicker in the onclose function. See the date constructor arguments at http://www.w3schools.com/js/js_obj_date.asp
$(function() {
$("#Chkin").datepicker({ dateFormat: 'dd/mm/yy', minDate: '+0', onClose: function (dateText, inst) {
var cin = $(this).datepicker( "getDate" ); // this returns a date object, or null is nothing is selected.
if(cin != null && cin != 'Invalid Date'){ // check for a valid date object, definitely can be done in a better way.
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+13);
$("#Chkout").datepicker('option', 'minDate', cout)
.datepicker( "option", "maxDate", maxOut )
.datepicker('show');
}
}
});
var cin = $("#Chkin").datepicker( "getDate" ); //new Date($("#Chkin").val());
if(cin != null && cin != 'Invalid Date'){ // check for a valid date object, definitely can be done in a better way.
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+13);
$("#Chkout").datepicker({ dateFormat: 'dd/mm/yy', minDate: cout, maxDate: maxOut});
}else{
$("#Chkout").datepicker({ dateFormat: 'dd/mm/yy'});
}
});

I could sorted it finally.
Here is the code-
$("#Chkin").datepicker({ dateFormat: $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(), minDate: '+0', onClose: function (dateText, inst) {
if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/yy") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
}
else {
var cin = new Date(dateText);
}
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+14);
$("#Chkout").datepicker('option', 'minDate', cout);
$("#Chkout").datepicker('option', 'maxDate', maxOut);
showDays();
}
});
var cin = new Date($("#Chkin").val());
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+14);
$("#Chkout").datepicker({ dateFormat: $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(), minDate: cout, maxDate: maxOut, onSelect: showDays });
What I the changes i made are called the function option like this-
$("#Chkout").datepicker('option', 'minDate', cout);
$("#Chkout").datepicker('option', 'maxDate', maxOut);