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.
Related
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
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
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.
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
Am using the following validation plugin: https://github.com/posabsolute/jQuery-Validation-Engine
I have two fields start date and end date.
I want the start date to choose any future/past dates. However, I want the end date to compare with start date and it should be able to choose same date and future dates only based on the start date.
So, if I select start date as March 12,2014 then my end date should be able to choose same date March 12,2014 and future dates from March 12,2014.
So, I used the below code to validate:
<input type="text" class="validate[required,dateRange[grp1],custom[date] text-input datepicker" name="daterange" id="start_date" value="">
<input type="text" class="validate[required,dateRange[grp1],custom[date] text-input datepicker" name="daterange" id="end_date" value="">
However, the above code is not validating for the same day.
Also done all the methods in the following link https://stackoverflow.com/questions/22339338/start-and-end-date-validation-using-jquery-validation-engine-js . However, nothing worked for me??