I am using Bootstrap 3 Datepicker to display calendar but it does not display value returned from server even though I can see that value in HTML, I have passed the format same as placeholder which you can see in screenshot.
If I open date time picker and select any date it displays properly.
What could be the reason behind this behavior?
Update:
Found the issue, I was providing minDate option for today's date but server was sending me previous day date & time, hence it was not displaying.
Hope this helps someone.
How did you get and pass the value?
You could try to set your value to the default value:
<script type="text/javascript">
var myDateTime = /* get your value here */
$(function () {
$('#datetimepickerId').datetimepicker({
defaultDate: myDateTime
});
});
</script>
Related
I have a Component in my Angular project that shows a graph up to a particular date as picked by the user. The value in the date input must be a valid date. So when clicking the x button on the date picker, it should go to the current date and not be blank.
This is the html:
<input class="form-control input-sm" type="date" name="endDate"
[ngModel]="endDate | date:'yyyy-MM-dd'" (ngModelChange)="setEndDate($event);">
and the following code in the Component TS file:
endDate = new Date();
setEndDate(newValue) {
if(newValue) {
this.endDate = newValue;
return;
}
this.endDate = new Date();
}
What I can't get my head around is that sometimes it works and sometimes it doesn't. Specifically, when the date in the picker is not the current date, clicking the x results in it becoming the current date as intended. When the date in the picker is the current date, it goes blank and shows mm/dd/yyyy. It should just stay on the current date.
From testing it looks like the value is being set, but the picker does not update for some reason. I've tried changing the binding but this only resulted in it breaking completely. Any light that can be shed on why this works sometimes but not other times would be appreciated.
stackblitz: https://stackblitz.com/edit/angular-oep55t
I use a viewChild for set the value of the nativeElement. Looks like endDate was never pass throught the input date after clear the value. I used the datePipe in the ts file in order to get the date formatted. Don't forget to add the datepipe into the providers in your module.
https://stackblitz.com/edit/angular-268qje
Let me know if it's ok for you.
I'm new to HTML5 and Knockout.js I am facing an issue in datetime-local control.
Here is the HTML datetime-control I'm using
<script type="text/html" id="DATE.template">
<input type="datetime-local" data-bind="value: Prompt.CurrentValue, enable: Prompt.IsEnabled, valueUpdate: 'input'" />
</script>
Here is the Save button and it's binded to savecommand to javascript file.
<div class="buttons-wrapper">
<button class="button save-idoc-button" data-bind="command: SaveIdocCommand, activity:SaveIdocCommand.isExecuting">Save</button>
<button class="button cancel-save-button" data-bind="command: CancelIdocCommand, activity:CancelIdocCommand.isExecuting">Cancel</button>
</div>
When I enter the date without entering any time, date is being passed null on SAVE. I understand it's a incomplete date, hence the browser considers it a invalid date, but the entered date is not saved. The Selected date is binded to Prompt.CurrentValue; When user enters an incomplete date (without time), prompt.currentvalue is null, and I get a tooltip message on the datetime control that "Please enter a valid date or date entered is incomplete". (browser validates and provides i think)
What is the best approach to take?
a. should we need to provide the custom validation and disable the SAVE button, until the datetime-local control has a valid value. If so, how we can achieve in html5/knockout.js?
b. Is there a way to disable the browser validation of datetime-local control, so that the date can be passed even though time is not entered.? (I tried with using "novalidation", but it didn't work)
c. any other better approach?
EDIT:
Here is the computed observable for validation in viewmodel; Prompt.CurrentValue is the value to binded to UI controls. When it's date control, this validationerror doesn't work.
> hasValidationErrors = ko.computed(function () {
> //loop through fields and filter out fields that are set up with validation and has invalid data.
> var invalidFieldsArray=ko.utils.arrayFilter(fields(), function (field) {
> return !_.isUndefined(field.Prompt) && !_.isNull(field.Prompt)
> && (
> ((_.has(field.Prompt.CurrentValue,"isValid"))&&!field.Prompt.CurrentValue.isValid())
>
> ||
> ((_.has(field.Prompt.AdditionalData, "isValid")) && !field.Prompt.AdditionalData.isValid())
> );
> });
> return invalidFieldsArray.length > 0;;
> })
,
this selected datetime-local value is not binded (to the corresponding viewmodel: Prompt.CurrentValue),until the user selects the date and enters the full time ... I understand browser does this validation for this control. how can computed observable recognize this invalidity of date control ? (as value is not passed until the value is valid)
Is there a way to disable the browser validation of datetime-local control, so that the date can be passed even though time is not entered
If possible, can you use a combination of <input type="date"> and <input type="time"> instead? (and use the textInput binding while you're at it)
A couple of things - if you are submitting the form to a server your <inputneeds a name attribute to save properly. And you can preset it to a current value if you want e.g. <input name="date" etc.
You need to show your viewModel if you want help with that.
Re validation - a simple Google search shows this validation suite https://github.com/Knockout-Contrib/Knockout-Validation
However, in Javascript anything to do with dates (date validation, date presentation, date tranformation) you should be using Moment.js
EDIT:
Will have a look at your code above when I get a chance. Please note value is not a good binding for date inputs. I suggest you change
data-bind="value: Prompt.CurrentValue, enable: Prompt.IsEnabled, valueUpdate: 'input'"
to
data-bind="textInput: Prompt.CurrentValue, enable: Prompt.IsEnabled"
EDIT 2:
OK, so date-time is NOT supported in ANY version of Firefox, IE, or Safari - it is a pure text input.
Check out https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Native-Rules and Knockout date validation not working correctly, but I think it is best to switch to moment.js (isValid()) and stick to a specifically formatted date string or use a jquery style popup calendar.
So Im using angular to create a simple mobile app and within a section of html i have this:
<input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/>
This is my really simple "time picker" and it works really nicely, I have dynamically given the element a min and max as you can see and the min and max works for the 'hours' portion of the time and even removes hours that lie outside of the range from the scroll wheel inside the app (when tested on a phone of course) but for some reason it does not do the same for the minutes.
Interestingly my ng-change function is not triggered if you select a time that is out of the range in regards to minutes, so if i have a max of "20:30:00" for example and pick the time "20:31" the ng-change is not triggered at all, but if i pick "20:30" it is triggered.
So it is acting as though it knows the min and max, but what I want in the first place is for the incorrect MINUTES to be removed from the selectable scroll wheel too, like the hours.
Please help, thanks!
Additional Details...
The dynamically set times are in this format: e.g. "21:30:00"
I set the min and max values before the DOM has loaded so that I can be sure that the correct values are going to be used.
The only method I have found that will accomplish this without writing something custom yourself is using UI bootstrap Timepicker
You can specify a min and max and it will restrict the user from changing it in the input. It validates input in real time. Sounds like those are your requirements.
Here is a plunkr demo from their site that I modified showing the min and max validation. You must specify min and max in the controller code in date format.
HTML
<uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" max="max" min="min" ></uib-timepicker>
JS
var d = new Date();
d.setHours( 2 );
d.setMinutes( 30 );
$scope.min = d;
var d2 = new Date();
d2.setHours( 11 );
d2.setMinutes( 0 );
$scope.max = d2;
I want to use Zebra datapicker... but if I attach it to the input, I can't write somethig different from data which is picked in calendar... so how I can choose what I can write into textbox...
P.S I am using only one textbox in my page
Whilst I'm not familiar with the date picker you mention, it ought to have some means of specifying a callback function that acts as an intermediary between the selected value and what, ultimately, gets put in the text field.
I wrote a date picker some years ago which does this - see the callback_func param.
Without a callback, it inserts the selected date into the field. With a callback, it passes the selected date to the callback and uses the function's return value to decide the new value for the field.
var cal = new Calendar({
callback_field: '#myField',
focusElements: '#myField',
callback_func: function(d, m, y, date) { return 'hijack!'; }
});
You need to use a plugin that validates your keyup event on the text field.
Here's a small piece of code I wrote that does just that:
https://github.com/cassilup/jquery.keyup.validator
Unfortunately, it does not have code for date, but you tweak it freely to suit your needs.
Alternatively, you could assign the text field as readonly and let the datepicker do the date input.
I have an HTML form that includes type=date fields. Each date field has a min/max value set as a basic sanity check since my users like to type into the form (rather than use date pickers) and they often type dates like "4/17/0213".
The form is submitted by a jquery ajax call which is triggered by a form submit.
All users are using Chrome as a browser.
When they type in a date completely that is out of range, date range validation works as it should. When they merely change the year, or the year and one other part of the date (month or day, but not both), in an existing date so that it ends up outside the valid range, Chrome does not give them a validation error. Instead, it silently "corrects" the year back to what it was previously so that it stays in the valid date range. This results in garbage values getting silently submitted to the database.
I've tried writing my own validation routine in javascript, but it seems that the problem is that the underlying data value doesn't change to the invalid year, so trying to get it and check it is a waste of time. As far as Chrome is concerned, the invalid year just wasn't typed.
Does anyone know a workaround for this?
EDIT: I have included some code to demonstrate part of the problem.
<!DOCTYPE HTML>
<html>
<head>
<title>Date bug test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("submit", "FORM", function(){
$("#dateshow").html("Date entered was: " + $("input[name=foo]").val());
return true;
});
});
</script>
</head>
<body>
<form action="javascript:void(0)">
<input type=date name="foo" min='1980-01-01' max='2080-01-01' />
<input type=text name="bar">
<input type=submit>
</form>
<div id=dateshow></div>
</body>
To demonstrate:
Save this to an html file and open in Chrome
Enter a date between 1980 and 2080 into the date field and submit
Date will be shown as submitted.
Select ONLY THE YEAR in the date field and change it to a value outside the valid range
Click submit again.
Note that the date submitted does not change, even though your invalid date still shows in the form control.