I am a new to js and am trying to figure out if there is a way to either modify an existing button within AnyTime Datepicker or add a new one that will clear the date from the field.
I see this as a possible solution, but can't figure out where to insert it into the anytime.js to prevent the AnyTime datepicker from breaking:
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
Okay, so I have below that works in Chrome / firefox, but not in IE 9. In IE 9 I click on Clear button and it brings up the date picker. If I click on it twice in IE it will clear the field. How can I get it to be compatible with IE9:
<tr>
<td>
<label class="width100 right displayInlineBlock padBottom5">Received:
<input class="width70 calendarBackground" type="text" maxlength="4000" name="received" id="received" value="<%=report.getFormattedReceived()%>" />
<script>
AnyTime.picker( "received", { format: "%d %b %y", firstDOW: 1 } );
</script>
<input type="button" id="receivedClear" value="Clear" />
<script>
$("#receivedClear").click( function(e) {
$("#received").val("").change(); } );
</script>
</label>
</td>
</tr>
Thanks!
The problem is, the picker appears when the date field has focus, and it constantly updates the field to show the currently-selected date (which defaults to the current date when empty). Therefore, calling change() to bring up the picker should, by design, also populate the field with the current date/time.
If you want to clear the field, you should just call val('') and not bring up the picker. If you want to display the picker, then you should either not clear the field, or be willing to accept that the picker will reset the field to the current time.
I am working on a new picker that will not automatically update the field until the picker is dismissed, but it is still many months from release.
Related
I have this field where I can insert the date and time through a datetimepicker:
<script>
$(function() {
$('#datepicker').datetimepicker({dateFormat: 'dd-mm-yy'});
});
</script>
When I select the date and time, it will show the date and time perfectly in the textfield. Also when I press the submit button it will store the date and time perfectly through a DateTime() type in the database. Now I format the date that I read from the database from y-m-d to d-m-y in a function which is working fine. The problem is, if I go back to the page I submitted the date time in, it shows all the information I submitted in the input fields, except for the time. It only shows the date.
This is my input field:
<input type="text" name="date" value={{$date}} id='datepicker'>
When I var_dump($date); a few lines before the input field, I get the date and time perfectly like I want it:
11-04-2015 09:09
but in the textfield it shows:
11-04-2015
So there is nothing wrong with the variable $date.
When I submit again, it will save 11-04-2014 00:00:00.
Which makes me think there's something wrong with the format the default value is displayed in the textfield.
I already tried:
dateFormat: 'dd-mm-yy HH::mm'
in the script.
I use:
https://jqueryui.com/datepicker/
and:
http://trentrichardson.com/examples/timepicker/
EDIT:
Timepicker format JS:
timeFormat: 'HH:mm'
This is a typographical error in this line:
<input type="text" name="date" value={{$date}} id='datepicker'>
The date needs to go between quotes as the rest of the attributes. Otherwise it will stop at the first space break.
Right now, using the date that you specified, the generated code will look like this:
<input type="text" name="date" value=11-04-2015 09:09 id='datepicker'>
You can even see how StackOverflow highlights the "09:09" in a different color. And if you run the code snippet, you'll see that only the date is displayed.
Now, if you wrap the value between quotes, the result will be:
<input type="text" name="date" value="11-04-2015 09:09" id='datepicker'>
And the text field will display both date and time, so the datepicker will also process the time instead of ignoring it.
I am using this html tag as a datetime picker:
<input type="datetime-local">
I want to be able to set a default value for the time part only so if
someone inserts a date and doesn't insert the time (leaves it as --:--:--) then I will be able to set it as 00:00:00 for example.
The problem is I know only how to set the a value including both the date and time and if someone inserts only a date w/o the time I can't read that value and getting a blank value.
Is it possible to overcome that? or is there any other datetime picker I could use for the described scenario?
We can not change the behavior of browser against an element. So this is an answer to the second question that if there is another solution for this scenario. I used two separate fields of date and time which control a single datetime-local field.
Please note that the date filed has no value unless the field is totally completed. So I used blur event instead of keyup or change.
$(document).ready(function() {
var mydate, mytime, mystring;
$("#dateField").blur(function() {
if ($(this).val()) {
setResult();
}
})
$("#timeField").change(function() {
setResult()
})
})
function setResult() {
mydate = $("#dateField").val();
mytime = $("#timeField").val();
mystring = mydate + 'T' + mytime;
document.getElementById('resultField').value = mystring;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateField" type="date"><input id="timeField" type="time" value="18:30">
<br>
<strong>Result</strong>:
<br>
<input id="resultField" type="datetime-local">
Footnote 1:
The change listener works on time field (when has default value) but I noticed a vague behavior in google-chrome that if you change the value of time filed by mouse clicks, the change event is triggered after mouseOut! This has no effect on the answer above.
Footnote 2:
You can hide the result field inside a display:none div.
I have just started using angular and in general love it. I have a UI requirement to show a date as text, then when you click on the text, it shows a date picker instead. Then when you select a date it goes back to text. Sounds simple.
I have tried a few variations on the below code the object being edited holds a value called editdate, clicking on the text box changes this to true and hides the text and shows the editor. This works fine, the problem is hiding the date picker. I tried adding ng-blur to the datepicker to cause the box to hide when it looses focus, but this was very intermittent as to if it worked. I then tried ng-Mouseleave but the box closed when I moved the mouse pointer into the date picker from the text box.
<td colspan="7">
Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>
<input type="date" ng-blur="item.editdate=false" ng-click="item.switcheditdate(item.delayeditclose)" ng-show="item.editdate" class="datepick" ng-model="item.dueDate" ng-focus="selectPart(item.partNumber)" />
</td>
The javascript is initialized as:
for (var i = 0; i < data.items.length; i++) {
item = data.items[i];
item.showExpanded = false;
item.editdate = false;
item.delayeditclose = true;
item.switcheditdate = function (delayclose) {
if (!delayclose) {
this.editdate = !this.editdate;
this.delayeditclose = true;
}
this.delayeditclose = false;
};
items.push(item);
}
I have now moved onto the above which almost does the job. The new issue being html5 date pickers seem to have a x to close them down. This hides the whole box and not just the picker part. If this happens I want to show the text of the date rather than what I get now which is nothing. Does anyone know of how I can capture this close event and revert back to the text or suggest a better approach to the problem?
I have lots of items each one is in its own row in a table
I am using angular 1.3 beta 8
thanks for looking
Andy
The reason why you are getting nothing is because when you click x what happens is that the date value gets cleared so then your date view is an empty string. What you can do is set a condition to display a string such as "Click to Edit" when the date is empty.
Taking just what you have above, one way of doing it is by adding an element and a flag in your date "view". So change this:
Required Date : <span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">{{item.dueDate.toDateString()}}</span>
To:
Required Date :
<span ng-click="item.editdate=true; item.delayeditclose = true;" ng-show="!item.editdate">
<span>{{item.dueDate.toDateString()}}</span>
<span ng-show="!item.dueDate">Click to Edit</span>
</span>
The directive way
Now in my opinion I think it's much better to use a directive for this. It would simplify your logic and is much easier to re-use. I created a plunker which shows my implementation using a directive.
Answer to question in title
To answer the question posed by your title, when using the html5 date picker, you can't detect when it is closed (or even when it is opened). See this answer and the linked Quick FAQs on input[type=date]
I have 2 date pickers using the Jquery UI. If the user selects a date from date picker 1, how can I get it to update date picker 2 automatically with the same date?
I think this might be quite simple, but I've tried a few things and nothing seems to work.
Thanks in advance.
The date picker is essentially a text input element. You can use the jquery change handler on the first input element to grab its contents when they change, then simply select the second input element and update the value using jquery val.
http://api.jquery.com/change/
http://api.jquery.com/val/
Something like:
$("#firstdatepicker").change( function() {
$("#seconddatepicker").val($(this).val());
});
You'll want to use the onClose event to update the second text field.
I've created this fiddle here that works; for some reason the styling that's usually on the datepicker is not coming in though.
HTML:
<input type="text" name="date1" value="" />
<br>
<input type="text" name="date2" value="" />
Javascript:
$("input[name=date1]").datepicker({
onClose: function(dateText, inst) {
$("input[name=date2]").val(dateText);
}
});
$("input[name=date2]").datepicker();
I have a field called AppDate and it should get disabled conditionally
the field is getting disabled but the date picker icon is not getting disable, hence though i disable AppDate Field users are able to change the date
<hx:inputHelperDatePicker firstDay="1" rendered="true" styleClass="inputText_DatePicker" disabled/>
<f:convertDateTime dateStyle="short" pattern="MM/dd/yyyy" />
<hx:inputHelperDatePicker firstDay="1" rendered="true" styleClass="inputText_DatePicker" disabled/>
<hx:inputHelperAssist errorClass="inputText_Error" promptCharacter="_" />
</h:inputText></td>
Assuming you are referring to JQuery's datepicker plug-in, you can disable/destr0y the datepicker:
//disable
$("yourdateinput").datepicker( 'disable' );
//destroy if you not going to need it anymore
$("yourdateinput").datepicker( 'destroy' );
http://docs.jquery.com/UI/Datepicker#methods
I have no idea which date picker you are using. So I'll speak generally, you should probably 'unbind' the click/mouse[up|down] event from the "icon" and rebind it back when you enable the input textbox