I'd like to be able to manually enter a date into the dateTime picker and have it persist to the control.
Example Code: http://jsfiddle.net/awDA4/39/
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<div>
<input id="datepicker" style="width:200px" />
</div>
$(document).ready(function() {
$("#datepicker").kendoDateTimePicker();
});
Say you enter a date by hand into the control like '08/08/2013'
If you then post the form the start of time (01/01/0001) date is sent
If you pick a time from the time drop down it reverts to the current date
Any ideas what I might be doing wrong?
I thought about marking the input as readonly/disabled but surely you should be able to allow users to type a date by hand.
I needed to include additional parseFormats when initializing the DateTimePicker
$(document).ready(function() {
$("#datepicker").kendoDateTimePicker({
parseFormats: ["MMMM yyyy", "HH:mm", "MM/dd/yyyy"] //format also will be added to parseFormats
});
MM/dd/yyyy was added and I can now manually key in dates with that format
Related
I have a datepicker and validation in it's blur event. If validation fails I am showing a message to user and focus the datepicker again. But it becomes recursive.
Message appears all the time. User can't get of the loop unless she kills the page.
(function() {
$("#kendoDatePicker").kendoDatePicker();
$("#kendoDatePicker").on("blur", function() {
if ($(this).data("kendoDatePicker").value() > new Date()) {
alert("Date cannot be greater than today. Please re-enter.");
var datepicker = $(this).data("kendoDatePicker");
datepicker.element.focus();
}
});
})();
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo-section k-content">
<input id="kendoDatePicker" value="04/04/2017" style="width: 100%" />
</div>
Fiddle is here: https://jsfiddle.net/Hd47F/312/
Well, you said it yourself that you are focusing the datepicker again in the blur event. So, of course it will become recursive. You can put the validation logic inside the form submit event, instead of the datepicker's blur event, or do not focus into the datepicker after the validation.
By the way, you don't even need validation. You can set the maximum date of the datepicker to today's date so that the user can't even choose a date in the future. That will also make it more user-friendly.
Text box should be empty and when i click on calendar icon then data picker load from my custom data, For example i will set 1 December 2020
I used the following code to open kendo datepicker widget on a specific date:
var targetDate = new Date(2020,11,1);
$('#myDatePicker').kendoDatePicker({
open: function () {
var calendar = this.dateView.calendar;
// Position the calendar on specific date
calendar.value(targetDate);
// Clear the value so that the change event triggers again
calendar.value(null);
},
change: function () {
// this will not be triggered if you forget to reset the widget value
},
value: null
});
Explanation:
I start with empty value for the datepicker, because it makes no
sense to position the datepicker if it already has a value (by
default the widget goes to its value data).
On open event specify the desired date using the value(targetDate) method. This positions the calendar on the target date/month/year.
Clear the widget value
with value(null), because otherwise the widget will not trigger
change event if user selects this date (I had troubles with change
not triggering because of this).
I think this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
var selectedValue = "";
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind("change", function (e) {
selectedValue = this.value();
});
datepicker.bind("open", function (e) {
this.value(new Date("1 December 2020"));
});
datepicker.bind("close", function (e) {
this.value(selectedValue);
});
</script>
</body>
</html>
You need to do the following things for that.
On DatePicker Open set the value of the date picker to the value you requires
On DatePicker Change, save the selected value to a variable.
On DatePicker Close, set the DatePicker Value to the saved variable.
I think this will work for you.
This should work:
$("#datepicker").kendoDatePicker({
max: moment(new Date()).subtract(6, 'years').toDate(),
min: moment(new Date()).subtract(100, 'years').toDate()
});
In this example, I am showing the minimum date is 100 years from the current date and maximum date is 6 years from the current date. So you just need to set the required year in the subtract method that needs to be showed in the datepicker.
I am trying to integrate the jquery datepicker to an input field which i am creating dynamically using script..
my script is like...
function getDate(id)
{
$('.pop-up-link').show();
$.ajax({
url : 'gettartDate.jav',
data : 'Id='+id,
success : function(dateStr)
{
var htmlStr = 'Start Date : <input type="text" class="datepicker" id="startDateId" value="'+dateStr.StartDate+'"/>';
$(".pop-info").html(htmlString);
$('.datepicker').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true});
}
}
I am calling this script when i need to edit the date in database and to add new entry to database. When i need to add new entry, im setting id as 0 and returning a blank string..
Now my problem. the datepicker works perfectly for edit functionality.. But when i add a new entry, the datepicker ui comes.. But the date is not updating to that input field. Again, when i put an alert to display selected date,i noticed that only date is changing.. The year and month is not changing, even when i change it
It could be down to the fact you are dynamically adding the datepicker with the same ID's, i was having the same issue with dynamically created datepickers. if there was anyway you could take out the Id attr and use the Name attr it should work.
so you should have the following
var htmlStr = 'Start Date : <input type="text" class="datepicker" name="startDateId" value="'+dateStr.StartDate+'"/>';
Try using the refresh method on .datepicker like so:
$( ".datepicker" ).datepicker( "refresh" );
This is my first attempt at chaining select boxes in a web form using ajax and I I'm obviously missing something. I'm simply at a loss for what that is, exactly. Here is my issue:
A user selects a Country from one select box and an ajax request is made and options (containing names of States and Territories) are returned to a select box below. While the options are returned into the form select field, the user-selected option is NOT sent when the form is submitted.
Here is the code I've cooked up:
<script type="text/javascript">
jQuery(document).ready(function($){
$("select#state").attr("disabled","disabled");
$("select#country").change(function(){
$("select#state").attr("disabled","disabled");
$("select#state").html("<option>Loading States...</option>");
var id = $("select#country option:selected").attr('value');
$.post("http://example.com/terms.php", {id:id}, function(data){
$("select#state").removeAttr("disabled");
$("select#state").html(data);
});
});
});
</script>
You can see the live example here (see the Country/State section):
http://shredtopia.com/add/
Any ideas what is needed to get this working?
As far i can see, the user input is sent
input_32 79
input_29 alberta
Being 79 the country canada and alberta the state.
<select tabindex="11" class="medium gfield_select" id="input_1_32" name="input_32"></select>
<select tabindex="12" class="medium gfield_select" id="input_1_29" name="input_29" disabled=""></select>
Maybe i misunderstood the issue?
Try .live( eventType,handler )
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
http://api.jquery.com/live/
Add to your code and try it~
$('select#state').live('change', function() {
var id = $("select#state option:selected").attr('value');
alert(id);
});
Or try this:
add a hidden in form:
<input type="hidden" id="hiddenValue">
alter your select#state like this:
<select onchange='innerValue(this.options[this.options.selectedIndex].value)'></select>
and create a javascript function
function innerValue(value){
$("#hiddenValue").val(value)
}
then,click submitbutton,$("#hiddenValue").val() is you need
$("#submitbutton").click(function(){
alert($("#hiddenValue").val())
})
but,I think this is not the best solution...
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.