Datepicker Full Year Calendar Responsive - responsive-design

Is it possible to Make Datepicker Full Year Responsive on all devices
JSFiddle:- https://jsfiddle.net/burhanuddin061/n72w4wzm/1/
<input type="text" id="dueDate">
<div id="year-picker"></div>
Javascript
$(function () {
var eventDates = {};
eventDates[new Date('5/04/2017')] = new Date('5/04/2017');
eventDates[new Date('5/06/2017')] = new Date('5/06/2017');
eventDates[new Date('5/20/2017')] = new Date('5/20/2017');
eventDates[new Date('5/25/2017')] = new Date('5/25/2017');
$('#year-picker').datepicker({
numberOfMonths: [3, 4],
dateFormat: "dd/mm/yy",
defaultDate: new Date(2015, 0, 1),
stepMonths: 12,
beforeShowDay: function (date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", highlight];
} else {
return [true, '', ''];
}
},
firstDay: 5,
onSelect: function (dateText, inst) {
$("#dueDate").val(dateText);
},
});
});

Related

Disable dates from dropdownlist in datepicker

I have a dropdownlist with dates. And I can iterate through the dates in jquery. But I also have a datepicker and I want to disable the dates from the dropdownlist also in the Datepicker.
The id of dropdownlist is: #form_one3.
and the javascript is this:
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
beforeShowDay: function(date) {
$("#form_one3 > option").each(function() {
//alert(this.text);
var array = [this.Text].toString();
alert(array.toString());
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1];
});
},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
if I do this:
$("#form_one3 > option").each(function() {
alert(this.text);
});
I see all the dates from the dropdownlist.
but the complete javascript file gives only empty values and the datePicker doenst work anymore.
Thank you
If I do $("#form_one3 > option:gt(1)").each(function () { between the beforeShowDay: function (date) {
The DatePicker doesnt work anymore.
So where to put the .each funtion then, so the Datepicker will work.
Thank you
The format is like this:
<option value="2015-07-27T00:00:00Z">27-7-2015</option>
I have it now like this:
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
$("#form_one3 > option:gt(1)").each(function () {
var array = [this.Text].toString("yy-mm-dd");
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1];
});
},
changeMonth: true,
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
But I get this error:
Error: Unable to get property '0' of undefined or null reference
and if I debug I see every time that:
return [array.indexOf(string) == -1];
string is : 29-06-2015.
this is the complete script:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
$("#form_one3 > option:gt(0)").each(function () {
//alert(this.text + ' ' + this.value);
//var array = ["2015-03-14", "2015-03-15", "2015-03-16"];This works :)
var array = [this.Text].toString("yy-mm-dd");
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1];
});
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
it breaks on this line:
unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] ||
(minDate && printDate < minDate) || (maxDate && printDate > maxDate);
and this is the error:
unable to get property 0 of undefined or null reference
I also tried like this:
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
$("#form_one3 > option:gt(0)").each(function (key, value) {
if (date == value.toString('d-M-yy')) {
var array = [this.Text].toString("d-M-yy");
var string = jQuery.datepicker.formatDate('d-M-yy', date);
return [array.indexOf(string) == -1];
}
else {
return 0;
}
});
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
I assume you are basing your code on this related question. I think what you want to do is, in beforeShowDay, check if the date is any of the dates in your drop down. Depending on your version of jQuery, you can use either find() or filter(). I also think you need to format your date in the same format as your option text, with no leading zeroes in month or date and with the day then month then year.
Try something like this if you are using jQuery > 1.9:
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('d-m-yy', date);
return ($('#form_one3 option').filter(function () { return $(this).html() == dateString; }).length == 0);
}

Setting max date on datepicker not working

