How to change date format of html date picker - javascript

I am using AngularJs to create a form where I need to add a date picker which should show date in format of mm-dd-yyyy.
But the default HTML5 date picker shows date in dd-mm-yyyy format. Is there any way to show date in mm-dd-yyyy format ?
My code -
<div>
<div class="col-md-6">
<div class="position-relative form-group">
<label for="123" class="font-weight-bold">Date of Birth <span class="text-danger">*</span></label>
<div id="dob" class="input-group date">
<input type="date" class="form-control required" id="dob" ng-model="data.DOB" required />
</div>
</div>
</div>
<button ng-click="submit(data)">Submit</button>
</div>
$scope.submit = function(data) {
console.log(data);
}
How can I achieve this?

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
Check this for more details - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Related

end date selection based on start date in laravel

Hello!
I am working on Laravel project I have a form for invoices which include two date fields along with other fields. The two dates are named start_date and end_date. I want to select the end date based on start date which date should be the next month just one day before. For example ..
I set the start date to 10 of March then the end date should be 9th of April. one day before the selected date of next month
My fields are..
<div class="col-lg-6">
<div class="form-group">
<label>Start Date</label>
<input class="form-control" type="date" name="start_date" value="{{old('start_date') }}">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>End Date</label>
<input class="form-control" type="date" name="end_date" value="{{ old('end_date') }}">
</div>
</div>
How can this be done and should it be through the java script or can it be in controller.
If we can do it in controller then I sure that we will not need the end date field and that will be no problem..
Thanks in advance!
Simple Way to do it in controller is :
Carbon::parse($request->start_date)->addMonths(1)->subDays(1)
What it gonna do is, parse the date via carbon, add month to the start date, then delete a day from the added month.
You can just set it into variable. and store it in the database as end date, or just directly store it.

Angular js error in date format

I have an input type html element where the date format is mm/dd/yyyy.
I coded the whole app, in the server,executing through ionic serve. Now when i installed the app on mobile, the date format of the input type is set as yyyy/mm/dd.Can anyone tell me what to do in this situation?Sorry couldn't provide any plunker.
The code is:
<div class="row">
<div class="col-50 padd_5">
<label class="item item-input">Date:</label>
<input type="date" placeholder="Enter Date" ng-model="createEventForm.date" name="eventDate" required>
<br />
<div ng-show="eventFormObject.$submitted || eventFormObject.eventDate.$touched">
<div ng-show="eventFormObject.eventDate.$invalid">Event date is invalid.</div>
</div>
</div>
</div>
Note:This question is not a dublicate of Is there any way to change input type="date" format? as no data for mobile input type date view is given,only html5
After checking #Rhumborl's comments , i came to the conclusion that date format for html5 cannot be changed.It paves way for a rather awkward situation that the default date format for server is mm/dd/yyyy and for mobile it is yyyy/mm/dd.Anyways thanks for your time who commented.

Obtaining start and end Date Objects using the component methods

(eternicode) I'm using a range datepicker for my form.
<div class="input-daterange col-md-9 input-group" id="act">
<input class="form-control" name="act_1" type="text">
<span class="input-group-addon">to</span>
<input class="form-control" name="act_2" type="text">
</div>
i want to get both values in Date Object to later replace the data sent on the form with the ISO8601 format to preserve timezones.
i have used
$(element).datepicker("getDate");
$(element).datepicker("getDates");
but i haven't obtained any success. Anyone has an idea of what it is the rigth way to obtain this information ?

OnClick event in html datepicker without jQuery

I am currently using Html, I want to make my max date dependent on another date
<div class="form-group">
<div class="col-xs-5">Arrival Date: <input class="form-control" type="date" min="<?php echo $datetoday?>" name="arrival" required></div>
</div>
<div class="form-group">
<div class="col-xs-5">Departure Date: <input class="form-control" type="date" name="depart" required></div>
</div>
I want to make the min of departure date is value of arrival date, is there anything I can do without using jQuery?
You can set eg. max="2019-12-31" to limit date range. This can be done on the backend where you create your HTML. If this is dynamic (ie. the user selects an arrival date and you want to limit the departure date) you need Javascript/jQuery.

Date value not showing value pulled from database

My setup is SailsJS + Mongo using EJS for inserting database values onto my page.
On my page I'm using a standard HTML form date picker and to set a date. Using this I can successfully submit the selected date to my database with no issues. The date format looks like this in my DB: 2015-06-09T00:00:00.000Z
I can call this value into a regular text field, but if I try to populate a date picker value, it just shows up like the value has not been populated.
Is there something I'm missing or some inbetween step which needs to be taken?
Here is what my form entry looks like for the date picker:
<div class="control-group">
<label class="control-label" for="resStart">When do you need the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resStart %>" name="resStart">
</div>
</div>
<div class="control-group">
<label class="control-label" for="resEnd">When will you be done with the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resEnd %>" name="resEnd">
</div>
</div>
your value in DB is actually a datetime value. i think just passing it to date picker will not be recognized. it needs to be changed to date format. the input tag in your html is date type. i think change this to text will get the value appear. but to make the date picker work you will need to do some data conversion between the datetime format 2015-06-09T00:00:00.000Z and 2015-06-09

Categories

Resources