How to set min and max time for Materialize Time Picker - javascript

I am using materializecss for my project. I have inserted Time Picker. Here i want to set the min and max time dynamically using JS.
For Datepicker
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date(2017,9,20),
max: new Date(2017,10,10),
closeOnSelect: false
});
Is working fine.
For TimePicker
$('.timepicker').pickatime({
fromnow: 0,
twelvehour: true,
donetext: 'OK',
canceltext: 'Cancel',
minDate: new Date(2017,9,20,12,0),
maxDate: new Date(2017,10,10,18,0),
aftershow: function(){}
});
Also i tried
min: [7,30],
max: [14,0]
But didn't helped.

Well, i faced the same issue in my project, and found out that materialize doesn't have this feature yet,
So the only way possible is to edit the official Materialize CSS and JS files
<input type="text" class="timepicker" id="modified-timepicker">
Refer this pen for timepicker : Materialize Timepicker min/ max CodePen by Dev Sware
<div id="wrapper1" class="col s5 input-field">
<input type="date" id="start1" class="datepicker-start" />
<label for="start1">Start Date</label>
</div>
<div id="wrapper2" class="col s5 input-field">
<input type="date" id="end1" class="datepicker-end" />
<label for="end1">End Date</label>
</div>
Refer this pen for datepicker : Materialize Datepicker range CodePen by Dreamh
replace/ add these CSS and JS from the pen to your project, and do change the min/ max time and date range.
Hope this solves your problem. 😃

Related

can't get startDate or endDate to work in my bootstrap datetimepicker?

I have a datetimepicker in my project and have looked around and what seems like it should be a very simple solution just seems to not work. I need to make it so you are only able to select the previous 7 days. My code is
<div class='input-group date' id='startDateTimeDiv'>
<input id="startDateTimeSelection" type='text' class="form-control" name="startDateTimeSelection" style="width: 250px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- bootstrap date time pickers -->
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
startDate: '-7d'
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
});
I've tried using minDate too. I also tried endDate and maxDate and get the same issue. When i try and click the icon to change the date it just doesn't open and nothing happens. Any help appreciated thank you, also, any other ways of being able to select only the previous 7 days would be welcomed.
You're missing a comma after the '-7d', so your script is failing.
Also use minDate with moment() to limit to previous 7 days.
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate: moment().subtract(7,'d').format('YYYY-MM-DD'),
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
});

Ion range slider color and dragger not showing in Laravel

I am trying to add ion-rangeslider in my project
This is my HTML code
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
This is my Jquery code
$(function () {
$("#range").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 5000,
from: 1000,
to: 4000,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
});
This is what I am getting on the screen.
As we can see the color inside the slider is not showing as well as the dragger for setting the values.
I don't know why it is not showing. Can anyone help?
By the way, I am using Laravel.
Open Developer Tools and Inspect the element. Find the relevant elements/classes and adjust the colors using css.

Excluding Time Segment from Bootstrap Date time picker

I am trying to implement Bootstrap Datetime picker; Below is the link;
https://fiddle.jshell.net/0sowpm1v/2/
Question 1:
Currently the picker is showing Time as 00:00 even if user is not selecting the time component.
What I am trying to achieve is, If user is not selecting any time then time segment will drop.
If user selects the date as '2015-05-01' then output should be '2015-05-01' instead of '2015-05-01 00:00'.
Question 2:
If this is not possible Can we trigger any function call in 'onClose' event of the picker?
N.B : The concerned Datetime picker is not supporting the 'onClose' event and I am unaware of its equivalent method.
Below is my Code :
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
This is the JQuery binding of DateTime picker;
$('#datetimepicker1').datetimepicker({
format : "YYYY-MM-DD HH:mm"
});
You can use this code snippet
$('#datetimepicker1').datetimepicker({
format : "YYYY-MM-DD",
autoclose: true,
});
This is just an work around. If any one has better answer, You are welcome to share it.
This is the JQuery workaround that I have implemented.
$('#datetimepicker1').datetimepicker({
format: "YYYY-MM-DD HH:mm",
useStrict: true,
keepInvalid: true
});
$("#datetimepicker1").on("dp.change", function(e) {
if ($('#lblValue').text() == 1) {
$('#lblValue').text('2');
$('#txtDate').val('');
} else if ($('#lblValue').text() == 2) {
$('#lblValue').text('3');
}
});
$("#datetimepicker1").on("dp.hide", function(e) {
if ($('#lblValue').text() == 2 && $('#txtDate').val() == '') {
$('#lblValue').text('4');
} else {
$('#lblValue').text('2');
}
if ($("#txtDate").val() != "" && $("#txtDate").val().trim().substring(16, 10).trim() == "00:00") {
$("#txtDate").val($("#txtDate").val().trim().substring(10, 0));
}
});