I currently trying to set maxDate on a datepicker and maxDate: '<%= courseEndDate.ToString("dd-MM-yy") %>'
But when set on datepicker,
$('#<%= tbStartDate.ClientID %>').datepicker({
dateFormat: 'dd-MM-yy',
changeMonth: true,
minDate: 0,
maxDate: '<%= courseEndDate.ToString("dd-MM-yy") %>',
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
return [array.indexOf(string) == -1]
},
onSelect: function (date) {
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$('#<%= tbEndDate.ClientID %>').datepicker("option", "minDate", endDate);
}
});
Datepicker whole calendar becomes disabled. I tried alert the maxDate and
<%= courseEndDate.ToString("dd-MM-yy") %> gives me '24-12-16'. So everything seems ok to me, but the calendar is disabled..
May I know why is that so?
Why would 24-12-16 be a valid setting for a datepicker that has a format of 24-December-2016 ?
You're going to have to parse that date from the given format to a date object
$('#<%= tbStartDate.ClientID %>').datepicker({
dateFormat: 'dd-MM-yy',
changeMonth: true,
minDate: 0,
maxDate: $.datepicker.parseDate('dd-mm-y','<%= courseEndDate.ToString("dd-MM-yy") %>'),
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
return [array.indexOf(string) == -1]
},
onSelect: function(date) {
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$('#<%= tbEndDate.ClientID %>').datepicker("option", "minDate", endDate);
}
});

specific dates in DatePicker

