Setting 'option' on jqueryui DatePicker clears the textbox's value? - javascript

I've highlighted the example here:
http://jsfiddle.net/aDxeE/
Basically, a separate event (not known at construction) needs to set "option","maxDate" on the datepicker control. This 'clears' the textbox value which is really annoying, as the initial construction does not.
Can anyone offer a solution?
Edit:
Changing line 5 to:
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({minDate:new Date(), maxDate: new Date()});
makes it work as expected, but is a seriously messy approach.

It's an issue with the format. Your initial value dd-mm-yyyy doesn't match the datepickers default format. To resolve, set the initial value to the correct format and specify the format as dateFormat when creating the datepicker.
Fiddle
Change to:
<input id="myinput" type="text" value="01-01-1970" />
And:
//construct datepicker
$("#myinput").datepicker({minDate:new Date(), dateFormat : "dd-mm-yy"});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
$("#myinput").datepicker("option","maxDate", new Date());

You could do this:
$("#myinput").datepicker('destroy').datepicker({maxDate:new Date()});
Removes the datepicker functionality completely. This will return the element back to its pre-init state.
Again re-initiate the datepicker with setting the maxdate option.
FIDDLE DEMO
UPDATE
Formated the code for the readability purpose:-
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({
minDate: new Date(),
maxDate: new Date()
});

Try to give it in $(document).ready(function(){..});
//construct datepicker
$(document).ready(function(){
$("#myinput").datepicker({minDate:new Date()});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
});
$("#myinput").datepicker("option","maxDate", new Date());
Check JSFiddle.
FYI: use placeholder instead of value placeholder="dd-mm-yyyy"

How about manually setting it back again?
var d = $("#myinput").val();
$("#myinput").datepicker("option", "maxDate", "+2d").val(d);

This question was already answered here : https://stackoverflow.com/a/8945264/2050459
You need to set the date first trough code(using setDate) or by opening the datepicker(user interaction).
Here is how you would do it with code : fiddle
$("#myinput").datepicker({
minDate: new Date()
});
$("#myinput").datepicker("setDate", new Date());
In your example, try opening the datepicker and then trigger an event to set a maxDate, you'll see that the input will not be cleared because an active date has been set.

Jqueryui DatePicker clears the textbox's value?
myinput = ID of datapicker
$("#myinput").val('');

Related

How to change the bootstrap datetimepicker to display only dates and not time

I have several inputs with dates. I don't need time, but somehow I can't get rid of it.
I tried all the solutions I found on StackOverflow without success.
I am using the tempusdominus datetimepicker.
JS FIDDLE LIVE DEMO
Does anyone know how can I remove the option to enter hours and minutes?
I thought format: 'MM/DD/YYYY' would do the trick but apparently it's not working.
$('#monthDatetimepicker').datetimepicker({
defaultDate: date,
viewMode: 'days',
format: 'MM/DD/YYYY'
});
You need to set the default options so that it applies to newly created date[time]pickers:
From the options page on how to set global defaults:
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
viewMode: 'days',
format: 'MM/DD/YYYY',
});
Updated fiddle
Your issue was that this line
$('#monthDatetimepicker').datetimepicker({
format: 'MM/dd/YYYY'
doesn't get applied to anything as $('#monthDatetimepicker') === 0 at the time the code runs.
Moving that line to the end also does nothing as your newly created date inputs have id="monthDatetimepicker" + i. Changing to a valid ID such as:
$('#monthDatetimepicker0').datetimepicker({
format: 'MM/dd/YYYY'
then only works for the first picker.
So you could do some hideous $("[id=^monthDatetimepicker]").datetimepicker... or, easier, you could add a class into your html builder and use that as a selector. Or set it globally as above (which will affect other pickers unless they had a different format applied). (or use a datepicker instead...)
Add .substring(0,10) at the end.

Bootstrap Datetime picker dynamic default date not working

I am trying to update the default date on each link clicked. But it only updates for the first time. After I click another link it still shows old date. But when I debug the defaultD is updating.
I am using bootstrap-datetimepicker
updateSessionDate: function(datetime){
$("#updateUTCDate").modal("show");
var defaultD = moment(datetime, "MMM Do YYYY, h:mm a").format("MM-DD-YYYY HH:mm:ss");
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
},
Click any date it will show only the first one I have click.
How do I update date and time on each click?
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
This creates the datetimepicker with an initial value, so doesn't work if the datetimepicker already exists.
You either need to call date([newDate]) to update it in place (you'll need to initialise it elsewhere) or destroy() it when the modal is closed, allowing you to remake it with a new initial value.

How can I get the new value of an HTML input after a click event has modified it?

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());
});

Time changes automatic in the input box while I open datetime picker

I am using jquery date-time picker in input box.
initialized with below code
minDate: 0/new Date(); (tried both)
Input box has some old date-time when I click for edit it open date-time picker, it disable old date and old time but it also change time in input box to current time if input box time is earlier than current time.
You can see here live example
http://jsfiddle.net/bhupendra21589/perd7pc6/
use
var d = new Date()
$( '#duedate' ).datetimepicker({
minDate: '0',
minTime:d.getHours()+":"+d.getMinutes(),
formatTime:'H:i'
});
I hope this solves the issue
jsfiddle link : http://jsfiddle.net/adityashankert/perd7pc6/17/

JqueryUI Datepicker: Uncaught TypeError: Cannot read property 'settings' of undefined?

I am developing a asp.net MVC4 project where i use lots of JqueryUI datepicker.
For one of my date picker when i tried to click on datepicker image i am getting some error like,
Uncaught TypeError: Cannot read property 'settings' of undefined jquery-ui-1.10.3.min.js:9
Html
<div>
<input type="text" id="tsDte" style="font-size: 14px;width: 50%" >
<img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>
Javascript
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
function tsDatePickerClick() {
$("#tsDte").datepicker('show');
}
Here i have a Textfield and a datepicker image.When i click on datepicker image datepicker will popup .
i have followed the similar way in other datepicker and they are working fine.I have only problem with this date picker.
Any help is appreciated.
That same error will be shown if you try to open a datepicker on an input field who has the class "hasDatepicker" assigned. Simply remove this class in the html.
Before:
<input type="text" value="01/01/2014" class="hasDatepicker">
After:
<input type="text" value="01/01/2014">
I think your datepicker wasn't created correctly, so when you call show, it expects a settings object.
Probably you didn't create it inside $(document).ready, you should have:
$(document).ready(function(){ //Add this line (and it's closing line)
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
});
Hope this helps. Cheers
You are including the jquery-ui-1.10.3.min.js library.
Your issue is caused by duplicating your jQuery UI core scripts.(check if you are including any other librady such as jquery-ui-1.10.3.drag-drop.min.js .
Load just them once, and your issue will go away.
On refreshing the page, you need to remove class 'hasDatepicker' and then set the settings (again). On refresh, the class is kept and so the datepicker is not recreated.
In my case, this was caused because I had an span with id date and the input had the same id. Giving the input a different id solved the problem.
Had the same issue because I had both
#Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { #class = "DatePicker" })
and
#Html.HiddenFor(m => m.StartDate)
in the same form on my view.
The accepted answer is probably the solution for most people, but This can happen when the picker is properly initialized but another element higher up in the DOM has the same id as your date input element.
You can check if that's the case by querying for this in your browser's console: $('*[id=my-id]');
The code for this datepicker is fairly old and therefore doesn't follow the best practices - it relies on the id attribute when it should really have just tracked the original DOM element reference, but it is what it is.

Categories