Does anyone know how to remove (or at least hide) the time option from the bootstrap datetimepicker?
As displayed on web page
As defined in the cshtml
The data type in the DB is a DateTime, but providing a time is not necessary for the user. So ideally we'd like to hide it, or obfuscate it, whilst still using the same control. We can use javascript if absolutely necessary, but I feel there must be an attribute I can affix to the field in the model (or similar) that I'm missing!
Try to add this script
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
format: 'MM/dd/YYYY'
});
});
</script>
Also try to add this to your Html.EditorFor
"{0: MM/dd/yyyy}"
Related
I am using Shield ASP.NET MVC charts on a page. I need the charts to initially show data for my visitors, and I need to provide the user the possibility to hide the charts by clicking on the corresponding button(s). For this purpose I use the following function:
<script>
function HideChart() {
document.getElementById("DataSpot").innerHTML = "";
}
</script>
And I am placing the charts as follows:
<p id="DataSpot">
#(Html.ShieldChart()
.Name("chart")
.PrimaryHeader(header => header.Text("Profile Hits"))
.Export(false)
.AxisX(axisX => axisX
………..
)
</p>
<button onclick="HideChart()">Hide Chart</button>
The problem is, that when I click on the button, nothing happens.
#user2492467,
Do you need to hide the chart or do you need to wipe out its content? If just hiding the chart, the approach suggested by Chris would work just fine. However, if you need to irrevocably wipe out the chart from the page altogether, then clearing its content is not enough. Only removing the rendered chart markup would open the door for memory leaks, as references to the DOM nodes may remain in the chart javascript component.
A better approach would be to find the javascript component instance and call its .destroy() method. This will ensure the component is fully destroyed and no memory is leaked:
$("#DataSpot").swidget().destroy();
Note that you still need to give your chart a name using the MVC wrapper's .Name("DataSpot") method just like Ed suggests. This will give your chart's HTML element an ID that you can use with jQuery to find the chart instance.
The .swidget() method is a standard jQuery extension method added by the Shield UI javascript framework. It returns the javascript component instance associated with the element matched by the jQuery selector. This is how you find the chart instance.
How about:
<script>
function HideChart() {
document.getElementById('DataSpot').style.display='none';
}
</script>
You should also update your button:
<button type="button" onclick="HideChart()" value="Hide Chart" />
Actually there is something happening, obviously not the thing that you need. This is because you need to wipe out the rendered chart by referencing its container.
The element is fine and if you put some text in your function and execute it you will see that it will appear on the appropriate spot. However to hide the chart you need to use it’s name. In other words the following statement:
document.getElementById("DataSpot").innerHTML = "";
should be changed to
document.getElementById("chart").innerHTML = "";
or you may rename the chart to
.Name("DataSpot ")
and remove the P element in both cases since it makes no use.
I have asked this same basic question before several times without a response, but let me try one more time, breaking it down as simple as possible.
I have a strongly-typed view with a hidden field on it.
When the view renders server-side, I am setting the value of the hidden field to a property of the model.
When the view renders client-side, I want to get the value of the hidden field (that was set during the server-side render) and display it in a java script alert box.
This should be a simple thing to do and yet I am unable to make it work. I have set a break-point in the view and I can see that the hidden field is being set to the correct value. But the javascript will not display that value.
The page/view being rendering has been gone to before. At the time I want to display this alert, I am going back to that page and now I want to see the alert.
It is as if the page is being cached, so instead of using the new value for the hidden field it is using the old value (from the first time the page was visited). If the DOM is being cached, how I can prevent that so that each time I visit the page I get the updated values of the page and not the cached ones? What am I doing wrong??
#<input type="hidden" id="hdnShowMsg" value="#Model.ShowMsg" />
<script>
alert($('#hdnShowMsg').val());
</script>
Your script may be firing before your document is fully rendered. Use the jQuery document ready function.
http://api.jquery.com/ready/
<script>
$(function() {
alert($('#hdnShowMsg').val());
});
</script>
Also note that document ready is not supported within a jQuery Mobile document and you may run into problems depending on what part of the DOM you are trying to manipulate.
Use $(document).bind("pageinit", function() {}) instead.
http://jquerymobile.com/demos/1.2.1/docs/api/events.html
Hi i have a form in GSP and I want to make all the form elements read only after submit.
Is there any way to do it. I have form elements like textboxes, dropdowns attachment field......
I am using G:Form
I am also using java script in my GSP.
Please help me out
Thanks.
Keep in mind that even if you set the tags as readonly on the server side, users can still change them through a variety of means, and whatever the value on the form is before it gets sent back to you.
You can use an onsubmit event in the form tag, calling a JavaScript function which will disable any form elements you want to affect. Since GSP is server pages, not the browser, it will not normally be able to help you in this respect.
Certainly the easiest way is client-side with jQuery:
$(function() {
$('input, select, textarea').attr('disabled', 'disabled');
});
I have a complex ICEFaces XHTML page that renders certain components conditionally, based on flags set as the user enters data on the page. What I'd like to do is direct focus to a certain field as soon as it appears, which may not be during the initial render of the page.
The ICEFaces documentation suggests that I can do this using the focus attribute of the outputBody component. Specifically:
If you setting the initial focus, the focused component must be rendered on first render call, if not then set the focus attribute only when the component gets rendered.
This seems to suggest that I can manipulate the value of the focus attribute at the time that my conditional component gets rendered. However, I don't see any attributes of the inputText component that allow me to change a value at the time the component is rendered.
Am I misreading the documentation? When and where can I alter the value of the focus attribute of outputBody so that my conditionally-rendered field gets the input focus when it appears? Or am I using the wrong tool to solve this problem?
Maybe you can use this
JavascriptContext.applicationFocus(FacesContext.getCurrentInstance(), "form:fieldM");
You can use some Javascript to set focus on an element.
Here's the Java snippet required to do this:
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),
"document.getElementById('myForm:myTxtBox').focus();");
myTxtBox is the ID of your form element, and myForm is the ID of your form.
You can use this wherever you are changing certain variables' values to render/hide fields.
Due to the fact that I'm using both Seam and ICEFaces, I was not able to invoke Javascript reliably from my server-side Java code. I was, however, able to add the necessary Javascript in-line in my XHTML, within the ui:component that was being conditionally rendered, close to the input field I needed the focus to go to. The relevant section of my XHTML looks like this:
<ice:panelGroup id="textPanelInput" >
<ice:form id="textInputForm" partialSubmit="true" style="vertical-align:middle;">
<ice:inputText id="textInput" valueChangeListener="#{appField.valueChangeListener}"
size="#{appField.fieldDefLengthAsInt}"
value="#{appField.value}"
styleClass="fieldStyle" rendered="#{appField!=null}"
>
</ice:inputText>
<ice:message id="jo" for="textInput" />
</ice:form>
</ice:panelGroup>
<script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>
The Javascript line at the bottom is the line I added to solve my problem. All of the code above is in a ui:component block that may or may not be rendered, based on other conditions. When this ui:component block is rendered, my Javascript goes with it, and sets the input focus to my desired input field.
ICEfaces supports javascript api which has setting focus function. Thus you may use it like in the next excerpt:
<script type="text/javascript">
jQuery(document).ready(function () {
ice.applyFocus(elementId);
});
</script>
elementId is jsf component clientId.
ICEFaces javascript Api
I'm working with a dynamic DOM here, and have called the jQuery UI datepicker to all inputs with a specific class name, in this case .date
It works great with the first, static, construct but when I clone it the event handlers don't seem to want to move over. I get the Firebug error:
inst is undefined
I tried looking into jQuery's new live() function but couldn't combine the two. Any ideas?
Ah, got it. Right after I append the HTML to the DOM I run this on all the inputs I'd like to have a datepicker pop up with. Datepicker adds a class to elements it has been attached to, so we can filter out existing inputs and only apply it to new ones.
$('.date').not('.hasDatePicker').datepicker();
I hope this helps people as I was Googling for days and didn't find anything!
You should also note that it would be faster to check for input.date in the new generated HTML by setting that as a context, rather than the whole page, as it will save time, due to this being a more efficient operation.
I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.
I realized after a lot of search that my input date fields had no "id" defined they looked like this
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
by adding a "id" and it started working, for the dynamic date fields I change the Id like this
var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.
First, what is causing the problem:
JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.
Solution:
1) destroy datepicker
2) assign new unique ids to all input field
3) assign datepicker for each input
Make sure your input is something like this
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
Before you clone, destroy datepicker
$('.n1datepicker').datepicker('destroy');
After you clone, add these lines as well
var i = 0;
$('.n1datepicker').each(function () {
$(this).attr("id",'date' + i).datepicker();
i++;
});
and the magic happens
Use
$j(id or class).removeClass('hasDatepicker').datepicker();
It is working
Use jQuery selectors:
$(".mydatepicker:not(.hasDatepicker)").datepicker()
Multiple instances of the jquery-ui library on the page will cause this error too. Removing redundant instances work for my case
I experienced the same symptom, in this caused by having a td containing element with the same id attribute as the input,
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
I know this isn't ideal anyway, but it's worth knowing that the datepicker component seems to be relying on the uniqueness of the id.
I had this problem. My situation ended up being I had another element with the same ID as the input with the datepicker.
Today I faced the same issue... I am using datetimepicker plugin in my application.
Also using jquery's default datepicker too. When ever I am invoking them both on document ready I am getting the error inst is undefined.
$(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine('attach');
....
});
So I changed the code to invoke before document ready like below:
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine('attach');
....
});
Now every thing is working fine. No problems.
I had a similar problem with data picker not working after a first call. I found an answer to my issue here:
http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
I was cloning sections dynamically from template and inadvertently including the class that datepicker adds once its called:
hasDatepicker
I placed my first datepicker call after I clone the template and that did it. I then added a datepicker call after each instance of clone:
$(source).clone().appendTo(destination).find(".datepicker").datepicker();
After trying many of the answers here, this is what worked for me and is showing on the first click/focus
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
this needs that your input have the class 'mostrar_calendario'
live is for JQuery 1.3+ for newer versions you need to adapt this to "on"
See more about the difference here http://api.jquery.com/live/
If it still doesn't work, it is because of the cloned id. You can completely remove datepicker like this:
$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();