Goal: I need to init a datepicker to be set to a max date of today - 18 years (birthDateMax), and to save its value into birthDate
In template I have
<DatePicker class="date_not_choosen"
v-if="! birthDateSet"
maxDate="birthDateMax"
v-model="birthDate"
/>
In script (note that I am using momentJs library.
data() {
return {
birthDateMax: moment().subtract(18, 'years').format('Y-MM-DD'),
birthDate: this.birthDateMax,
}
}
The problem: when app starts, the date picker is set a 1970-01-01
Replace maxDate="birthDateMax" with :maxDate="birthDateMax".
The : is the shorthand to Vue's v-bind:, which is required to make the attribute maxDate reactive.
Related
the input field always showing error, could some one help me.
var dateRegEx = /^(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])\/(19|20)\d{2}$/;
hiredate: new FormControl({value:null}, Validators.compose([Validators.required,Validators.pattern(dateRegEx)])),
This is also not working.
Update: I used the control with mat-datepicker, which setting the control value automatically to javascript date if we input default mm dd yyyy format otherwise it is setting null.
<mat-form-field>
<input matInput id="hiredate" name="hiredate" required [matDatepicker]="picker1" placeholder="Hire Date" formControlName="hiredate">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
<mat-error *ngIf="isFieldInvalid('hiredate')">
Please provide Hire Date
</mat-error>
</mat-form-field>
Please check my answer.
After debugging I found that, the underlaying mat-datepicker automatically setting the input value to Date value, and it accepts the default format as mm[-/. ]dd[-/. ]]yyyy if the user inputs in this format, it sets control value as Date value, which is not validated with date pattern. if the user provides in different pattern input, it sets control value as NULL.
import {Injectable} from "#angular/core";
import {FormControl} from "#angular/forms";
#Injectable()
export class DateValidator {
constructor() {
}
static date(c: FormControl) {
//const dateRegEx = new RegExp(/^(0\d|1[0-2])\/([0-2]\d|3[0-1])\/(19|20)\d{2}$/);
//console.log('Date Value is:',c.value);
return c.value!=null ? null : {
dateValidator: {
valid: false
}
};
}
}
and the control defined with validator as
hiredate: new FormControl({value:null}, Validators.compose([Validators.required,DateValidator.date])),
and now the validator working fine with mat-datepicker
I am using alpaca framework. I have date time type, when I click on it only I can able to select the DateTime, I want this to be filled automatically with current date time when it gets focus or when page loaded.
Any suggestions please.
You can use the "data" object in alpaca config to set the date field default value to current date:
"data": { "myDateField": new Date() // or you can use moment } }
You can also set the date in the postRender function like this:
"postRender": function(control) {
var date = control.childrenByPropertyId["date"];
var currentDateTime = moment().format("MM/DD/YYYY HH:mm:ss")
date.setValue(currentDateTime);
}
Here's a working fiddle for that.
Today i am facing one issue which has following requirement.
Date should be Editable.
Date should be in particular format.
My Code is like below which is not working.
foreach(var item in Model)
{
<div>#Editable(item, x => x.Start_Date.ToString("MMMM dd,yyyy"))</div>
}
I have tried following approach but throwing "DateParameters" namespace error.
#Editable(item, x=> x.Start_Date, new DateParameters { Format = "MMMM dd,yyyy"})
Also i have learner following thing but how can i achieve this ?
To make a field editable takes two parameters, this has been used to make the Date field editable. The first parameter instructs Glass.Mapper which field to make editable, the second parameter then specifies what the output should be when the page is not in page editing mode. This allows you to control the output of the field when in the two different modes.
Can anybody help me ?
For Experience editor mode, this works for me in razor view:
#Editable(model => model.SomeDateField, new { Format = "dd-MM-yyyy" })
Sitecore 8.2 though, with Glass 4.4.
What you want to do is to provide the default format but keep things the same for the main glass stuff. Like so:
foreach(var item in Model)
{
<div>#Editable(item, x => x.Start_Date, x=>x.Start_Date.ToString("MMMM dd,yyyy"))</div>
}
This will make the date a normal date when editing, but allow you to format it for the final page.
Usually in this case i use different code for "Normal View" and "Experience Editor", so for normal view you need only to display the date with format without making it editable, and on experience editor you need only to edit the date field the author will not care about the date format with experience editor, so your code will be like this :
foreach(var item in Model)
{
{
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<div>#Editable(item, x => x.Start_Date)</div>
}
else
{
<div>#item.Start_Date.ToString("MMMM dd,yyyy")</div>
}
}
}
I have tried that as well but it is throwing an error like below
**Value cannot be null. Parameter name: objectToSwitchTo
at Sitecore.Diagnostics.Assert.ArgumentNotNull(Object argument, String argumentName)
at Sitecore.Common.Switcher2.Enter(TValue objectToSwitchTo)
at Glass.Mapper.Sc.GlassHtml.MakeEditable[T](Expression1 field, Expression1 standardOutput, T model, Object parameters, Context context, Database database, TextWriter writer)**
Any help on this ?
There is a pick-a-date add-on for Ember found here.
{{pick-a-date date=(readonly date) on-selected=(action (mut date)) placeholder="Pick a date" options=(readonly extraPickadateOptions)}}
How would I pass a saved date value to the tag? The below (value=date) does not seem to work?
{{pick-a-date value=date date=(readonly date) on-selected=(action (mut date)) placeholder="Pick a date" options=(readonly extraPickadateOptions)}}
Or what if I wanted to change the value from 'date' to something different... for example dob... so it would 'mimic' this
{{input value=dob}}
I have also tried using this addon and faced same issue. I need date in timestamp format and I implemented like following. You can check this,
{{pikaday-input
value=inputDateValue
onSelection=(action 'setSelectedDate') }}
For getting the value and binding that to object, I added following code in action handler,
actions : {
setSelectedDate : function (date) {
//To get the timestamp in seconds
let timestamp = Math.floor(date.getTime() / 1000);
this.set("inputDateValue", date);
// Used timestamp for setting value to object
record.set("dateTime", timestamp);
}
}
For setting the value I used folowing code,
if(record.get("dateTime") {
let date = record.get("dateTime") * 1000;
let dateValue = new Date(date);
this.set("inputDateValue", dateValue);
}
I am using bootstrap datetimepicker. If I choose any date means, its automatically taking current time(Hours and minutes). How to set the default time in bootstrap datetimepicker. Here, I want to set the default time inside of the "changeDate" function. I am using the following code,
$('#datetimepicker'+rowIndx).datetimepicker({
format : "dd/MM/yyyy hh:mm",
pickSeconds:false,
}).on("show",function(e) {
$('#datetimepicker'+rowIndx).datetimepicker("setDate", "");
}).on('changeDate', function(e) {
});
Please explain me, how to set default "time" in "changeDate" function.
It could be done by the next code:
$('#datetimepicker'+rowIndx).data("DateTimePicker").setDate(new Date());
Check the working fiddle