Develop Reference

Date Picker control not working as expected for 'dd-mm-yyyy' format in MS Edge

I am using the Datepicker via bootstrap JavaScript. I have this code:
<div class="col-sm-4">
#Html.TextBoxFor(m => m.Trust.EstablishmentDate, "{0:dd-MM-yyyy}", new { id = "establishmentDate", #readonly = "readonly", #class = "datefield form-control" })
#Html.ValidationMessageFor(m => m.Trust.EstablishmentDate, null, new { #class = "help-block" })
</div>
$(document).ready(function () {
$("#establishmentDate").datepicker({
changeMonth: true,
changeYear: true,
format: 'dd-mm-yyyy',
});
});
The above code worked fine while publishing it in IE, displaying and recognizing the date in the required dd-mm-yyyy format from date picker.
But the same code is not working as expected in the Edge browser where the below error is getting prompted:
The required field must be a date.
It's recognizing the format as mm-dd-yyyy and hence the above error appears when it finds the month as invalid for the cases like 22-06-22, where as for cases like 02-06-22, its recognizes as 6th Feb.

Moment JS today's date validation issue with Vue

In my VueJS application I have a component with a form.
In that form I have a field to pick the date.
My requirement is to show an error message if the selected date is older than the current date.
Basically the selected date need to be either today's date or future date.
I'm using Moment JS.
I have following custom rule in my Validator.vue
const dateIsToday = (value) => {
var todayDate = moment(new Date()).format("DD-MM-YYYY");
var selectedDate = value;
return selectedDate>=todayDate;
};
But this works only if I selected an old date from the current month... Assume if the user has picked an older date from this month like 10-04-2022, then it'll show the error message.
But if the user selected an old date from last month or a past month like 10-01-2022, this won't show me the error message....
In my form.vue I have
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p>
<div class="h-12">
<cs-date-picker
id="startDate"
v-model="project.start_date"
:default-selection="true"
:name="`${identifier}-start_at`">
</cs-date-picker>
<validator
:identifier="`${identifier}-validate-project`"
:rules="validations.startDate"
:name="`${identifier}-start_at`"
/>
</div>
</div>
And under my validations I have,
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsToday: {
message: 'Date has to be today's date or a future date.'
},
},

It seems that you are comparing strings. Instead you should make real use of moment and compare moment dates:
const dateIsToday = (value) => {
let todayDate = moment();
let selectedDate = moment(value, "DD-MM-YYYY");
return selectedDate.isSameOrAfter(todayDate);
};

How to create multiple bootstrap datetime picker while doing itereation

Hi guys am iterating the database records in jsp using iterator. Here per each iteration text,startdatetime picker and end datetime picker. i have used date time picker with id creates a problem. I dont know how many rows i gonna iterate how can i solve this?
In fiddle you may suggest me like this run one for loop with 5 iteration with in the first column some simple text second column start datetime picker and third column end datetime picker
<s:iterator value="%{#session.subjectlist}" status="resultstatus">
<td><s:property value="#resultstatus.count" /></td>(this is serial number like 1,2,3 etc used as id in datetime picker)
<td><s:property /></td>(this is a simple text)
<td>
<div class='input-group date' id="<s:property value="#resultstatus.count"/>">
<input type='text' name="examDate1" class="form-control" readonly="readonly" onClick="activateDatePicker()" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">/span></span>
</div>
</td>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#datetimepicker7').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker8').datetimepicker('setStartDate',minDate);
$('#adminTimeTableForm').bootstrapValidator(
'revalidateField', 'examDate1');
});
$('#datetimepicker8').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker7').datetimepicker('setEndDate', minDate);
$('#adminTimeTableForm').bootstrapValidator('revalidateField', 'examDate2');
});
});
});
</script>

Datepicker change date value and formatting rails 4

