I'm using the JQuery DatePicker as a little Calendar Dashboard, marking dates with "agenda items" (events, office closed, meetings ...).
The dates are marked and clickable, but now I'd like to navigate to the "Day Detail" when the user clicks on one of the dates.
Here's what I have so far, but I'm missing (see ???) how I can append the selected date to the Url.Action method:
$(document).ready(function() {
$("#eventCalendar").datepicker({
numberOfMonths: 3,
beforeShowDay: highlightDays,
onSelect: function(date, instance){
window.location = '<%= Url.Action("Items", "Calendar", new { date = ???}) %>';
}
});
});
window.location = '<%= Url.Action("Items", "Calendar") %>?date=' + encodeURIComponent(date);
Related
I've placed a kendo DateTime Picker on a web page.
According to the requirement initially it should display only date and if user needs then he/she can select the time as well.
Below is the code which initially fill the kendo datetime picker:
<input id="txtDate" type="text" maxlength="10" style="width: 250px;" value="" />
<script type="text/javascript">
$('#txtDate').kendoDateTimePicker({ value: new Date() });
</script>
The above code fill date and time. But i want to fill only current date.
I tried with the following code to check if it can fill only date. But it adds the 12:00 AM with date.
$('#txtDate').kendoDateTimePicker({ value: new Date('04/30/2017') });
Is there any way to fill only date in Kendo DateTime picker?
What you are looking is kendoDatePicker, which will allows user to select only date.
$(document).ready(function()
$("#txtDate").kendoDatePicker();
});
Edit: or add formatting property to kendoDateTimePicker, which will effect how value is displayed for user.
$('#txtDate').kendoDateTimePicker({
value: new Date(),
format: 'MM/dd/yyyy'
});
If you never need to display the time one possible option might be to store the datetime value as an attribute of the current widget and on the submit event of the form manually ovverride the values:
<script>
$(document).ready(function () {
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
change: function(data){
data.sender.element.attr("value", data.sender.value());
}
});
});
$("form").on("submit", function(){
$("input").each(function(){
var inputValue = $(this).attr("value");
if(inputValue){
$(this).val(inputValue);
}
});
})
</script>
If you want to display the time after the user pick a time you can change the format of the widget subscribing a function to the open event:
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
value: new Date(),
open: function(e){
if(e.view == "time"){
this.setOptions({format: "yyyy/MM/dd HH:mm"})
}
if(e.view == "date"){
this.setOptions({format: "yyyy/MM/dd"})
}
}
});
You can build on the answers given above and detect when a time is selected then reapply a display format in javascript.
Via jQuery:
$('#txtDate').datetimepicker({
format: 'L'
});
Instead of using Kendo.DateTimePickerFor you can use DatePickerFor.
This way you can get rid of hour part.
#(Html.Kendo().DatePickerFor(model => model.StartDate).HtmlAttributes(new { #class = "form-control" , required="required"}))
Technically, they are not on the "same" page - the widget is on the main page, and the picker is on a sub-page which gets loaded inline through Jquery ajax.
I have a Datepicker in Widget mode on a page which shows up fine
<div id="datepicker" style="margin-top: 3px;"></div>
JQuery portion -
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
if ($.inArray(y + '-' + (m + 1) + '-' + d, highlightDates) != -1) {
return [true, 'ui-datepicker-testavailable', ''];
}
return [true];
},
onSelect: function (selectedDate, instance) {
PopulateScheduledTestsByDate(new Date(selectedDate));
},
onChangeMonthYear: function (year, month, inst) {
GetScheduledTestDatesByMonth(month, year);
}
});
This works fine and shows up beautifully on the page.
There is a section on this page, which loads up a second page using Jquery Ajax. On this "second" page, there is a datepicker attached to a textbox, which does not show up when clicked on the text box.
<input id="runSchedule" name="runSchedule" data-bind="value: runSchedule, visible: pageModeEdit" class="inputfield" style="display: none" />
JQuery portion -
$(document).ready(function () {
$('#runSchedule').datepicker();
});
If I comment out the Widget datepicker Javascript on the main page, the input datepicker shows up fine. But I cannot get both to show up together. Anything I am missing here?
Appreciate any help.
I am using jquery-ui-1.10.4.js and ASP MVC.
In my View I am accepting an optional date as input;
#Html.EditorFor(model => model.Assessment.SsipAccreditationDate)
I have an Editor Template which injects the datepicker class;
#model DateTime?
#Html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty),
new { #class = "datePicker", #style = "width:200px;" })
I have jquery code to hook up the datepicker with the date field;
if ($(".datePicker").length) {
$(".datePicker").datepicker({ showOn: 'both', dateFormat: constantDateFormat, changeMonth: true, changeYear: true })
.next('button.ui-datepicker-trigger')
.attr("tabIndex", "-1");
}
When the View is loaded, if this date field is empty the datepicker automatically displays. What I would prefer would be for the datepicker to only be displayed if the user clicks on it or the associated button. This is what the showOn: Both configuration is meant to acheive.
Notice in the jquery the tab index is set to -1, so the reason for the datepicker showing cannot be to do with the field in focus.
So how do I stop the datepicker showing when the View is loaded?
You can disable it by using defaultDate attribute.
$(".datePicker").datepicker({
defaultDate: ''
})
I do not think this is the best answer, but I found I could do this by disabling the datepicker initially, and then enabling it once it has been clicked on;
$(document).ready(function () {
initialiseEdit();
});
var initialiseEdit = function () {
// Disable the datepicker to ensure the datepicker is not shown when the page is loaded
$('#Assessment_SsipAccreditationDate').datepicker("disable");
// Class to stop the control from looking disabled
$('#Assessment_SsipAccreditationDate').addClass('inputBox');
};
// This code is to make the datepicker function as though it is enabled, whether it is or not.
$('.clickEnable').click(function () {
$('#Assessment_SsipAccreditationDate').datepicker("enable");
$('#Assessment_SsipAccreditationDate').datepicker("show");
});
Because '#Assessment_SsipAccreditationDate' is disabled, I had to wrap it with a span containing the clickEnable class and put the click event on that.
I´m trying to add some functionality to a form with JQuery UI´s Datepicker.
1. when i select a date in the start date picker it should show the next date in end datepicker.
2. when i select the end date as less than startdate it should show the previous date of enddate and show a start datepicker.
I have clear button in the datepicker when i click on the clear button in start datepicker it open the end datepicker. I do not want like this. I want to open the end date picker by selecting the date on start date
$( "#start").datepicker({
minDate: new Date(currentYear, currentMonth, currentDate),
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(addclearbutton, 1 );
},
beforeShowDay: highlightDays,
onChangeMonthYear: function( input ) {
setTimeout(addclearbutton, 1 );
},
onSelect: function (dateStr,input) {
daterangevalidation(dateStr,input);
},
onClose:function() {
$("#end").datepicker('show');
}
});
$( "#end").datepicker({
minDate: new Date(currentYear, currentMonth, currentDate),
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(addclearbutton, 1 );
},
beforeShowDay: highlightDays,
onChangeMonthYear: function( input ) {
setTimeout(addclearbutton, 1 );
},
onSelect: function (dateStr,input) {
daterangevalidation(dateStr,input);
}
});
Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.
Take a look at this : Issue 167: Mini Calender to control Main Calender.
Or make the combination with following example :
$(document).ready(function() {
$("#fullcalendar").fullCalendar({
// .....
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
}
<div id="fullcalendar"></div>
<div id="datepicker"></div>
The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date
This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button
customButtons: {
gotoDate: {
text: 'Go to date',
click: function () {
$(this).datepicker({
autoclose: true
});
$(this).datepicker().on('changeDate', function (e) {
$('#fullcalendar').fullCalendar('gotoDate', e.date);
});
$(this).datepicker('show');
}
},
},
footer: {
'center': 'gotoDate'
},