I'm using bootstrap datetimepicker with my ASP.net MVC5 application.
I'm trying to fetch the disabled dates from DB, create an Array of disabled dates and then pass that array in javascript:-
C#
public String[] disabledDates { get; set; } // This model property gets set from database.
e.g. disabledDates = ["2017-08-29","2017-11-22"];
<script type="text/javascript">
$(function () {
var disabledDatesAr = '#Model.disabledDates';
$('#scheduleDate').datetimepicker({
useCurrent: false,
minDate: new Date(),
format: 'DD-MM-YYYY hh:mm A',
showTodayButton: true,
sideBySide: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
disabledDates: disabledDatesAr
});
});
</script>
But the above code doesn't work and DateTimePicker popup getting disabled.
Can anyone please guide me on how to assign this array value to disabled dates?
Thanks in advance.
When you have this section:
var disabledDatesAr = '#Model.disabledDates';
You are really just calling the ToString method of the object. The ToString method of an array outputs like this System.String[]. So really you are doing this in razor:
var disabledDatesAr = 'System.String[]';
What you want to do is create a JSON array, this will output the syntax you are expecting.
disabledDates = ["2017-08-29","2017-11-22"];
A nice neat way to do this would be as Stephen Muecke has mentioned in the comments.
var disabledDatesAr = #Html.Raw(Json.Encode(Model.disabledDates));
Without the Html.Raw razor would try to encode characters.
Here is some useful documentation: Json.Encode and Html.Raw.
Related
I am trying to implement a date picker in angularjs and bootstrap but I am facing a few issues:
initial date is not set
when I am trying to open one date picker why does it open all the date pickers?
Here is my code:
http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW?p=preview
$scope.dateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: new Date(1970,1,1),
startingDay: 1
};
function disabled(data) {
return true
}
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.formats = ['dd-MMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.popup1 = {
opened: false
};
Why does it open all date pickers when only one is clicked? See image below.
initial date is not set
This is because you are setting the model to a string, but it requires an actual date object. Do this:
date: {
date: 'date',
name: d // not this -> moment(d).format('DD-MMM-YYYY')
}
when I am trying to open one date picker why does it open all the date pickers?
Since you're using ng-repeat to create multiple inputs, you need to also use separate properties for the is-open attribute on each input. I would suggest adding an opened property to the items you're repeating, like this:
date: {
date: 'date',
name: d,
opened: false
}
Then, on the click event of the button, pass in the repeated item:
ng-click="open1(x)"
Next, set the is-open attribute:
is-open="x.opened"
Finally, set the opened property on it like this:
$scope.open1 = function(x) {
x.opened = true;
};
Here is the plnkr.
I have an array that I send from the backend, from which I create a new array of objects, for which I then use JSON.stringify to make it ready for the selectize, the array looks like this then:
[{"question":"Challenge question"},{"question":"Challenge question"},{"question":"Challenge question"}... and so on
I am trying to use that new array with selectize, but no option gets rendered:
This is the script:
var engagementsOptions = [];
icoop.engagements.map(function(item) {
engagementsOptions.push({
"question" : item
});
});
$('#engagement_question').selectize({
options: JSON.stringify(engagementsOptions),
create: true,
});
I think there is a problem with the string you are constructing for the options argument. I think it should be a comma-delimited string. Try something like this maybe (not tested with selectize, just based on the docs)?
//example data
var data_from_server = [{"question":"Challenge question 1"},{"question":"Challenge question 2"},{"question":"Challenge question 3"}];
var engagementsOptions = [];
data_from_server.map(function(item) { engagementsOptions.push(item["question"]); });
$('#engagement_question').selectize({
options: engagementsOptions.join(','),
create: true,
});
I have an array of Javascript datetime objects which I want to display on a cal-heatmap. For this, i've done the following:
var startTimes = [] //array of datetimes to show
var cal = new CalHeatMap();
cal.init({
itemSelector: '.heat-map',
domain: 'day',
subDomain: 'hour',
range: range,
start: new Date(startTimes[0]),
highlight: new Date(startTimes[0])
});
for (s in startTimes) {
cal.highlight(cal.options.highlight.push(new Date(startTimes[s])));
}
This however, doesn't seem to work as only the first date gets marked.
Note that push returns the new length of the array and not the element you just added to it.
According to this and the doc of cal-heatmap/#highlight which states that the method expects a date, I guess your code should be:
for (s in startTimes) {
var date = new Date(startTimes[s]);
cal.options.highlight.push(date);
cal.highlight(date);
}
I have a problem with Jquery UI datepicker. When I try to set numberOfMonths options, the script fails with an error of "undefined is not a function". I'm using jquery ui 1.11.2. Here is my code:
$(document).ready(function () {
var fechaDefecto = new Date('2014/01/01');
var fechaFin = new Date('2014/08/31');
var SelectedDates = {};
SelectedDates[new Date('12/25/2014')] = new Date('12/25/2014');
SelectedDates[new Date('12/12/2014')] = new Date('12/12/2014');
SelectedDates[new Date('06/06/2014')] = new Date('06/06/2014');
$('#cal').datepicker(
{
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
} else {
return [true, '', ''];
}
},
minDate : fechaDefecto,
maxDate : fechaFin,
numberOfMonths: [2, 3]
});
});
If I set numberOfMonths to a number and not an array, there is no problem, but the thing is I need to display a semester with two rows of 3 calendars for my application.
I will really appreciate some help, please.
Another weird thing is that when I call the getter method for that option: $('#cal').datepicker('option', 'numberOfMonths'); I get a correct output because it shows the array ([2, 3]).
It seems like the last stable version of Jquery UI wasn't working in my case, I switched to using Jquery 1.8 and Jquery UI 1.9 and now it's working fine
I'm trying to figure out how to disable all the dates older than today, this gets tricky with the bootstrap datetime picker I am using below.
The examples allows for an array of dates to be passed when creating the object :
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
How can I do this without calculating all the dates before today and passing that to the function ?
Doc : http://eonasdan.github.io/bootstrap-datetimepicker/#example8
I think you looked for a bad option....
Doc : Look at here : http://eonasdan.github.io/bootstrap-datetimepicker/#options
In this doc, the option's name is minDate
Extract :
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date <---- HERE
maxDate: ,
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: moment("11/01/2013", "DD-MM-YYYY"),
minDate: moment()
});
});
Apart from setting the minDate property, you might also want to disable times before the current time. You would do this as follows:
First, you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in the jsFiddle I prepared for you:
GO TO THE DEMO