We Keep Coding

Apply new array of disabled dates on the monthChange event of the bootstrap datepicker

I'm using this date picker.
I have this code:
<input type="text" autocomplete="off"
class="aDatePicker"
id="new-date" name="date">
<script>
var disabled_dates = ['08/12/2016','08/13/2016','08/14/2016'];
$(function () {
applyDatePickerToElement();
function applyDatePickerToElement() {
$('.aDatePicker').datepicker({
datesDisabled: disabled_dates,
language: currentLocale,
format: dateFormatByLocale,
startDate: 'now'
});
}
$('#new-date').on('changeMonth', function (ev) {
disabled_dates=['09/01/2016','09/02/2016','09/03/2016','09/04/2016','09/05/2016'];
applyDatePickerToElement();
});
});
</script>
This code, at load applies the date picker to the element, and gives it disabledDates of 8/12, 8/13 and 8/14. Then when you change the month, it should apply new disabled dates to the element.
I'd like the disabled dates option of the datepicker to update when I fire the changeMonth event. So when the changeMonth event is fired I can do an AJAX call to get a list of disabled dates for that month.
Building and applying a list of disabled dates going past a few months is not an option, needs to be a month by month basis.

How to set the date in materialize datepicker

I am using materializecss.com Datepicker. When i try to set date with jquery, the date doesn't get set. Here is my Code :-
// Materialize Date Picker
window.picker = $('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 100, // Creates a dropdown of 15 years to control year
format: 'dd/mm/yyyy'
});
<input type="text" id="Date" class="datepicker" />
On Click event of a Button , I am setting the date :-
$("#Date").val('23/01/2015');
When i open the datepicker it shows me today's date.
How to set the date in materialize datepicker?

Materialize datepicker is a modified pickadate.js picker.
Accodging to their API docs, this is how to set the picker:
Get the picker:
var $input = $('.datepicker').pickadate()
// Use the picker object directly.
var picker = $input.pickadate('picker')
Set the date:
// Using arrays formatted as [YEAR, MONTH, DATE].
picker.set('select', [2015, 3, 20])
// Using JavaScript Date objects.
picker.set('select', new Date(2015, 3, 30))
// Using positive integers as UNIX timestamps.
picker.set('select', 1429970887654)
// Using a string along with the parsing format (defaults to `format` option).
picker.set('select', '2016-04-20', { format: 'yyyy-mm-dd' })

just add the format you want your date looks like in the attributes of your element.
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
format: 'dd-mm-yyyy' });

