I am creating a web app in which I have 2 date time textbox(txtFromDate, txtToDate), for which I am using Kendo-UI,
On my page load I am setting min date for my txtToDate
Which looks like below
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
the above code works properly and setting the min date for txtToDate textbox properly,
but the problem is
when user changes from date let say from (05/08/2019) to (05/20/2019)
the min date for txtToDate should be changed from 05/08/2019 to 05/20/2019
but nothing happens, below is my onchange function
$('#txtFromDate').change(function () {
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
});
how can I reset the min date for txtToDate Textbox?
I think the problem is that you're binding to the change event of the input, instead of the kendo widget.
Replace
$('#txtFromDate').change(function () {
with
$('#txtFromDate').data("kendoDatePicker").bind("change", function () {
Edited to add: you may also prefer to just use Kendo's date range picker
Related
I've used use babakhani Persian datepicker in my project.
There is a problem here. the selected value of date picker does not change on textbox value change!! How can I fix it in my project, myself?
JsFiddle
I used
$("#example1").change(
function (e) {
$("#example1").pDatepicker();
};
});
but the error is:
too much recursion
since it calls change() recursively. (also .blur() is tested)
No need to use change event. you can directly use
$(document).ready(function () {
$("#example1").pDatepicker();
});
Also there is an additional } in your code.
I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.
Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?
Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});
I have the following..
# Html.EditorFor ( model = > model.Date )
A template editor also works in the DateTime type
Clicking on this entry, a calendar is displayed , you select a calendar date , and that date
is the new value of my post. What I need is to validate that the date you select is equal or greater than today.
I tried the onchange event for the EditorFor , but it did not work , Jquery DatePicker property has a MinDate
but added that would mean modifying the operation of all entries with the DateTime data type .
jQuery Datepicker has onSelect function which will give you the chosen date that is displayed in date input box! Here is a fiddle http://jsfiddle.net/aa74R/66/
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
alert(date);
}
The Question is a bit vague, however I think this should help.
It looks like what you want to do is change the date, based on after you've selected a newDate. onChange should work. As far as why it isn't, it could be a matter of code.
If it's a matter of how you've written your code:
$('#inputId').on('change', function(){
var newDate = $(this).val();
});
I personally think this might be an easier approach for some, however inefficient as it persistently sets the date every time you leave the field:
$('#inputId').on('blur', function(){
var newDate = $(this).val();
});
There are also many other ways to write it. But I feel like this might have the proper level for you.
Question doesn't seem to have a context with the absence of code.
Since you have tagged jQuery a possible problem might be you are binding the onchange event to the textbox. If this textbox were to be dynamically generated, the onchange event would never be registered. If this is your problem then you could do this-
$("body").on("change", "#textBoxId", function(){
alert($(this).val());
});
I am using below date-picker plugin for angularjs which is made from pickadate.js
https://github.com/alongubkin/angular-datepicker
I am using this plugin twice on the page. Plugin have very good option max date and min date which will help us select between those date.
Example options
$scope.depOptions = {
format: 'dd/mm/yyyy',
min: minDate,
max: maxDate,
onClose: function(){
$scope.arrOptions.min = $scope.depDate;
}
}
Now I want to make min date starting from selected. I tried $watch and also tried to onClose method provided by plugin but I could not do it. Kindly somebody help me.
http://plnkr.co/edit/QBFwqyUIJxtw1dltMDky?p=preview
It seems that the element's configuration once initialized cannot be changed. Try putting the arrival input in ngIf, so that it is always rendered anew when departure changes.