display a date on an edit from from mongo using ejs - mongodb

There is an edit page where a user can, obviously, edit aspects of an event. Everything displays fine except the Date shows empty.
I am using the type="date" in my html which may be a cause, how can I get around this so that I can show the date, because when it saves it saves as null after editing the event
View:
<div class="form-group">
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= event.startDate %>">
</div>
Route:
router.get("/event/:id/edit", isLoggedIn, function(req,res){
Event.findById(req.params.id, function (err, foundEvent) {
if(err){
console.log(err);
console.log("Cannot find the event...maybe the database isnt running?")
} else {
res.render("eventEdit", {event: foundEvent});
Everything works fine but the date

Can you add some more information to the question? at the moment it looks quite unclear. like how is your server set up.

It turns out its an HTML thing, if you want to display a date you have to have it formattted as YYYY-MM-DD then it shows fine, otherwise it doenst recognize the format.
This comes into account if you use the type="date" attribute in your input
I had to edit the event date coming from mongo using momentjs and here is the line I used.
var newDate = moment(foundEvent.startDate).utc().format("YYYY-MM-DD")
res.render("eventEdit", {event: foundEvent, newDate:newDate});
The newDate is the variable being passed to the template, then I just have:
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= newDate %>">
This works.

Related

How to pick the year firstly when a angular-ui/bootstrap datepicker popup opened?

I want to pick year firstly in datepicker and after that pick month and after that pick day.
I want to see years first.
try this:
datepickerMode: "year"
js
$scope.dateOptions = {
datepickerMode: "'year'",
formatYear: 'yy',
startingDay: 1};
html
<input type="text" class="form-control" datepicker-options="dateOptions" ng-model="dt" is-open="status.opened" />
This is solution > plunker

protractor getting value from date picker input box

I'm using a date picker plugin called angular-bootstrap-datetimepicker
html:
<input type="text" ng-disabled="true" ng-required="true" name="startDate"
data-ng-model="source" class="input-large date-time-select-input ng-pristine
ng-untouched ng-valid ng-valid-required" date-time-text-field=""
required="required" disabled="disabled">
when the page loads, a date is populated in the box. I can't get the value from this textbox.
I tried:
element(by.name("startDate")).getAttribute('value'); //returns null
element(by.name("startDate")).getText(); //returns empty string
So I had asked dev to add in an id attribute, then I was able to locate it via id and do -
DisputeQueueSearchPage.startDateTextbox.getAttribute('value').then(function(text){
console.log(text);
});
this works now.
await this.shipmentEndDateInFilter.getAttribute('value').then(function(text){
console.log(text);
})
Works for me as well on fetching the by the default value of the date textbox.

knockout js datapicker options

using this code
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB"
name="StudentDOB" />
yeilds the following result.
When I change the code to
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB, datepickerOptions: {}"
name="StudentDOB" />
It appears as follows:
Now I want the year and month option while setting my max year to 2014. How do I do this?
The date picker you are talking about is not the the knockout datepicker as there is no such thing. It's the jQueryUI datepicker. The options are in the api documentation on the jQueryUI website: http://api.jqueryui.com/datepicker/
datepickerOptions: { changeYear: true, changeMonth: true, yearRange: '1900:2014' }
http://jsfiddle.net/d4kkg/

About the $dirty property and getting only modified fields in a form

I have a form with few fields and I'm trying to get modified fields only.
Here is what I got so far (simplified version) :
<form name="formTicket">
<div class="item title">
<label for="category-assignation"><?php echo T::_("Assignation :")?></label>
<textarea type="text" name="assignation" cols="50" rows="4" id="category-assignation" data-ng-model="ticket.assignation"></textarea>
</div>
<div class="item title">
<input id="save" type="submit" value="Save" data-ng-click="saveTicketInfo()" />
</div>
</form>
In my controller.js, I have :
$scope.saveTicketInfo = function() {
console.info($scope.ticket);
console.info($scope.formTicket);
//Query to my service to save the data
Category.saveInfo.query({data: $scope.ticket});
};
Prior to AngularJs, I would save my fields in an array at the loading of my form and compare their values with the new values posted. I could still do this but I'm looking for an AngularJs approach.
I've been trying to use the $dirty property of each field and only send to my services those with "true" value but this behavior is not suitable for me : if the defaut value for my field is "test" and the user modify the input to "test2" and modify it back to "test" and post it, $dirty will be true (even if the value has not really changed).
Is there any convenient and optimal way to achieve what I want ?
Thank you for your time.

Bootstrap-datepicker not POSTing hidden values correctly

I am using bootstrap-datepicker and need to send both the date selected and a hidden value when user hits the submit button. Code is so:
<div class='input-append date datepicker' data-date=$today data-date-format='mm-dd-yyyy'>
<form class='well' action='Update_Birthday.php' method='POST'>
<input type='hidden' name='ContactID' value=$ContactID>
<input class='span5' size='16' type='text' name='date' readonly>
<span class='add-on'><i class='icon-calendar'></i></span>
<button type='submit' class='btn'>Submit</button>
</form>
</div>
If I click Submit before selecting a date, then ContactID is sent correctly (but date is null of course). When I select a date, then both 'ContactID' and 'date' are identical, i.e. the date selected by the user.
How do I send the date AND hidden values correctly?
Help appreciated.
With this code (essentially what you have already, with quotes added to values):
<div class='input-append date datepicker' data-date='$today' data-date-format='mm-dd-yyyy'>
<form class='well' id='birthdayForm' action='Update_Birthday.php' method='POST'>
<input type='hidden' name='ContactID' value='$ContactID'>
<input class='span5 dateInput' size='16' type='text' name='date' readonly>
<span class='add-on'><i class='icon-calendar'></i></span>
<button type='submit' class='btn'>Submit</button>
</form>
</div>
There's no reason ContactID should be overwritten when a user selects a date.
As for preventing form submission until a date is selected, that will require some JavaScript. I would suggest just prefilling the date input with a value (possibly the previously specified birthday, judging by your code?) - since the field is readonly, users will generally be unable to empty the value, only change the date.
If you prefer to leave it blank, something like this should help:
$('#birthdayForm').on('submit', function(e) {
$('.dateInput').each(function() {
if ($(this).val().length < 1) {
e.preventDefault();
}
});
});