Bootstrap datepicker in modal not working

I've tried to google and search SO for a similar question, but haven't found anything as of yet.
I have an issue where I create and open a modal from jquery and try to access a date picker, however it doesn't activate the datepickers JS.
$("[id=add]").click(function () {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
});
(Apologies about the long line length, however I have removed as much as I can - just showing the code which relates to the problem now.)
I have these scripts referenced at the top:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
And in the same <script> </script> tag as the jquery function above, at the very top I have:
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
I have this code used in an similar way (except no jquery modal - simply on a cshtml page) that works correctly. I don't know why this way won't work. I've used developer tools to try to trace an issue, but there are no errors - the scripts load correctly however when clicking the Date Required it doesn't fire to the jquery for datepicker.
Am I using the Jquery html wrong to create the modal?
Cheers
The datepicker is hiding behind the modal.
Set datepicker's z-index above the modal's which is 1050.
Additionally wrap your datepicker code in bootstrap's modal shown event.
$('#myModal').on('shown.bs.modal', function() {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
container: '#myModal modal-body'
});
});
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
$("#myModal").modal("show");
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
<div class="well">
<button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4></h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Note: I added bootstrap v3.3.6 CSS and removed the local reference to the tablesorter script for the demo.
well you have to call the datepicker after modal loaded:
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
$('#myModal').on('shown.bs.modal', function(e) {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
});
});
$('#myModal').on('shown.bs.modal', function (e) {
$('.date').datepicker();
});
It works for me!
$('#modal_form_horizontal').on('shown.bs.modal', function() {
$('.daterangepicker').css('z-index','1600');
});
In a style label, put the following and it worked. The z-index of the modal exceeds that of the datepicker. so place the z-index of the datepicker at 9999
.ui-datepicker {
z-index: 9999 !important;
}
You need to initiate the date picker on the Modal shown event
When using bootstrap (tested with bootstrap 4.3.1) And jquery (3.4.1) jquery ui (1.12.1) for the datepicker and modal. The datepicker will work fine in a modal.
Except if u are also using the class form-control (bootstrap) in your element input.
The css from bootstrap will set the input with the css position: relative. At this moment the datepicker will no longer will be visible.
A other fix to this issue wil be:
.form-control.datepicker {position:unset}
or not using the form-control class
$(document).on('click','#add',function(){
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
})
It is caused by the z-index,
By now you can set manually the z-index of the date picker in your styles.css
/*Date picker container*/ bs-datepicker-container { z-index: 3000; }
By default, modal z-index is 2050. Your datepicker z-index should be more than modal z-index.
Like:
.datepicker {
z-index: 2051 !important;
}

Jquery datepicker won't allow to change date on a disabled textbox.

I'm using a datepicker inside my directive to allow user to pick the date. I have disabled the textbox so as to force the user to only change the date using the datepicker widget. The directive is given below:
function InformationDirective(){
return {
restrict: 'A',
link: function (scope, element, attrs, ngModelCtrl) {
var date = document.getElementById('reqDate');
$(date).datepicker($.extend({
dateFormat: 'm/d/y'
}
));
$("#calTrigger-btn").click(function(){
$(date).datepicker("show");
});
}
};
}
The HTML is as below:
<div information-directive>
<input id="reqDate"
ng-model="date"
type="text"
value="{{reqDate}}"
disabled/>
<div type="button" id="calTrigger-btn">
<img id="calendar-img" src="css\images\calendar.gif"></img>
</div>
</div>
For some reason my datepicker will only allow me to pick the date once, after the that the button won't launch the widget again. the $("#calTrigger-btn").click(function() is being called every time I click the button but the widget won't be called after the first selection. The directive and everything are being added to the html, the only problem is that I can't use the datepicker after picking the date once. I am using Jquery-ui-1.8.15 and will not be able to change it to a new one. I wanted to know whether there is any way I can resolve this problem. Any help provided is appreciated. Thank you.
It looks like you're using angular js (which I know nothing about) but if you can set it up as below instead, it works as expected.
$('#reqDate').datepicker($.extend({
dateFormat: 'm/d/y'
}
));
$("#calTrigger-btn").click(function(){
$('#reqDate').datepicker("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div information-directive>
<input id="reqDate"
ng-model="date"
type="text"
value=""
disabled/>
<div type="button" id="calTrigger-btn">
<img id="calendar-img" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png" width=25 height=25></img>
</div>
</div>

Categories

Resources