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.
Related
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>
I'm using Angular (4) and as you will see, I'm new to this game!
I've got data coming from a server backend ok, dates are being parsed into TS objects ok by my service.
However, when I include a date type input, I get a value of 'dd/mm/yyyy' rather that the date from the model (Browser is Chrome).
In my template:
<input [(ngModel)]="anObject.dateProperty"
type="date" name="dateProperty" required="required">
I have tried using placeholder and value attributes on the input element.
Else where in the same template file this displays the date as I would expect, so I'm comfortable the value is set:
{{anObject.dateProperty | date:'dd-MM-yyyy'}}
What is the Angular way of rendering the value of a date into an HTML input field?
My problem is how to input date in HTML form in this format 21-01-1999 and not in this format 01-21-1999?
When I write this HTML code
<input name = "dPregled" id="dat" type="date" required="required" />
</p>
it gives me mm-dd-yyyy format for input.
Also is there a way to automatically take today's date in a form?
I have been researching for an answer everywhere but I can not find it.
Thank u so much.
A quick Google search gives me loads of answers to your question.
From https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome?hl=en (so this applies to Chrome)
Web authors have no way to change the date format because there
currently is no standards to specify the format.
For the rest, according to Is there any way to change input type="date" format? and How to set date format in HTML date input tag?, there is currently no way to change the date format. It is all determined by your browser/OS, and because there is no specification yet for how to change the date format, you currently cannot change the format.
However
The Stack Overflow posts mentioned above are quite old, but one of the more recent answers (currently the second one on Is there any way to change input type="date" format?) does provide an answer on how to edit the format, although it requires some playing around with what I'd call somewhat advanced stuff. You can do it with HTML5 and the shadow DOM, which enables you to more or less create your own HTML elements. Older browsers / browser versions don't usually support it too well, though, but you could dig into it a bit and see if it works for you.
Regard to this question:
Also is there a way to automatically take today's date in a form?
Here what I'm gonna do if I need the current date:
//assign that variable to your date field
//today date.
if(empty ($_POST['date_today'])){
$_POST['date_today'] = date("Y-m-d");
}
//if u need other date + or - number day to count that date(here is past 5 days)
if(empty ($_POST['date_from'])){
$_POST['date_from'] = date("Y-m-d", strtotime("-5 day"));
}
in your html (for today) should be like this:
<input type="date" name="date_today" value="<?=$date_today?>" >
don't forget to declare that variable (eg. today date)
$date_today = $_POST['date_today'];
go with Jquery date picker its easy and it can modify date in any format
use Input type text instead so its more convenient to use predefined values
or use this code, and edit as per requirement
basically this code will help you check out
<!-----user will type date in dd-mm-yyyy formate but as he leaves textbox date will be converted to mm-dd-yyyy--->
<!--run it on fiddle : https://jsfiddle.net/rokrd/jp1swqru/9/ --->
<input type="text" name = "dPregled" id="dat" onchange="dateconverter()" required="required" />
<script>
function dateconverter(){
/*const monthNames = ["Jan","Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];*/
var testDate = document.getElementById("dat").value;
dteSplit = testDate.split("-");
yr = dteSplit[2]; //special yr format, take last 2 digits
month = dteSplit[1];
month = parseInt(month);
//month = monthNames[month];
//remove comment to get output in dd/M/yyyy
day = dteSplit[0];
alert ("converted to mm/dd/yyyy > "+month+"-"+day+"-"+yr);
document.getElementById("dat").value = month+"-"+day+"-"+yr;
}
</script>
with firefox, I have the same issue.
I found this link :
https://support.mozilla.org/en-US/questions/1309229
use about:config to set firefox params
and switch intl.regional_prefs.use_os_locales to true and it works fine.
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.
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.