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);
}
Below is my code- I need to restrict the user to select only sundays in the date picker, the rest days should be greyed out.So the date picker should only show sundays.
Please help me on this. Below code is working good, it defaults date to 4 week out from today and user can change it if possible.
<script type="text/javascript">
var j$ = jQuery.noConflict();
var d = new Date();
d.setDate( d.getDate()+28);
var fromDateStart = new Date( d );
var d = new Date();
d.setDate( d.getDate()+29);
var toDateStart = new Date( d );
j$('.fromdatepickerctl').datepicker({
startDate: getTodayDate()
}).on("changeDate", function(e) {
var fromDate = document.getElementById( e.target.id ).value;
console.log('----> fromDate: '+fromDate);
var d = new Date( Date.parse(fromDate) );
d = d.setDate( d.getDate()+28);
j$('.todatepickerctl').datepicker('setDate', new Date(d) );
});
j$('.todatepickerctl').datepicker({
startDate: getTodayDate()
}).on("changeDate", function(e){
var fromDateStr = j$(".fromdatepickerctl").val();
var toDateStr = document.getElementById( e.target.id ).value;
var parsedFromDate = new Date( Date.parse( fromDateStr ) );
var parsedToDate = new Date( Date.parse(toDateStr ) );
if( parsedFromDate > parsedToDate ){
alert('To Date can not be less than From Date.');
document.getElementById( e.target.id ).value = '';
return false;
}
})
j$('.fromdatepickerctl').datepicker('update', fromDateStart );
j$('.todatepickerctl').datepicker('update', toDateStart );
function getTodayDate(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
//document.write(today);
return today;
}
</script>
I assume this is the same issue that you are facing .
This enables only Sunday in the datepicker .
jquery ui date picker limit to Sundays
$(function(){
$("#thedate").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: enableSUNDAYS
});
// Custom function to enable SUNDAY only in jquery calender
function enableSUNDAYS(date) {
var day = date.getDay();
return [(day == 0), ''];
}
});
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/
I am working on a desktop app, and i need to disable the autolaucher if year is 2018 for exp.
var AutoLaunch = require('auto-launch');
var appLauncher = new AutoLaunch({
name: 'app'
});
appLauncher.isEnabled().then(function (enabled) {
if (enabled)
return;
return appLauncher.enable()
}).then(function (err) {
});
You have any ideas ? :)
Thanks
We can disable the auto-launch at any time using :
appLauncher.disable();
This is the full code :
var today = new Date();
var year = today.getFullYear();
var AutoLaunch = require('auto-launch');
var appLauncher = new AutoLaunch({
name: 'app',
});
appLauncher.isEnabled().then(function (enabled) {
console.log("start ", enabled);
if (enabled && year > "2016") {
return appLauncher.disable();
}
if (enabled) {
return;
}
return appLauncher.enable();
}).then(function (err) {
});
Hope this will help :)
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);