time wont show time in textfield with datetimepicker - javascript

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.

Related

Angular ui: bootstrap datepicket input validation

I'm using this datepicker. As of now, the user can write anything he likes in the input field which is not what I want.
My code:
session.js
session.getDateFormat = function() {
return 'yyyy-MM-dd';
};
session.formatDate = function(date) {
return $filter('date')(date, session.getDateFormat());
};
Controller.js
vm.dateFormat = session.getDateFormat();
function submit() {
date : session.formatDate(vm.data.date)
}
The code is much longer but that basically the part concerning the date. And HTML
<input type="text" class="form-control" uib-datepicker-popup="{{vm.dateFormat}}" placeholder="{{vm.dateFormat}}" ng-model="vm.data.date" is-open="vm.dateOpened" ng-required="true" ng-disabled="disabled" />
The admin can choose if he wants getDateFormat to accept yyyy-mm-dd or dd-mm-yyyy etc.
What I want:
To verify that the user has input the date is the right format, otherwise to clear the field automatically and display an error message along with the right date format as a hint to the user. All that must be done before pressing submit.
Not allowing the user to enter letters obviously
No hard coded html regex, I want something to check if the input is the same as getDateFormat, otherwise clear the field and display an error.
No Jquery, I don't use Jquery in the entire project.
If you have any other datepicker in mind that works with angular and bootstrap without using Jquery, let me know.
I had to update to angular-ui 1.3.3 and then I had to give the date input a name 'datepicker' and the form a name 'frm' and then
<div ng-if="!frm.datepicker.$error.required"">
<div class="datepicker-error" ng-if="frm.datepicker.$invalid">
some error message
</div></div>
I didn't clear the field since if the user didn't finish typing it's going to be invalid and hence might be cleared. If anyone has a better solution let me know.

Setting default time value for datetime-local

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.

AnyTime datepicker add a clear button

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.

Jquery date validation for invalid date entry

I'm implementing jQuery date picker. which can pick date from calendar as well as keyboard entry. When it is picked from the calendar it's working fine.
<input type="text" id="date" />
<script>
$('#date').datepicker ({
dateFormat: 'mm/dd/yy'
}).on("change", function(){
alert("You Entered: "+($(this).datepicker('getdate')));
})
Problem is when I enter, lets say 02/31/2014. which is invalid. I wanted to set a custom message to the user that $ is invalid.
But Jquery is passing on today's date for wrong entries. How can I get exact value of user entry (02/31/2014)?
When using the getdate method of jQuery, Its automatically setting to today's date for an invalid date (not sure why it is lke this in Jquery).
alert("You Entered: "+($(this).datepicker('getdate')));
instead of this use this
alert("You Entered: "+($("#date").val());
Update: Fiddle Demo

jQuery UI date picker - updating another date picker on selecting a 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();

Categories