Loading PrimeNG calendar (date picker) with empty date - javascript

I am using PrimeNG calendar component. Initially I want to render the date input control without any date value and just a placeholder (mm-dd-yy), also as I need date value as a string so I am specifying dataType='string'
JS:
private datePickerValue = '';
HTML
<p-calendar [(ngModel)]="datePickerValue" dateFormat="mm-dd-yy" placeholder="mm-dd-yy" dataType="string"></p-calendar>
Problem here is, if my model value (datePickerValue ) is empty string, then the datepicker simply doesn't render.
Now if I initialize model with some string date like:
private datePickerValue = '01-01-2017'; then the datepicker control will render but it will also render the given date (01-01-2017).
How to render datepicker control without any default date?

Had the same problem, however in our case the datatype is Date and using Reactive Forms.
The issue is that if the date is initialized with new Date() p-calendar will show a date. The solution was to set the null/empty date to ''.
birthdate: (data.birthdate==null ? '': new Date(data.birthdate))

Related

Searching in input gives incorrect date in material date picker need to convert it into UTC

I am extending MomentDateAdapter for my requirement. When i am selecting a date from the calendar i am getting the correct output but when i manually type something in the input field i get wrong output.
For the selected date i am using _moment.utc({ year, month, date }).locale(navigator.language); to convert the selected value to UTC format but i am not sure on how to do the same when user searches in the input field.
StackBlitz.
to reproduce:
Try to select a value from calendar and see the console (notice the date is converted to UTC)
Now try to add a date manually by typing in and see the console (date is not converted to UTC).
You need to adapt your parse method call of moment to:
return moment.utc(value, parseFormat, this.locale, true);
to get utc Date from your input.
Here is your adapted Stackblitz.
The methods format and createDate are called if you set your date via picker, the parse method is called if you set it via input.

Datepicker date format not comparing with moment date format

I have a datepicker on a registration page for selecting date of birth. The date picker works fine and if I capture its value (using javascript) it's value is correct (e.g. 4-12-1978)
In my function, which is using moment.js;
function checkBirthdate(dob) {
// dob is coming from $('#validation-dateofbirth').val()
var allowed = false;
var registerDate = moment().add(-18, "years").format("MM-DD-YYYY");
if (dob.isValid()) {
allowed = dob.isBefore(registerDate);
}
return allowed;
}
when testing, dob.isValid is an error. Okay that became obvious, I was trying to compare a moment date with a non moment date. Therefore, I have to convert the datepicker's output to a moment date.
Adding
dob = moment(dob);
//I also tried using
dob = moment(dob, "MM-DD-YYYY");
to the function should've worked, since the passed in dob value was in the same format shown in many moment docs (well, I'm assuming the value from the datepicker is a string like "4-12-2016"), but it doesn't.
How can I convert the value coming from the datepicker (I'm using the bootstrap datepicker) to a moment date?

ng-model fot datepicker must be a Date instance

I am trying to sum values where date = date choosed by md-datepicker.
Sum with users works good. But I am getting error when I want to do same thing with date.
Error: The ng-model for md-datepicker must be a Date instance or a value that can be parsed into a date. Currently the model is of type: object
There is a JSFiddle with code

Reading DatePicker selected date value using dateFormat returns Minimum date value when no date is selected?

I have a datepicker control used with a textbox to show calendar dates.
#Html.TextBoxFor(x => x.CheckDate, new
{
#class = "text_dropdown_corner text-forty-seven-percent",
data_datepicker = "true",
size = 11,
data_min_date = DateTime.Today
})
In js file , i read this value as :
dateFormat(this.metaData.getDateElementValue().val(), "mm/dd/yyyy HH:MM:ss")
data_min_date is used since dates are to be restricted in the calendar.
dateFormat is used since i send this date as json to the controller.
Even if no value is selected for calendar control , the dateFormat returns value as DateTime.Today.
If no value is selected, i need to show null or empty value as date.
Any solution for this?

Create an input type="date" in Ember

I'm trying to create an <input type="date"/> in Emberjs and I have two problems:
In my country the date is displayed as DD-MM-YYYY format while the date field requires a MM-DD-YYYY format (and then the browser displays it according to its locale). So the date should be formatted in one way if the browser supports the date input field and in the other way if not
The date is bound to a Date object
I'm using Momentjs for formatting and Ember Data.
I'm trying to extend Ember.TextField like this:
App.DateField = Ember.TextField.extend
value: ( (key, value) ->
if value?
if /Date/.test value.constructor #I assume that if the passed value is a Date object then it is arriving directly from the model
if Modernizr.inputtypes.date
moment(value).format('YYYY-MM-DD')
else
moment(value).format('DD-MM-YYYY')
else # if the passed value is not a Date object then the user is typing into the form
if Modernizr.inputtypes.date
value = new Date('value')
else
value
).property()
type: 'date'
For browsers with date input supports this works.
For the other browsers the date is correctly displayed, but it is saved as a (wrong formatted) string in the model.
How can I maintain the correct formatting while still using Date objects in the backend?
Demo
Update
Thanks to the blog post provided in the accepted answer I was able to update the demo to do what I want (with some weirdnesses, but not relevant at this time)
Demo2
Have look at these two blog posts:
This is a simple date picker:
http://hawkins.io/2013/06/datepicker-in-ember/
This one uses the bootstrap date picker
http://hawkins.io/2013/06/fancy-ember-datepicker-with-twitter-bootstrap/
Hopefully that will help
I don't see any parsing for the string use case. You will need to use something like Date.parse to convert the string entered by the user into a Date object.
if Modernizr.inputtypes.date
value = new Date(value)
else
value = Date.parse(value)

Categories