You can use methods of datepicker which are present in V1.0.0-rc.2.
document.addEventListener('DOMContentLoaded', function() {
var options = {
defaultDate: new Date(2018, 1, 3),
setDefaultDate: true
};
var elems = document.querySelector('.datepicker');
var instance = M.Datepicker.init(elems, options);
// instance.open();
instance.setDate(new Date(2018, 2, 8));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<input type="text" class="datepicker">
defaultDate will set a default Date that will be shown in input-field of datepicker without even opening the picker.
instance.setDate() will select the date in datepicker when you'll open it.
Note- new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
The argument monthIndex is 0-based. This means that January = 0 and December = 11
Picker - Materialize
MDN - Date

Alle answers with pickadate() don't work anymore in newer versions of Materialize. The method is now named datepicker(). Here's my code snippet:
var element = document.querySelector('.datepicker');
M.Datepicker.getInstance(element).setDate(new Date(2018,8,7), true);

As per the docs materializecss.com
Check the Date format options.
// date picker
$(document).ready(function(){
$('.datepicker').datepicker( {"format":'dd-mm-yyyy'} ).datepicker("setDate", new Date());
});
You can remove and change the code to below if you do not need current date as highlighted in calendar,
// date picker
$(document).ready(function(){
$('.datepicker').datepicker( {"format":'dd-mm-yyyy'});
});

You can pass in the options that you want to default to on init.
For example the below js code would work with markup:
const elems2 = document.querySelectorAll('.datepicker');
for (element of elems2) {
const date = element.dataset.defaultDate
if (date !== undefined) {
M.Datepicker.init(element, {defaultDate: new Date(date), yearRange: 15})
}
else {
M.Datepicker.init(element, {})
}
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<input class="validate datepicker valid" required="required" data-default-date="2009-07-11 10:14:47 -0700" name='picker' type="text">
<label for="picker" class="active">Date Picker 10 years ago</label>

If you are using angular, or something similar, in order to manage your web application and you are not able to instance the Datepicker object, according to the materialize documentation, using jQuery you can refer to these methods of the object:
$('.datepicker').datepicker('setDate', new Date());
In the first parameter, in this case setDate, you may specify the method name that you are about to use. In the second parameter, in this case new Date(), you will pass the value to the function (if any).
In the example, that line will update the date of all datepickers with the class .datepicker to today.

var $input = $('.datepicker').pickadate()
// Use the picker object directly.
var picker = $input.pickadate('picker')
Heading

$('#elementID').pickadate('picker').set('select', '21/05/2017', { format: 'dd/mm/yyyy' }).trigger("change");
This should suit your needs in one line. Trigger change you may need or maybe not, depends your situation, like me i need it for validation to trigger. Also include with format date just in case some people need it.

watch out for your css and js version of materialize:
if in the <head> you have
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
then stick to it having same JS version
so that you can use $('.datepicker').pickadate('picker').set('select','your parsed date',{format:'your format'}).trigger('change')
If version is 1.0.0 then you will have to use
$('.datepicker').datepicker();

Kendo Scheduler RecurrenceEditorFor set Start to selected Date

I have made a CustomEditorTemplate for a Scheduler. And there is one thing that does not work as expected.
For the RecurrenceEditorFor, it has an End On, where you can select a date. But for our RecurrenceEditorFor, it has automatically set the Start to the current date, and not the selected date of the scheduler.
Our RecurrenceEditorFor looks like:
<div data-container-for="recurrenceRule" class="k-edit-field">
#(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule).Messages(m => SchedulerHelper.MessageLocaliztion(this, m))
.HtmlAttributes(new { data_bind = "value:recurrenceRule" })
)
</div>
I could, of cause set the Start to a specific date,
<div data-container-for="recurrenceRule" class="k-edit-field">
#(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule).Messages(m => SchedulerHelper.MessageLocaliztion(this, m))
.HtmlAttributes(new { data_bind = "value:recurrenceRule" })
.Start(new DateTime(2014,8,4))
)
</div>
, but this would not work, if I select a date before this one.
EVEN if I select a date after this current date, it will give me this date. So it is not because this current date is a minimum, but it must be a static date, set somewhere, or somehow.
I have also tried to set the text in the input field with some JavaScript, but this will not make it possible to select a date before the current date. And this will also mess up the RecurrenceRule.
I can see it works as standard, but not for us, after we have added the CustomEditorTemplate. Do we miss something, or made something wrong ?

I found a work around for this:
I added a click method on the Recurrencerule div:
$("div[name='RecurrenceRule']").on("click", function () {
window.changerecurrenceStart();
});
and the methochangerecurrenceStart :
function changerecurrenceStart()
{
var date = $("#startDate").data("kendoDatePicker")._value;
$("#RecurrenceRule").data("kendoRecurrenceEditor").options.start = date;
$("#RecurrenceRule").data("kendoRecurrenceEditor").options.value = date;
}
This worked well for me.

Bootstrap Datepicker restrict available dates to be selected

I am using eternicode bootstrap-datepicker;
I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected. My point is, when some data is ready in a particular date. That date can be selected by user.
At the current point, I am restricting by 7 days from now. However, Saturday and Sundays are days which never have some data;
In this way, I can just show a range of dates, but no "holes" between those ranges. So, I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected from user.

Bootstrap itself does not have a built in datepicker last i checked. If however you are talking about the bootstrap-datepicker third party library that eternicode wrote.. I believe it supports the same events as the jquery datepicker.. so:
beforeShowDay
Function(Date). Default: $.noop
A function that takes a date as a parameter and returns one of the following values:
undefined to have no effect
A Boolean, indicating whether or not this date is selectable
A String representing additional CSS classes to apply to the date’s cell
An object with the following properties:
enabled: same as the Boolean value above
classes: same as the String value above
tooltip: a tooltip to apply to this date, via the title HTML attribute
usage something like this (below example only allows weekends and the two dates in the custom array below to be selected):
// use this to allow certain dates only
var availableDates = ["15-1-2014","16-1-2014"];
$(function()
{
$('#txtDate').datepicker({
beforeShowDay:
function(dt)
{
// use dt.getDay() to restrict to certain days of the week
// or a custom function like "available" below to do more complex things
return [dt.getDay() == 0 || dt.getDay() == 6 || available(dt), "" ];
}
});
});
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return true;
} else {
return false;
}
}
Lastly, a working FIDDLE to show above in action.. using jquery datepicker, but same difference...

Make as following:
var available_Dates = ["23/03/2014","21/03/2014"];
$('.datepicker').datepicker({
language: "pt-BR",
autoclose: true,
format: "dd/mm/yyyy",
default: 'dd/mm/yyyy',
beforeShowDay: function(date){
var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'dd/mm/yyyy', 'pt-BR');
if ($.inArray(formattedDate.toString(), available_Dates) == -1){
return {
enabled : false
};
}
return;
}
});

change date format using locale

I am working on a simple textbox that has Dojo datepicker. The code below parses the date correctly with locale en-gb (dd/mm/yyyy). However the date that is picked from the datepicker is still in locale en-us (mm/dd/yyyy). So, it cannot parse the date that if it exceeds the 12th of the month.
require(["dojo/date/locale","dijit/form/Button", "dojo/dom", "dojo/domReady!"],function(locale,Button,dom){
var myButton = new Button({
label: "Submit Date",
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb'
});
alert(date);
}
}, "submit");
});
How do I fix this?

I solved this problem by mentioning the date format explicitly.
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb',
datePattern:'dd/MM/yyyy'
});
alert(date.toLocaleString());
}
And, mentioned the pattern inline as well.
constraints="{datePattern:'dd/MM/yyyy', strict:true}"