I am using a datepicker in a MVC4 application.
But I want to select just a specific range in the DatePicker. Because now there is a dropdownlist where the user can select a date. But the dropdownlist has to be replaced by a datepicker.
I have a method for the AvailableDates, like this:
public AvailableDates GetAvailableDates(string branchPublicId, string servicePublicId)
{
HttpWebRequest httpRequest = CreateHttpRequest("calendar-backend/public/api/v1/branches/" + branchPublicId + "/services/" + servicePublicId + "/dates", HttpMethod.Get, "application/json");
string json = Get(httpRequest);
return JsonConvert.DeserializeObject<AvailableDates>(json);
}
And this is the JQuery from the DatePicker:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'dd-MM';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
But how to use that method in the DatePicker?
Thank you
But how to use this piece:
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
In the DatePicker plugin?
Thank you
I try it like this:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
$("input.qmatic-dateslot", e.args.data).each(function () {
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'dd-MM';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
But then by date I get the message: Expected Identifier
if I do it like this:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
//var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
beforeShowDay: function (date) {
var arr = ["2015-03-14", "2015-03-15", "2015-03-16"]; // Should be your json array of dates coming from server
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
Then I get this error:
Uncaught ReferenceError: array is not defined
but If I do it like this:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
beforeShowDay: function (date) {
//var arr = ["2015-03-14", "2015-03-15", "2015-03-16"]; // Should be your json array of dates coming from server
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1]
},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
The dates that are in the array are also selectable
Thank you
I try to call the method with a ajax call, like this:
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
$.ajax({
type: "GET",
url: "QMatic/GetAvailableDates",
data: dataString,
dataType: "json",
}),
beforeShowDay: function (date) {
var array = ["2015-03-14", "2015-03-15", "2015-03-16"];
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1];
},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
But $.ajax is not recognisable.
Thank you
I also tried like this, to call the method. the class name of the method is: QMatic:
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
type: "GET",
url: "~/QMatic/GetAvailableDates",
data: dataString,
dataType: "json",
//beforeShowDay: function (date) {
// var array = ["2015-03-14", "2015-03-15", "2015-03-16"];
// var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
// return [array.indexOf(string) == -1];
//},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
I am also using xforms, like this:
<xf:select1 ref="serviceid" incremental="true">
<xf:label>Selecteer product</xf:label>
<xf:item>
<xf:label>
<xf:output value="concat('(',exf:label(.),')')" />
</xf:label>
<xf:value></xf:value>
</xf:item>
<xf:itemset nodeset="instance('qmatic')/services/item">
<xf:label ref="name" />
<xf:value ref="value" />
</xf:itemset>
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="../dateslot" value="''" />
<xf:setvalue ref="../timeslot" value="''" />
<xf:setvalue ref="instance('qmatic')/dateslots/#result" value="qmatic:getavailabledates(instance('qmatic')/dateslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid)" />
</xf:action>
</xf:select1>
<xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
<xf:label>Selecteer datum</xf:label>
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="../timeslot" value="''" />
<xf:setvalue ref="instance('qmatic')/timeslots/#result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
</xf:action>
</xf:input>
<xf:select1 ref="dateslot" incremental="true">
<xf:label>Selecteer datum</xf:label>
<xf:item>
<xf:label>
<xf:output value="concat('(',exf:label(.),')')" />
</xf:label>
<xf:value></xf:value>
</xf:item>
<xf:itemset nodeset="instance('qmatic')/dateslots/item">
<xf:label ref="name" />
<xf:value ref="value" />
</xf:itemset>
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="../timeslot" value="''" />
<xf:setvalue ref="instance('qmatic')/timeslots/#result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
</xf:action>
</xf:select1>
so here are the available dates in a dropdownlist:
<xf:select1 ref="dateslot" incremental="true">
<xf:label>Selecteer datum</xf:label>
<xf:item>
<xf:label>
<xf:output value="concat('(',exf:label(.),')')" />
</xf:label>
<xf:value></xf:value>
</xf:item>
<xf:itemset nodeset="instance('qmatic')/dateslots/item">
<xf:label ref="name" />
<xf:value ref="value" />
</xf:itemset>
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="../timeslot" value="''" />
<xf:setvalue ref="instance('qmatic')/timeslots/#result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
</xf:action>
</xf:select1>
and this is the datepicker:
<xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
<xf:label>Selecteer datum</xf:label>
</xf:input>
what also has to return the only availbe dates from the method:
GetAvailableDates
You can look into the beforeshowday event in datepicker. Look at the following link for an example -
Jquery UI datepicker. Disable array of Dates
Updated code
inp.datepicker({
dateFormat: dateFormat,
changeMonth: true,
beforeShowDay: function(date){
var arr = ["2013-03-14", "2013-03-15", "2013-03-16"] ; // Should be your json array of dates coming from server
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
},
changeYear: false,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})

Can't create a Excel document MVC5

Hi i'm trying to create an excel document using this link, but it does not return anything then it's called, it does not throw any exception in the code nor in the view.
This is the method in the controllere:
public ActionResult ExportData(string toDateTime, string fromDateTime)
{
var gv = new GridView
{
DataSource = _fttDataProvider.SelectRangeWasteRegistrations(Convert.ToDateTime(toDateTime), Convert.ToDateTime(fromDateTime), 1).ToList()
};
gv.DataBind();
return new DownloadFileActionResult(gv, "Cars.xls");
}
This is the javascript that is calling it
$('#SubmitExport').click(function (e) {
e.preventDefault();
var toDate = $("#toDateTime").val();
var fromDate = $("#fromDateTime").val();
$.ajax({
type: "POST",
url: ol.url("~/Home/ExportData"),
data: { "toDateTime": toDate, "fromDateTime": fromDate },
});
The reason i'm using javascript is to the get values from the two jquery ui datepickers i'm using to get the to and from dates.
$("#fromDateTime").datepicker({
defaultDate: "+1w",
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#toDateTime").datepicker("option", "minDate", selectedDate);
}
});
$("#toDateTime").datepicker({
defaultDate: "+1w",
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#fromDateTime").datepicker("option", "maxDate", selectedDate);
}
});

ASP.net jquery add +1 day in 2nd calendar datepicker

$(document).ready(function () {
$("#arrival").datepicker({
minDate: 0,
numberOfMonths: 2,
onSelect: function (selected) {
$("#departure").datepicker("option", "minDate", selected)
}
});
$("#departure").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#arrival").datepicker("option", "maxDate", selected)
}
});
});
i have Arrival Date and Departure Date. In departure date, i want to add +1 more day.
example:
i choose 2/20/2013 in ARRIVAL then in DEPARTURE calendar the minimum date i should pick
will be 2/21/2013 NOT 2/20/2013. HELP ME PLEASE! i am newbie in asp and jquery..
I guess you just add one day then ?
$("#arrival").datepicker({
minDate: 0,
numberOfMonths: 2,
onSelect: function (selected) {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate()+1);
$("#departure").datepicker("option", "minDate", minDate)
}
});
FIDDLE
You just need to parse.
$("#arrival").datepicker({
minDate: 0,
numberOfMonths: 2,
onSelect: function (selected) {
$("#departure").datepicker("option", "minDate", Date.parse(selected)+1)
}
});
$("#departure").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#arrival").datepicker("option", "maxDate", Date.parse(selected)-1)
}
});

Resources