Date value not showing value pulled from database - javascript

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

Related

Display date when updating a form with type=date

I am trying to display the current date that is saved in my database when I'm updating the registered data. When I click to update the register, all the fields with input type=text are shown with the data in the database, but the fields with input type=date show as mm/dd/yyyy, instead of the data stored. Is it possible to show the date stored with the input type=date in my update form? Thanks for helping.
Here is my input:
<label for="birth_date">Birth Date: </label>
<input
type="date"
class="form-control"
name="birth_date"
id="birth_date"
value="<%= patient.birth_date %>"
/>
Make sure the value of patient.birth_date is in YYYY-MM-DD format. The MDN documentation says:
Note: 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.

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

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.

Categories

Resources