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

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.

Related

jQuery datepicker issue, it pops twice

I need to enable a textbox based on the date change in jQuery Datepicker. So I have written a code like this:
HTML Code:
<div class="col-lg-3">
<div class="form-group">
<label for="support_due_date" class="form-label">Due date if any</label>
<div class="input-group date" data-target-input="support_due_date">
<input type="text" id="support_due_date" name="support_due_date" class="form-control datetimepicker-input" data-target="#support_due_date" value="<?php echo set_value('support_due_date');?>" />
<div class="input-group-append" data-target="#support_due_date" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<?php echo form_error('support_due_date'); ?>
</div>
</div>
$("#support_due_date").datepicker({
onClose: function(){
$("#justify_urgency").removeAttr("readonly");
var todays_date = new Date().toISOString().split('T')[0];
}
});
Once I click on datepicker, it gives calendar popped up and if I click on a date then it gives another datepicker without any CSS, just green color dates.
Why this calendar pops up twice?
I am using AdminLTE theme so daterangepicker and calendar are the js provided from AdminLTE theme only.
Image of error
Initial Page looks like this
Once we click on calendar, it gives this weird calendar again
When I select date again, it enables textbox to the right
Cross verify your code with below points. It may be due to below issues.
Input datepicker must be in type "text".
Make sure you are using only any one datepicker plugin css and js(bootstrap-datepicker/jquery-datepicker) files.
Also make sure the js file order is in correct order.

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">

How to clear an input fields value based on a data attribute?

I have multiple input fields where the user can select a date time, the only difference between these fields is the data-department attribute.
<div class="col-sm-10">
<input type="datetime-local" class="StartTime" data-department="2" name="bdaytime">
</div>
<div class="col-sm-10">
<input type="datetime-local" class="StartTime" data-department="3" name="bdaytime">
</div>
I want to be able to clear the value in an input field based on the data-department attribute.
How can I clear the value of an input field based on the class and data-department?
So for example if I want to be able to clear just a single input field where class equals StartTime and data-department equals 2?
I tried using the below code however it didn't work.
$('input:datetime-local').find('data-department' = 2).val('');
For clearing department 2
$('input[data-department="2"]').val('');
Here you go with a jsfiddle https://jsfiddle.net/y75tgzkb/
$('button').click(function(){
$('input[data-department="2"]').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-10">
<input type="datetime-local" class="StartTime" data-department="2" name="bdaytime">
</div>
<div class="col-sm-10">
<input type="datetime-local" class="StartTime" data-department="3" name="bdaytime">
</div>
<button>
Clear
</button>
In the code I'm only clearing department 2.
Hope this will help you.
This selector should work:
$('input[type="datetime-local"][data-department="2"]').val('');
To clear single input field check this fiddle: https://jsfiddle.net/y75tgzkb/2/
To clear multiple input fields,give any commen data-department to your code like data-department="11",data-department="12".
Here1` is common then you can proceed like this
$( "input[data-department*='1']" ).val('');
working fiddle:https://jsfiddle.net/y75tgzkb/1/

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>

Angularjs/javascript ng-model

I've started to learn angularjs not that much time ago. And I'm about to write some form application. The thing is that when I'm trying to output default value from select and some datepicker (got it from twitter bootstrap) into the table, it doesn't appear when page is loaded. Also, when I change date on datepicker it still doesn't appear in the table but if I change select options it appears. So how can I fix it? I need to output datepicker value when I change it + output default values when page is loaded.
Here's Datetimepicker
<label> <b> * Date and Time of Incident: </b> </label>
<div id="datetimepicker" class="input-append date">
<input type="datetime" ng-model="date" name="date" required></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Here's random input:
<label> <b> * Reported By: </b> </label> <input type="text" name="report" ng- model="report" required / >
When I use: {{report}} - it shows what I've been entered, but if I use {{date}} it doesn't show anything, only If I write something manually, but I want disable this field for users so he can only choose dates\time.
You may want to check out this: https://github.com/angular-ui/ui-date. It's datepicker written as angular directive. You can find plenty of useful angular utils, modules and directives here: http://angular-ui.github.io/.
Ok. I think the problem is that Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply(function() { $()... }); But you need a controller for that.
Here are an example
Or you can use the "oficial" calendar for angular:
https://github.com/angular-ui/ui-calendar
Cheers!

Categories

Resources