Develop Reference

How to change date format of html date picker

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

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.

Save data from input only if it's in a right format

Currently I have two input fields. One for date and another for time. What I am trying to do is to prevent saving the default value of these fields, since now I am able to actually save the placeholders values and I want to be able to save something only if it's a date or hour.
Here is my html :
<div class="form-group">
<label class="control-label col-sm-2" for="date" ">Date:</label>
<div class="col-sm-2">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
<option value="11am" class="">11:00-11:30</option>
</select>
</div>
</div>
Please, help!

For the date, just use something like this <input type="date"/> It's an input meant for dates.
For the time, just use <input type="time"/> You guessed it; it's an input meant for times.
To test if your date is valid, you can use
if ( Object.prototype.toString.call(d) === "[object Date]" )
I'm not so savvy on regular expressions, but there is a function here under the heading 4. Modular checkTime() function that appears to use one for time validation.
You can do any formatting you need in JS, but this will ensure you get a valid date and time.

Validating Date:
Isn't the default value undefined? If so, reject the date if the value submitted is undefined using javascript. More info here.
Validating time:
Are you trying to figure out if they selected a date and if the hour is comprised of two half hours? That is my understanding.
First, allow them to pick more than one time:
<select class="form-control" id="time" multiple>
Secondly, use javascript to parse the values entered there and check that there are only two and that everything after the '-' of the one date matches everthing befire the '-' of the other date. For example:
Correct:
10:00-10:30 and 10:30-11:00
Incorrect:
10:00-10:30 and 11:00-11:30

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 ?

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