Develop Reference

How to set date popup to below text field

I am creating date field in angular 4, In that when I click on the date field Date popup must come below the date field.
Here is my code
<div class="col-3">
<div class="form-group calenderForm calenderForm1">
<label for="templateName">REPAIR DATE (FROM)</label>
<owl-date-time name="repairDateFrom"
[(ngModel)]="repairDateFrom"
[max]="max"
[type]="'calendar'"
[dateFormat]="'YYYY-MM-DD'"
[placeHolder]="'YYYY-MM-DD'"
></owl-date-time>
<div class="error-message-block"></div>
<input type="hidden" name="repairDateFrom" id = "repairDateFrom"
value="{{repairDateFrom | date: 'yyyy-MM-dd'}}"
(click)="closeDatePopUp()"/>
</div>
</div>
whether I have to use ngModel function or I have to write in picker plugin component to achieve the result.
Please help me that how can I achieve it.

The best and easy idea is to install ng2-popover . Popover is for angular applications using bootstrap but if you don't want to use it without bootstrap - just simply create your own css class. Popover doesn't depend of jquery.
If you are useing bootstrap 4 powered for Angular you can implement popovers out of the box. Quick and easy popovers
<input type="input" placement="bottom"
ngbPopover="Popover text." popoverTitle="Popover on bottom">

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.

Combine ui-bootstrap datepicker and timepicker using angularJS?

I'm working on a web app which makes use of UI-Bootstrap's datepicker and timepicker directives. For the datepicker I am using a simple popup dialog, and for the timepicker I simply have the dialog on the page next to the datepicker.
Unfortunately I am having difficulty getting these two directives to work together. When the user selects a date, everything works correctly, but when the timepicker is updated, I'm not sure how to get it to consequently update the datepicker as well.
I considered two options for getting around this, the first one was to have the timepicker simply update the ng-model of the datepicker whenever it is changed, but unfortunately this does not also retroactively change what is displayed on the datepicker, so does not work for me. The second option I thought about was having the directives interact with each other, but unfortunately I am a novice at looking at and editing directives, so would need some help with this solution.
If anyone knows of a way to achieve what I want with the dynamic updates, please give me any advice you can offer.
Here is the HTML of my schedule view from the Plunker, which is attache below:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Schedule</h2>
<!-- DatePickers -->
<div class="col-md-11" style="padding-bottom:20px">
<div class="col-md-6">
<p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
<p class="input-group">
<input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6" style="padding-top:2px">
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>
</div>
</div>
</div>
</div>
Here is a plunker with an example of what I am trying to do. If there is anything further I can provide that would help with answering this question, please let me know!

Unfortunately you can't just update the model so you have to break the reference by reassigning the model with the new value. I forked the plunker above and fixed it in this version.
vm.pickTime = function(dateTimestamp) {
var newDate = new Date(dateTimestamp);
newDate.setHours(vm.time.getHours());
newDate.setMinutes(vm.time.getMinutes());
vm.date = newDate;
};
I also introduced a form element to make things a little more clean.

I found a Plunker that may help you.
http://plnkr.co/edit/QujX5A?p=preview
<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep"
minute-step="minuteStep" ng-model="date" show-meridian="showMeridian"
date-format="dd-MMM-yyyy" date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-date="false"
readonly-time="false"></datetimepicker>
Is this what you were looking for?

Your plunker has typos in it.
You defined vm.pickTime and vm.pickDate in the controller and called vm.timePick and vm.datePick in html.
I fixed them in this plunker.
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.pickTime()" show-meridian="false"></timepicker>

How to get the value of current selected date from calendar eonasdan

I am using http://eonasdan.github.io/bootstrap-datetimepicker/ for calendar. Now I want to pick the selected date by the user. I am stuck with this calendar. Please help me to get the current selected date by the user I have used js to get the value.
On each date there is a class named "day". Now I wanted to get the value of the attribute "data-day" which have the value of the date as follows:
$(".day").click(function(){
var clicked = $(this).attr('id');
alert(clicked);
});
It returns the attribute's value only one time it's not recognizing the second click.
Please help me with js or this eonasdan plugin.

HTML
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-4 col-xs-6">
<input type="text" class="form-control" id="datetimepicker2" />
<br>
<input type="button" class="btn btn-success" id="getDate" value="Get Date" />
</div>
<span id="SelectedDate"></span>
</div>
JS
$('#datetimepicker2').datetimepicker();
$('#getDate').click(function () {
console.log($('#datetimepicker2').data('date'))
$('#SelectedDate').text($('#datetimepicker2').data('date'))
})
DEMO
Get Only Date Part

I have found methods for calendar described at linked page.
So for example to see what have user entered you have to:
$('#datetimepicker').data("DateTimePicker").date()
input here your id and as result receive object which has '_d' field with value.
data('DateTimePicker')
also has a lot of taste functions to configure plugin.

i think i might have the solution for you.
$('#datetimepicker1').data('date')
Please have a go.

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