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 JSON data by datepicker in Javascript?

Hello I am a newbie programmer.
I want to get data from my API with datepicker filter.This is my API URL:https://gmlews.com/api/data/?node_id=1
First, I choose the date that I want from my datepicker. And then the data will be displayed with console.log() command.
I know how to display all data, but I don't know how to display filtered data from datepicker. The filter that I made in my code doesn't work. I think my code is wrong. This is my first code: https://jsfiddle.net/estri012/2x3hmaLo/56/
$(function() {
$('input[name="datefilter"]').daterangepicker({
showDropdowns: true,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
var fromDate = picker.startDate.format('YYYY-MM-DD');
var toDate = picker.endDate.format('YYYY-MM-DD');
if (fromDate != '' && toDate != '') {
console.log(fromDate, toDate);
var endpoint = 'https://gmlews.com/api/data/?node_id=1';
$.ajax({
method: "GET",
url: endpoint,
data: {
fromDate: fromDate,
toDate: toDate
},
success: function(data) {
console.log(data);
var resultData = data.filter(function (a) {
var hitDates = a.timestamp || {};
// extract all date strings
hitDates = Object.keys(hitDates);
var hitDateMatchExists = hitDates.some(function(dateStr) {
var date = new Date(dateStr);
return date >= fromDate && date <= toDate
});
return hitDateMatchExists;
});
console.log(resultData);
} //function(data)end
}); //ajax end
} //if function end
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
}); //apply button end
}); //function end
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<ol class="breadcrumb">data from date : <input type="text" name="datefilter" value="" /></ol>
For example, I want to display all the data from 7 May until 8 May. So first, I pick 7 May to 8 May from my datepicker and then click apply. After I click apply, in the inspect element should show the data from 7 May until 8 May.
Can someone help me fix this code? Thankyou.

It solved! I am using plugin underscore.js. This is my final code: https://jsfiddle.net/estri012/2x3hmaLo/71/
$(function() {
$('input[name="datefilter"]').daterangepicker({
showDropdowns : true,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
var startDate = picker.startDate.format('YYYY-MM-DD');
var endDate = picker.endDate.format('YYYY-MM-DD');
if (startDate != '' && endDate != '') {
console.log(startDate, endDate);
var endpoint = 'https://gmlews.com/api/data/?node_id=1';
$.ajax({
method: "GET",
url: endpoint,
data: {
startDate: startDate,
endDate: endDate
},
success: function(data){
var data = data;
var filteredDates = _.filter(data, function(data){
return (data.timestamp > startDate &&
data.timestamp < endDate)
});
console.log(filteredDates);
} //function(data)end
}); //ajax end
} //if function end
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
}); //apply button end
}); //function end

How to disable dates in datepicker form database?

<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
url: "dates.php",
success: function(data) {
var obj = $.parseJSON(data);
var date = '"'
$.each(obj, function() {
date = date + this['date'] + '","';
});
date = date + '"';
$(document).ready(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: checkAvailability,
});
});
var $myBadDates = new Array(date);
function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
}
});
});
</script>
This is my existing code. I just want to disable some dates in datepicker coming from database.
$myBadDates takes array of dates like this "2017-05-01", "2017-05-02" which is coming in var date. But for some reason it is not working. When I put hand-written dates in $myBadDates it works well, but with var date it is not working.
I am unable to understand what is happening here as I am new to JavaScript and JSON.

Changing one array into another is done using Array.prototype.map:
var result = input.map(function(e) { return e.date; });
ES6:
var result = input.map(e => e.date);
var input = [{"date":"2017-05-01"},{"date":"2017-04-10"},{"date":"2017-05-02"},{"date":"2017-04-30"},{"date":"2017-04-29"},{"date":"2017-04-28"},{"date":"2017-04-27"},{"date":"2017-04-26"},{"date":"2017-04-25"},{"date":"2017-04-24"},{"date":"2017-04-23"},{"date":"2017-04-14"},{"date":"2017-04-20"},{"date":"2017-05-03"},{"date":"2017-04-22"},{"date":"2017-04-21"},{"date":"2017-05-04"},{"date":"2017-04-19"},{"date":"2017-04-18"},{"date":"2017-04-17"},{"date":"2017-04-16"},{"date":"2017-04-11"},{"date":"2017-04-15"},{"date":"2017-05-05"},{"date":"2017-04-13"},{"date":"2017-04-12"},{"date":"2017-04-09"},{"date":"2017-04-08"},{"date":"2017-04-07"},{"date":"2017-04-06"},{"date":"2017-04-05"},{"date":"2017-04-04"},{"date":"2017-04-03"},{"date":"2017-04-02"},{"date":"2017-04-01"},{"date":"2017-03-31"},{"date":"2017-03-30"},{"date":"2017-02-07"},{"date":"2017-03-29"},{"date":"2017-03-28"},{"date":"2017-03-27"},{"date":"2017-02-08"},{"date":"2017-03-26"},{"date":"2017-03-25"},{"date":"2017-03-24"},{"date":"2017-03-23"},{"date":"2017-03-22"},{"date":"2017-03-21"},{"date":"2017-03-20"},{"date":"2017-02-28"}];
var output = input.map(function(e){ return e.date; });
console.log(output);

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

Pass values from MVC controller to javascript code

