Develop Reference

JavaScript get UTC from local midnight

I have a date that comes from a Bootstrap DateTimePicker $('#datetimepicker').find("input").val() that has the format "mm/dd/yyyy".
<div class='input-group date' id='datetimepicker'>
<form autocomplete="off" onkeydown="return event.key != 'Enter';">
<input type='text' autofill="off" readonly class="form-control" />
</form>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I'm trying to get the UTC date and time for the selected date, at midnight, using Moment js:
moment.utc($('#datetimepicker').find("input").val()).tz(timezone).format('YYYY-MM-DD HH:mm:ss')
For example, starting date from the picker is 01/21/2022 and the timezone is America/Phoenix which is UTC-7.
I should have 2022-01-21 07:00:00 but my code returns 2022-01-20 17:00:00.
What am I doing wrong? Is there a way to get the UTC time for a day at 00:00 time, just by knowing the timezone?

You have to create the timestamp in your local timezone first, and then convert it to UTC. You are doing it the other way around. Ie if I split up your code snippet, you are doing the following
let thedate = $('#datetimepicker').find("input").val();
let utcdate = moment.utc(thedate);
let localdate = utcdate.tz(timezone);
Thus, the timezone offset is, of course, added in the wrong direction ...
Try the following
function getTime() {
let thedate = $('#thedate').val();
console.log(thedate)
// create a timestamp in the respective timezone
let localdate = moment.tz(thedate, "America/Phoenix");
// convert it to utc
let utcdate = localdate.utc();
// format the timestamp
console.log(utcdate.format("YYYY-MM-DD HH:mm:ss"));
}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="thedate" type="date">
<input type="button" onClick="getTime()" value="Get Time">

JQuery validate dynamically added input fields against other dynamically added input fields

I have multiple pairs of input fields for start and end dates:
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}
I'm using jQuery's validator.AddMethod to validate that the end date is after the starting date:
$.validator.addMethod("endError",
function (value, element, params) {
var startDate = $("#StartDate").on('input').val();
if (value.toString() <= startDate) {
return false;
} else {
return true;
}
});
$.validator.unobtrusive.adapters.addBool("endError");
The problem is the validation is always comparing the end dates to the first starting date. I want each end date to be compared to it's relevant starting date.
I'm still a newbie in javascript but I know that this is probably caused by the id being the same for all the startDate inputs, which is illegal html.
Is there a way to fix this?
Thanks!

the problem with your code is you are referencing always the same id StartDate
so its normal the validation is always from the same startdate. When you have lot of same id the search of id stops always at the first.
#foreach (var exam in exams){
<input type="date" data-val="true" required id="****StartDate*****" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
}
and you have the same id for different tag, its not good in html.
in your validator, you reference the StartDate id
var startDate = $("#StartDate").on('input').val();
one solution will be to create an id indexed :
#{int i=1;}
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate#(i)" value="exam.StartDate">
<input type="date" data-val="true" data-val-endError="Can't be before start date" required>
i++;
}
you adapt the validator to trap the right id.
i suggest you to create an attribute data-id for example, and you put the id of StarDate: so in validator you trap the id of right date
$.validator.addMethod("endError", function (value, element, params) {
var idstartDate = $(element).attr("data-id");
var startDate= $(idstartDate).on('input').val();
:
and you modify the loop:
#{int i=1;}
#foreach (var exam in exams){
<input type="date" data-val="true" required id="StartDate#(i)" value="exam.StartDate">
<input type="date" data-id="#StartDate#(i)" data-val="true" data-val-endError="Can't be before start date" required>
i++;
}

Compare HTML5 date input with Angular2 date

I wanted compare the date (input type="date" in HTML5) with the date Objekt in Angular2 but there is no way to compare them. I there a easy way to do it ?
<label> Create Date: </label>
<input class="form-control" [ngModel]="chart.createDate"
(ngModelChange)="chart.createDate = $event"
type="date"
data-date="" data-date-format="DD MMMM YYYY"
required #createDate="ngModel" name="createDate"/>
<div *ngIf="Date.parse(chart.createDate).getTime() < dateControll.getTime()">
- date is older than today
</div>

I did it like this:
if (varDate1.valueOf() > varDate2.valueOf()) {
// do this and that...
}
but both needs to be defined as Date in Angular...

javascript get datepicker start or end value of attribute

<div class="input-daterange input-group" id="datepicker'">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
I know the method goes something like this:
datestart = $("#datepicker").find("input").val();
However this returns 2 different value (Only showing the first one regardless what I do), how do I go about getting just the start or the end of the value?
I was trying something like this:
datestart = $("#datepicker2").find("input").attributes['name'=start].val();
Obviously that doesn't work... Can anyone shine some light on this issue?

You almost got it right:
datestart = $("#datepicker").find("input[name='start']").val();
dateend = $("#datepicker").find("input[name='end']").val();
or better yet:
datestart = $("#datepicker input[name='start']").val();

you can write the following to get the first value
$("input[name=start]").val();
to get the second value use
$("input[name=end]").val();

Bootstrap Datepicker - Set startView: 'decade', but not current decade

Currently I have the startView showing the current decade, which is ok but I want to make the previous decade be the startView - not the current decade.
this.dobDatePickerView = new DatePickerView({
el: this.$('[name="dob"]'),
startView : 'decade',
endDate : this.sandbox.dates().fwFormat('date'),
value : this.sandbox.dates().subtract('years', 18).fwFormat('date')
}).render();
I want to subtract 18 years from the decade view default selected year, so instead of '2013' being pre-selected it should default to 1995.

This could work: (demo):
<div class="input-append date" id="dp1" data-date="01-01-1990" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$('#dp1').datepicker();
</script>
By separating the datepicker from the input and setting a default value on the picker but not the input, you can get something that will only populate a date once a date is selected but start at any value you please.

https://github.com/eternicode/bootstrap-datepicker#setstartdate
perhaps try calling setStartDate() on the datePicker, when it is clicked/opened, and set the date ten years ago