How to get date time picker in asp.net because I'm using html format
<!-- invoice date -->
<div class="form-group left">
<label for="invoicedate" class="label-title"> Invoice Date : </label>
<input type="date" id="invoicedate" class="form-input" required="required" />
</div>
</div>
I stuck beacuse don't know how to write the code behind for date. I trying to seacrh but it's using DynDateTime jQuery Plugin. I'm looking up for something simple and easy to be implement. For instance if i'm using TextBox I know how to write the code behind
cmd.Parameters.AddWithValue("invoiceno", TextBox1.Text);
Inside the jQuery document ready event handler, the Bootstrap DatePicker Plugin is applied to the ASP.Net TextBox and the Date format is set to dd/MM/yyyy. Inside the Button Click event handler, the value of the Selected Date is fetched from the Request.
protected void datepicker_SelectionChanged(object sender, EventArgs e) {
txtdtp. Text = datepicker. SelectedDate. ToShortDateString(); // just use this method to get dd/MM/yyyy.
datepicker. Visible = false;
}
Related
I can't get this to give me the dd() of the date. It keeps coming back as null. i've implemented flatpickr correctly and all works accept when i try to get the actual date. However, when i add an additional button to submit the date with wire directive it works. But i want it to fire when a date is clicked. Any help would be appreciated. Thanks
in my livewire file.
public $date;
public function secondStepSubmit()
{ dd('date');
};
in my view
<input x-data x-init="flatpickr($refs.input, null);" wire:change="secondStepSubmit" x-ref="input" type="text" />
</div>
flatpickr has its own change event listener.
you can use that to get the value of the date of the input as follows.
<div>
<input x-data x-init="flatpickr($refs.input, {
onChange: function(dateObj, dateStr) {
#this.call('secondStepSubmit', dateStr)
}
});" x-ref="input" type="text" />
</div>
I have used #this blade directive from livewire, we also can use $wire from alpine too.
in the Livewire component,
public function secondStepSubmit($date)
{
dd($date);
}
We have a mobile app which shows an html page with some javascript in a webviewer.
In this page we have a form. IT looks something like:
<form method="get" action = "" id="mainform">
<input name="EXAMPLE_NAME" id"EXAMPLE_NAME" placeholder="" type="text" maxlength="35"/>
</form>
So far so good. The user is able to view this input and fill it in with data. They then press a button on the xaml page which calls a function that does:
Browser.Eval("submitMainForm()")
In the javascript on the page we have that function, which looks like:
function submitMainForm() {
var x = document.getElementById("mainForm").submit();
}
Back in the C# code we have handlers for the resulting navigation. They look like:
async void OnNavigating(object sender, WebNavigatingEventArgs e)
{
and
void OnNavigated(object sender, WebNavigatedEventArgs e)
{
This works well in iOS and Android. We get the WebNavigatingEventArgs in the handler, and the value from the field that we are showing in the webviewer (inside of mainform) are stored in there.
So, for example, e.Url in the OnNavigating and OnNavigated handlers would look something like:
"file:///storage/emulated/0/Android/data/com.example.exampleapp/files/Example.html?EXAMPLE_NAME=Test"
We parse this string to get the values we care about (Test, in this case), and all is well.
On UWP, however, things work a lot less well. On Navigating is never called at all, and the call to OnNavigated just has "about:blank" stored in its WebNavigateEventArgs url value.
Does anyone know what might be going on here, and/or have a way that I can fix it? I need a way to get the results from my call to the get form as I do in the other 2 platforms, rather than "about:blank". Ideally, I'd also like to get the OnNavigated call, but the important thing is the data.
Thanks for your assistance
For html form submitting, you need add the action url that used to received parameter. For example:
<form id="Myform" action="HomePage.html">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
When you invoke submit, the firstname lastname field will be sended to HomePage.html page. I create HomePage that Build Action is Content in native uwp project.
Please note you could not create html in forms project. Otherwise the webview could get navigate to the right url.
This is code sample please check.
I have a project developed with tapestry 5.
I need to update a input field (which is inside a form) using an AJAX request.
Page.tml is something like this:
<form>
<t:zone t:id="myZone">
<input type="text" t:type="TextField" t:value="product.code"/>
</t:zone>
<t:actionlink t:id="generateCode" zone="myZone">Generate</t:actionlink>
</form>
And Page.java
Object onActionFromGenerateCode() {
return myZone.body();
}
When click in "Generate" link, tapestry throws an exception. Don't let me update a zone inside a form:
java.lang.RuntimeException
The component must be enclosed by a Form component.
How can I update this input field?
thanks
Changing pieces of a form via ajax gets tricky as a FormSupport instance must be available on the Environment in the serverside event.
It might be easier to either:
Put the entire form in a zone and refresh the whole form
Execute some javascript from the serverside event
Here's how option 2 could work:
TML
<form>
<input id="productCode" type="text" t:type="TextField" t:value="product.code" />
<!-- note that async is a recent addition to eventlink in tapestry 5.4 -->
<!-- Use a dummy zone for previous versions -->
<t:eventlink event="generateCode" async="true">Generate</t:eventlink>
</form>
Java
#Inject JavaScriptSupport jss
void onGenerateCode() {
String productCode = generateProductCode();
jss.addScript("$('#productCode').val('%s');", productCode); // assuming jquery
}
Note, it is possible to dynamically change a form via ajax, it's just tricky as I said. Examples include AjaxFormLoop and the FormInjector
I have a kendo date picker defined as follows:
<input id="datePicker" data-format="dd.MM.yyyy" data-month='{ "content": "<span class=\"#= dateRange.hasReport(data.date) ? \"boldDate\" : \"normalDate\" #\">#=data.value #</span>" }' data-role="datepicker" data-bind="value: new Date(), events: {change: dateChanged}" style="width:150px;" />
In the month template, I bold some dates depending on whether there is a report or not for that date by a call to the method dateRange.hasReport(data.date)
Now, there is an external event which causes the daterange to change. I want to now refresh the calender view so that the dateRange.hasReport is called for all dates again.
I am unable to find a way to do this.
Any ideas?
Use the methods min(), max() to change your ranges and the 'change' event will be triggered I guess. You can bind your function there if you want.
http://docs.kendoui.com/api/web/datepicker
I fixed it by destroying the element and recreating it again
$("#datePicker").data("kendoDatePicker").destroy();
$('#datePicker').empty();
createDatePicker(); //Creates the datepicker widget again
$("#datePicker").closest("span.k-datepicker").width(150);
How do I correctly create internationalized labels for my form components so that when displaying feedback messages an internationalized field name is displayed instead of the name of the field in the java code?
I've read this:
https://cwiki.apache.org/WICKET/everything-about-wicket-internationalization.html
as well as the documentation for wicket's xhtml tags:
https://cwiki.apache.org/WICKET/wickets-xhtml-tags.html
<label wicket:for="name">
<wicket:label>
<wicket:message key="label.name"/>
</wicket:label>
</label>
<input wicket:id="name" type="text" wicket:message="placeholder:label.name" />
This results in the following error:
Last cause: Expected close tag for '<wicket:label>' Possible attempt to embed
component(s) '<wicket:message key="label.name"/>' in the body of this
component which discards its body
If I replace the wicket:message with some arbitrary text it displays the text in any associated feedback messages.
(There's a related jira issue: https://issues.apache.org/jira/browse/WICKET-3903 however I still do not understand what has been done to fix this and what I must do ...)
Just found out there is a way to do this in java:
add(new TextField<String>("name").setRequired(true).setLabel(new Model<String>(getString("label.name"))));
Is it possible to somehow do this in a more comfortable way?
I just tested the following:
<form wicket:id="form">
<label for="input"><wicket:message key="input">some input</wicket:message></label>
<input wicket:id="input" type="text" name="input">
<input type="submit" value="submit">
</form>
And in the java class:
Form<HomePage> form = new Form<HomePage>("form"
, new CompoundPropertyModel<HomePage>(this));
wmc.add(form);
TextField textField = new TextField("input");
textField.setRequired(true);
form.add(textField);
In the property file I provided:
input=SomeInputField
This led to the following screen (if I leave the requiered field empty and press submit.
Is this what you are looking for?
Here is an alternative approach to #bert's that has always worked for me (wasn't aware of <wicket:label>)
The text shown for a FormComponent when a validation error occurs can be specified by means of FormComponent.setLabel(IModel). The shown text will be the result of the IModel's getObject().
TextField comp = new TextField("comp");
// Use internationalized text from XML resource file
comp.setLabel(new StringResourceModel("formResources.comp.label", this, null));
Notice this has nothing to do with <label> nor FormComponentLabel. FormComponentLabel is a component that can be used to model <label> tags.
You could even subclass FormComponentLabel to provide the label text based on FormComponent.getLabel(), and maybe output an extra mark when the field is required:
public class MyLabel extends SimpleFormComponentLabel{
private boolean required;
public MyLabel (String id, LabeledWebMarkupContainer labelProvider) {
super(id, labelProvider);
if (labelProvider instanceof FormComponent){
required = ((FormComponent)labelProvider).isRequired();
}
}
protected void onComponentTagBody(final MarkupStream markupStream,
final ComponentTag openTag) {
String mark = "";
if (required){
// could be for instance "*"
mark = getString("formResources.requiredField");
}
String text = getModelObjectAsString() + mark;
replaceComponentTagBody(markupStream, openTag, text);
}
}
{
TextField component = new TextField("component");
component.setRequired(true);
component.setOutputMarkupId(true);
IModel labelModel = new StringResourceModel("formResources.component.label",
this, null);
component.setLabel(labelModel);
add(component);
add(new MyLabel("componentLabel", component);
}
<label wicket:id="componentLabel"/>
<input type="text" wicket:id="component"/>
This way you would have clean way of
Setting the FormComponent's text to an internationalized resource string
Reusing exactly the same resource string transparently for the <label> tag and even adding custom marks to it based on FormComponent's properties.
Another alternative is to use the key attribute of <wicket:label/>, like so:
<label wicket:for="name">
<wicket:label key="label.name">Placeholder label</wicket:label>
</label>
<input wicket:id="name" type="text"/>
Unfortunately this attribute is not documented on the wiki page describing wicket's xhtml tags. All attributes supported are documented using JavaDoc in the class handling the tag (org.apache.wicket.markup.html.form.AutoLabelTextResolver).
The advantage of this alternative is that there is no additional coding required.
Wicket throws an exception to tell you that your <wicket:message> tag will be removed because the body of the <wicket:label> tag is replaced. The problem is you cannot nest the <wicket:message> tag inside the <wicket:label> tag (and shouldn't need to).
either this (Option 1):
<label wicket:for="name">
<wicket:label key="label.name"/>
</label>
<input wicket:id="name" type="text />
or this (Option 2):
<label wicket:for="name">
<wicket:message key="label.name"/>
</label>
<input wicket:id="name" type="text />
should work for you and result in HTML something like the following (assuming the properties file contains label.name=Name):
<label for="someMarkupId">
Name
</label>
<input id="someMarkupId" type="text" />
The difference is that if you set the label for the component through the Java code like so:
component.setLabel(new Model("value set in code"));
then using the Option 1 will result in the label being set to "value set in code", while using Option 2 will still result in the label set to "Name". Also if the label is set through Java code, and the key is missing from the properties file the Option 2 will throw an exception, while Option 1 will simply use the value set in the code.
I prefer this:
<label wicket:for="name"><wicket:label />:</label>
<input type="text" wicket:id="name"></input>
Just make sure to set the label in the FormComponent using setLabel, so the only java needed is:
add(new TextField("name", nameModel).setLabel(Model.of("i18n.name")));
This will be rendered as (in Dutch):
<label id="name63-w-lbl" for="name63">Naam:</label>
<input type="text" value="" name="name" id="name63">