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);
Related
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;
}
I'm working on flat-pickr. And now to the config part. I have 1 fields date_range. I want to trigger a event only after user choses date_range.
<flat-pickr
class="form-control shadow-none"
name="date_range"
:value="date_range"
#input="$emit('update:filter', $event.target.value)"
#onClose="$emit('updateTrigger')"
:config="configRange"
placeholder="Select date range"
/>
Here I want to emit updateTrigger only after user chooses a date_range, not after chosing a single date. Here It triggers the updateTrigger after closing the datepicker, but on filter, I only get the one date .
You can check if selectedDates.length === 2 in the onChange event. So put to flatpickr #on-change="updateTrigger" and then make function:
const updateTrigger = (selectedDates, dateStr, instance) => {
if (selectedDates.length === 2) {
$emit('update:filter', selectedDates);
}
};
I am doing form validations in vuelidate. I have a date picker in my form which is not a mandatory field. Yet I cannot submit the form without selecting a date from the date picker. How is it so? Can anyone tell me how to fix it? I want to keep the date picker field as not a mandatory field. Here is my code:
<v-menu ref="menu3" :close-on-content-click="false" v-model="anniversaryVisibility" :nudge-right="10" :return-value.sync="enquiryForm.anniversary"
lazy
transition="scale-transition"
offset-y
full-width
min-width="290px">
<v-text-field
slot="activator"
v-model="enquiryForm.anniversary"
label="Anniversary"
append-icon="event"
outline
readonly
:error-messages="fieldErrors('enquiryForm.anniversary')"
#input="$v.enquiryForm.anniversary.$touch()"
#blur="$v.enquiryForm.anniversary.$touch()"
>
</v-text-field>
<v-date-picker v-model="enquiryForm.anniversary" #input="$refs.menu3.save(enquiryForm.anniversary)"></v-date-picker>
</v-menu>
Can I see the stuff inside the <script> tags?
I'm assuming inside you have something like this
validations: {
fields: {
anniversary: required
}
}
So you would have set anniversary to required, you just need to delete it.
How do I reference the submit button? I am trying to set the focus on the submit button when a certain field is exited.
Here's an example of my approach:
dataEvents:[{
type:'blur',
fn: function(){
$('#add').focus();
}
}]
Have also tried $('#submit').focus();
Note: This button is the Add button of the Add New Record modal form of jqGrid
Any help appreciated.
You should be able to set the focus after the blur via a
$('#sData').focus();
Add id in submit button and try this
$(document).ready(function(){
$("#submit").focus();
});
<input type="submit" value="u" name="submit" id="submit"/>
I have an controller which has check like that
if (form["submit"].ToString() == "Continue")
{
}
and i have button which is doing submit
<button name="submit" value="Continue">Continue</button>
It was all working well until i decided to disable Continue button on submit to prevent double click using this function:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
So now i don't get value form["submit"] posted on controller.
Any thoughts how may i fix that?
I want still prevent second click but be able to get form["submit"] value posted on controller.
Can you control the submit value in a hidden field in the form? I can't tell what other logic you might need, but when the form renders, you could set the hidden field's value to the submit button's value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you'd rarely disable a hidden field) then it will post when the form is submitted.
$(function() {
// this assumes your button has id="myButton" attribute
$(':hidden[name="submit"]').val($('#myButton').val());
});
And of course in your form, you would need a hidden field with name="submit"
<input type="hidden" name="submit" value="Continue" />
Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).
There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to "value" bind input elements. It's probably overkill for this small example, but it could be useful if your UI expands. I've added markup, script and comments below if you're interested.
$(function () {
var viewModel = {
submitValue: ko.observable("Continue")
};
ko.applyBindings(viewModel);
$('form').submit(function() {
if($(this).valid()) {
// the following line will change the both the hidden field's value
// as well as the button's value attribute
viewModel.submitValue("some other value");
// I couldn't follow your selector here, but please note I changed
// the name of the submit button in the markup below.
$(':submit, this).attr('disabled', 'disabled');
}
});
});
KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you'd bind one property to multiple elements like this:
<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>