I need to pass list/json/array of dates information to a Jquery UI Datepicker dynamically through a jsonresult in a MVC controller.
Following the link below, I am able to highlight selected dates in the datepicker control.
http://jquerybyexample.blogspot.com/2012/05/highlight-specific-dates-in-jquery-ui.html
< script type ="text/javascript">
$(document).ready( function () {
var SelectedDates = {};
SelectedDates[ new Date('05/28/2012' )] = new Date( '05/28/2012' );
SelectedDates[ new Date('05/29/2012' )] = new Date( '05/29/2012' );
SelectedDates[ new Date('05/30/2012' )] = new Date( '05/30/2012' );
//want to replace the above three lines with code to get dates dynamically
//from controller
$( '#releasedate' ).datepicker({
dateFormat: "mm/dd/yy" ,
numberOfMonths: 3,
duration: "fast" ,
minDate: new Date(),
maxDate: "+90" ,
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true , "Highlighted", Highlight];
}
else {
return [true , '', '' ];
}
}
});
The above code will highlight those specific three dates on the calendar control(UIDatepicker).Instead of hard coding dates like above... My challenge is to get these dates dynamically from a controller and pass it on to the var SelectedDates in javascript above.
Controller jsonresult code:
public JsonResult GetReleasedDates(string Genre)
{
var relDates = service.GetDates(Genre)//code to get the dates here
return Json(relDates, JsonRequestBehavior .AllowGet);
//relDates will have the dates needed to pass to the datepicker control.
}
Thanks for the help.

The first possibility is to use a model that will be directly serialized into JSON:
public ActionResult Index()
{
// TODO: obviously those will come from your service layer
var selectedDates = new Dictionary<string, DateTime>
{
{ new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
{ new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
{ new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
};
return View(selectedDates);
}
and in the view:
#model IDictionary<string, DateTime>
<script type ="text/javascript">
$(document).ready(function () {
var selectedDates = #Html.Raw(Json.Encode(Model));
$('#releasedate').datepicker({
dateFormat: "mm/dd/yy",
numberOfMonths: 3,
duration: "fast",
minDate: new Date(),
maxDate: "+90",
beforeShowDay: function (date) {
var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
var highlight = selectedDates[key];
if (highlight) {
return [true, "Highlighted", highlight];
}
else {
return [true, '', ''];
}
}
});
});
</script>
The other possibility is to use AJAX to retrieve the selectedDates later:
public ActionResult Index()
{
return View();
}
public ActionResult GetSelectedDates()
{
// TODO: obviously those will come from your service layer
var selectedDates = new Dictionary<string, DateTime>
{
{ new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
{ new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
{ new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
};
return Json(selectedDates, JsonRequestBehavior.AllowGet);
}
and then:
<script type ="text/javascript">
$(document).ready(function () {
$.getJSON('#Url.Action("GetSelectedDates")', function(selectedDates) {
// Only inside the success callback of the AJAX request you have
// the selected dates returned by the server, so it is only here
// that you could wire up your date picker:
$('#releasedate').datepicker({
dateFormat: "mm/dd/yy",
numberOfMonths: 3,
duration: "fast",
minDate: new Date(),
maxDate: "+90",
beforeShowDay: function (date) {
var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
var highlight = selectedDates[key];
if (highlight) {
return [true, "Highlighted", highlight];
}
else {
return [true, '', ''];
}
}
});
});
});
</script>

There is a library to exchange data from controller to javascript without the need of a further ajax call or inline javascript.
If you need the data on every page, you could use it in a filter.
http://jsm.codeplex.com
With the library you could just write the following code in your MVC Controller Action:
// Add the dates as objects to javascript - The object should only contain data
// which should be exposed to the public.
this.AddJavaScriptVariable("DatePickerController.Dates", service.GetDates(Genre));
// Execute the initialization function when the DOM has been loaded
// The function can be in a javascript file
this.AddJavaScriptFunction("DatePickerController.Ready");
Your javascript file could look like this:
var DatePickerController = {
Dates: null,
Ready: function() {
$("#releasedate").datepicker({
dateFormat: "mm/dd/yy" ,
numberOfMonths: 3,
duration: "fast" ,
minDate: new Date(),
maxDate: "+90" ,
beforeShowDay: function (date) {
var Highlight = DatePickerController.Dates[date];
if (Highlight) {
return [true , "Highlighted", Highlight];
}
else {
return [true , '', '' ];
}
}
});
}
};
Note: You maybe have to create a special model for the dates you pass with this.AddJavaScriptVariable which is compatible to the datepicker.

Make an ajax call:
<script type ="text/javascript">
$(document).ready( function () {
var SelectedDates = {};
//SelectedDates[ new Date('05/28/2012' )] = new Date( '05/28/2012' );
//SelectedDates[ new Date('05/29/2012' )] = new Date( '05/29/2012' );
//SelectedDates[ new Date('05/30/2012' )] = new Date( '05/30/2012' );
$.ajax({
url:'url'
,data:{}
,type:'get'
,success:function(data) {
for(var i = 0, i < data.length; i++) {
SelectedDates.push(new Date(data[i]));
}
$( '#releasedate' ).datepicker({
dateFormat: "mm/dd/yy" ,
numberOfMonths: 3,
duration: "fast" ,
minDate: new Date(),
maxDate: "+90" ,
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true , "Highlighted", Highlight];
}
else {
return [true , '', '' ];
}
}
});
});
});
</script>

make an ajax call to get the dates. upon success of the ajax request, configure the datapickers with the results.
var configureDatePickers = function(dates){
//setup datepicker in here...
};
$.get('url to get dates', {Genre: smoething}).success(configureDatePickers);
One other recomendation. the default json serializer doesn't play well with the datetime object. therefore I would suggest returning the dates as strings before serializing. example:
var dates = Data.GetDates(genre).Select(x=>x.ToString("MM-dd-yyyy")).ToArray();
return Json(dates);