how to select all date using Materializecss datepicker? - javascript

I am using materializecss date-picker in my project. This is working fine for a specific date selection. But I am in need to show an option named 'All' and when I select 'All', I need to pass 'all' string to the back-end API to retrieve all the data.
In my previous project, I used bootstrap daterangepicker(daterangepicker) to achieve this functionality. But I tried to achieve the same using materializes picker, no luck.
Is there any plugin available to achieve this?
<div class="row">
<div class="input-field col s12">
<input id="date" type="date" class="datepicker">
<label for="date">Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
Fiddle

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.

Disable date selection by setting the current date - DatePicker

as written in the title I have implemented two DatePicker.
Via MDBootstrap: (https://mdbootstrap.com/docs/jquery/forms/date-picker/).
My intent was to not allow the user to select a date that is before the current date.
I have searched in their support, but no command corresponds to what interests me.
In addition, what I would like the second DatePicker, can not select a date that occurred before the date that is selected in the first DatePicker.
The code is here on JSFiddle.
The part of Javascript, you can call it how you want for the test.
Thank you all.
You can try with min and max property of MDBootstrap. here i am using min function to achieve your task.
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
<input placeholder="Selected date" type="text" id="date-picker-example2" class="form-control">
<label for="date-picker-example">Try me...</label>
</div>
// Data Picker Initialization
$('.datepicker').pickadate({
min : new Date(),
onClose: function(){
$('#date-picker-example2').pickadate({
min : $('.datepicker').val()
})
}
});
you can see example here
for more options you can refer this document
Try adding
minDate: new Date()
into your DatePicker initialiser function
You can add something like this make your datepicker disable dates before current date
$('.datepicker').pickadate({
min: new Date(),
});
It seems like if your second date picker reacts with the changes of the first one then there might be the name conflict.

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

Controlling the datepicker calendar margin off of the date field with JQuery

I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.
EDIT
I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.
This image shows the output
The Bootstrap DatePicker Documentation can be found here
And the code I have in looks like this:
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
Very simple.
Here is an image of the inspector and you can see the postion top value added by the JS.
Any idea on how to bring that sucka down?
Here is a CODEPEN with my problem
You are initializing datepicker over <div class="input-group date" id="datepicker" element not over input element.
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
<!-- _______________^^ Remove class `date` from here -->
<input type="text" class="form-control date">
<!-- ____________________^^ Add class `date`here -->
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
Fiddle here

getbootstrap 3.0 datetimepicker calendar and time issues

I am new to datetimepicker component. I am using datetimepicker with getbootstrap3 css and js files. I am able to see the datetimepicker on the page, but when I click to select date then select time, I can not click back on date again. please see the screen shot
My code is as shown below :
<div class='input-group date col-sm-7' id='startDate'>
<input type='text' class="form-control" id="start_Date" name="start_Date" />
<label for="end_Date" class="input-group-addon btn">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
The javascript is :
$(document).ready(function () {
$('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
}
Datetimepicker is also not working in smart devices. The issue can be seen on windows and smart devices. I see the above issue on all smart devices as well. On smart devices, once I select the date and time, the datetimepicker never closed, I need to click on some other component on the page to close the datetimepicker.
I would appreciate some one could provide a complete working sample code.
Thanks.

Categories

Resources