I've made form to change date or city, but datepicker doesn't work properly. Here is link: http://leszczyna.wzks.uj.edu.pl/12_stolarski/events_for_seniors/pl/events?utf8=%E2%9C%93&search=Krak%C3%B3w&start_date=11-06-2015
Problem is with datepicker, when you click on it, it changes date to another format and year is set to 1911.
Here is my js:
$('document').ready(function() {
if ($('body.events').length) {
/* Datepicker for changing date in events */
$('.date').datepicker({
'language': "pl",
'todayHighlight': true,
'format': 'dd-mm-yyyy',
'autoclose': true
})
}
And part of my erb file
<div class="form-group">
<label class="sr-only" for="date">Email</label>
<%= text_field_tag :start_date,
params[:start_date],
placeholder: 'Kliknij, aby wybrać datę',
class: 'form-control date',
:data => {
provide: 'datepicker'
}
%>
</div>

You have kept your format as dd-mm-yyyy, but your param :start_date holds value in wrong order. If you want to set come default date, I will suggest you to use defaultViewDate option. Your calendar dates (which opens up initially) are disabled, that's why it selects some 1911 year date. try using startDate and endDate option. I hope it will fix it.

jQuery datepicker not displaying value from database

I have a field for inputting an employee's hire date that uses a jQuery datepicker, which works perfect. However, when you edit this employee's information the hire date field displays mm/dd/yyyy, but viewing the html shows the correct hire date value from the database. I implemented my datepicker using an editor template.
Generated HTML:
<input class="text-box single-line" data-val="true" data-val-date="The field Hire Date must be a date." data-val-required="The Hire Date field is required." id="HireDate" name="HireDate" type="date" value="02/12/89">
Editor Template:
#Html.TextBox("", Model.ToString("mm/dd/yyyy"), new { #class = "datepicker"})
View:
<div class="form-group">
#Html.LabelFor(model => model.HireDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.HireDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.HireDate, "", new { #class = "text-danger" })
</div>
</div>
JS:
$(document).ready(function () {
$(".datepicker").datepicker();
});
I have tried multiple variation of dateformat in the JS, but nothing seems to be working. What can I do to display the existing date?

Provided markup should show the value, there would be something else to understand.
The rendered HTML
<input class="text-box single-line"
data-val="true"
data-val-date="The field Hire Date must be a date."
data-val-required="The Hire Date field is required."
id="HireDate" name="HireDate"
type="date"
value="02/12/89"
/>
Here we can notice that the generated html for the element doesn't has css class = datepicker which we specify in view level(high precedence, supplied editor for css class will get override with view level class they cant merge together).
value="02/12/89" indicates that you've decorated with [DisplayFormat(DataFormatString="MM/dd/yy")] at Model Property HideDate
Now, it tells that control not rendering from its EditorTemplates view, it was rendering based on datatype with defaults as html5 input element with type=date and with placeholder as mm/dd/yyyy
Here we need to make sure that the naming conventions for EditorTemplates folder name and the view name.
Editor-Template View path would look like
..\Views\[Shared|ControllerName]\EditorTemplates\[DataType|CustomName].cshtml
Your Editor Template Path must be one of below two cases
In your case data-type = DateTime
So default view path would look like ..\Views\Shared\EditorTemplates\DateTime.cshtml
If your controller name is Employee the controller specific template path would be ..\Views\Employee\EditorTemplates\DateTime.cshtml
Your Case
If you're using custom name like Date.cshtml that you mentioned in comments then
path should be ..\Views\Shared\EditorTemplates\Date.cshtml
#model DateTime
#Html.TextBox("", Model.ToString("MM/dd/yyyy"), new { #class = "form-control datepicker" })
and from EditorFor you should pass view name like below
#Html.EditorFor(model => model.HireDate, "Date")

you must use the overload with format parameter
HtmlHelper.TextBox(string name, objeect value, string format, object htmlAttributes)
for examaple:
#Html.TextBox("", Model,"{0:dd/MM/yyyy}", new { #class = "datepicker"})