Populate values of inline multidate Bootstrap DatePicker - javascript

I'm new to JavaScript and still kind of new web development in general so I may be off in my understanding here somewhere.
Here goes:
In an ASP.NET MVC project with Entity Framework and Razor.
I'm using the bootstrap datepicker to try to create an inline multidate selector. I use a hidden input field to capture the list of dates from the datepicker as follows (note: the reason I'm using a hidden input field here is because I don't want to show a textbox, only the inline datepicker. However, I can't get the DatePicker to both appear inline and also use an input div to capture the multidate string.):
<div id="datepicker" class="datepicker datepicker-inline" data-date-format="dd/mm/yyyy"/>
<input type="hidden" id="hiddenForDates" value="#Model.SelectedDateString" name='#Html.NameFor(model => model.SelectedDateString)'/>
Then some script to tie it in:
$(document).ready(function () {
$('.datepicker').datepicker({
multidate: true,
inline: true
});
$('#datepicker').on("changeDate", function () {
$('#hiddenForDates').val(
$('#datepicker').datepicker('getFormattedDate'))
});
});
The HTML input captures the string of dates from the datepicker (like "01/01/2016, 01/02/2015"...). Then in the script I'm setting up the DatePicker and when the changeDate event occurs, updating the value in the input to the string of dates.
The problem I'm having is when loading the page, I want the DatePicker to seed with the value from the input (right now it seems to populate one way). When my page loads, the hidden input contains the string of dates but the datepicker has no dates selected.
I've tried setDates and setUTCDates per the documentation but that doesn't seem to help (my value is a string of comma separated values, but even if I build an array of Dates it doesn't make a difference).
Does anyone have any suggestions?
Note: I should also point out that I have been able to get this to work using:
#Html.TextBoxFor(model => model.SelectedDateString, new{ #class = form-control datepicker})
but this does not allow me to use an inline datepicker.

Related

Selecting Readonly Datepickers by using RobotFramework and input date into it

Here is a working solution for choosing a date from a datepicker using robot framework.
Datepickers are basically input tags but some of them have an extra attribute "readonly" due to which it becomes difficult to add date into it.
1)First Check if datepicker is readonly or not.
-inspect the page , locate the tag and check.
if it is not read only we can directly use the below code to under previous day date.
${Yeterday_Date} = Get Current Date result_format=%d/%m/%Y increment=-1 day
Input Text ${locator} ${Yeterday_Date}
2)If it has an attribute readonly, remove that attribute and input date into it.
Execute Javascript document.querySelector("locator").removeAttribute("readonly");
Execute Javascript document.querySelector("locator").removeAttribute("onchange");
Execute Javascript document.querySelector("locator").setAttribute("value", "${Yeterday_Date}");
Some datepickers have an onchange attribute which is invoked after readonly attribute is removed, so its better to remove both the attributes.

Setting the default date on jquery datepicker without populating the underlying input field

If I do:
$datePicker.datepicker('setDate', null);
the underlying input field does not get set to any specific date, but the datepicker widget selects the current date automatically.
jsfiddle
If I try:
$datePicker.datepicker('setDate', "01-01-2014");
it will populate the date field. The same goes for setting defaultDate on the datepicker options.
jsfiddle
Is there any way to set the widget to a date without having the field populated?
I updated your JSFiddle to work with a textbox rather than a div.
As per jqueryui documentation:
defaultDateType: Date or Number or String
Default: null
Set the date to highlight on first opening if the field is blank.
Which means:
$('#date').datepicker({ defaultDate: '01/01/2015' });

jQuery UI datepicker and validate: skip validation and accept null or 0000-00-00 ?

I'm using a premade system/form that uses jquery ui Validate and Datepicker for date type fields.
I need to exclude from one page only the validation step: so I need to have the datepicker appearing for the class='date' field, but allowing to pass an empty field or in alternative a default 0000-00-00
Is there any way to do it? I'm trying but after a few hours of searching I cannot find a solution....

Kendo UI Datepicker disable typing

I want users to be able to change a Kendo UI Datepicker value only through its button and selecting the date from the pop-up. How can I prevent users from typing in the Datepicker textbox? Can I disable the textbox without disabling the whole control?
On your input element add this attribute and value...
onkeydown="return false;"
This will disable typed input and still allow using the calendar control input.
Use the control as below-
#(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
)
It will disable keyboard typing. Same way other conditions also can be handled.
Find your input element, and disable it
$('#datepicker').attr('disabled','disabled');
( tried it on the kendo demo website http://demos.kendoui.com/web/datepicker/index.html )
you can do it by two ways
//disable kendo ui datapicker click event
$(".k-datepicker input").bind('click dblclick',function () {
return false;
});
//make it readonly
$(".k-datepicker input").prop("readonly", true);
If you want prevent user to typing date in date picker and only select date from pop-up try this code
$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");
Of course, the date and time picker widget should have the option to force input only with UI and not by keyboard... Otherwise it's a recipe for a real DateTime "formating" nightmare !
I am quite surprised that the framework doesn't provide anything for this obvious use case.
I had the same need and got it to work using the following logic:
$("#date").kendoDatePicker({
format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");
That way the user cannot enter a value by keyboard and can only input a well formated date using the dropdown date selection window.
Indeed, the widget does not restrict user while typing in the input. The reason for this behavior is explained here:
Why widget does not restrict typing
Along with all other solutions shared in this thread, the one can create a custom Masked DatePicker, which will restrict the user to a specific date format. Check this how-to demo for more details:
Create Date Masking
**Note that this is not supported by Kendo UI as a built-in feature, hence you will need to use it on your own risk. The good news is that it works pretty good without known side effects.
.HtmlAttributes(new { onkeydown="return false" })
Justin's answer works, but it doesn't prevent a right mouse-click from pasting an incorrect value. You could use the oncontextmenu to prevent a right mouse-click
oncontextmenu="return false;"
This would also prevent the number in the calendar from being copied though.
for tagHelpers just use following
output.Attributes.Add("onkeydown", "javascript:return false;");
I have solved it on HTML level using onkeydown="return false;"
<input id="datePickerPastId" onkeydown="return false;" title="datepicker" style="width: 13%" class="mr-3" disabled />
The GlobalEventHandlers.onkeydown is supported by all browsers.

Why won't jQuery UI Datepicker work after using jQuery to change the value of the input box?

I have a function that imports information into a form.
I am using jQuery to place a date into an input box.
The ID of the input box is "depart_date" and I am trying to insert the value of (let's say) 04/01/2012.
$('input#depart_date').replaceWith('<input class="input_med hasDatepicker" type="text" id="depart_date" name="depart_date" value="04/01/2012">');
This works just fine. However, I lose my datepicker.
I have even tried to "reinitialize" it by using
$( "#depart_date" ).datepicker({ minDate: 0});
I just don't understand how to get my datepicker back.
You're not just changing the value, you're replacing the object entirely (and removing all the UI hooks [click, focus, blur events] along with it).
Try using just $('#depart_date').val('04/01/2012'); to assign the value. Or, better yet $('#datepart').datepicker('setDate', '04/01/2012');
Why replace the input? Why not simply change the value?
$('input#depart_date').val("04/01/2012");

Categories