Time not getting selected with the single click in datepicker

Time not getting selected with the single click in datepicker - javascript

I have two input boxes one is for selecting date and another for time, I am trying to validate these two boxes based on some conditions, such that if the date is not selected, the time should not get selected and i'm using eonasdan datetimepicker, i'm getting the desired output but not with the single click on a timepicker can some one help me out with this Thank you
Here's what i have done so far :
function starttime(){
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
}
$('.start_time_addon').on('click keyup',function(){
var x = $('#start').val();
if (x == '') {
alert('please select startdate first');
return false;
}
else{
starttime();
}
});
var datePickerSix= $('.datetimepicker6');
$(datePickerSix).datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

$('.datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
$('.datetimepicker6').on("dp.change", function(e) {
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control input_date" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

Related

End Time should not be lower than Start Time and the End time should not go higher then 23:59

I have two time pickers one is for start Time and another for End Time, The End Time must always be greater than start time. I am using datetimepicker. If start date is greater than end date it should not allow or we need to get pop. I fixed this, but i can't manage to fix that the endtime should not go higher than 23:59 Please help me out with this.
Here's what i have done so far.
function TimePickerCtrl($) {
var startTime = $('#starttime').datetimepicker({
format: 'HH:mm'
});
var endTime = $('#endtime').datetimepicker({
format: 'HH:mm',
minDate: startTime.data("DateTimePicker").date()
});
function setMinDate() {
return endTime
.data("DateTimePicker").minDate(
startTime.data("DateTimePicker").date()
)
;
}
var bound = false;
function bindMinEndTimeToStartTime() {
return bound || startTime.on('dp.change', setMinDate);
}
endTime.on('dp.change', () => {
bindMinEndTimeToStartTime();
bound = true;
setMinDate();
});
}
$(document).ready(TimePickerCtrl);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container" style="padding-top: 50px">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date' id='starttime'>
<input type='text' class="form-control" id="Start_Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="end_time" class="col-form-label">End Time</label>
<div class='input-group date' id='endtime'>
<input type='text' class="form-control" id="Start_Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>

Maybe you can just manually set the maxDate like this:
const maxDate = new Date();
maxDate.setHours(23);
maxDate.setMinutes(59);
function TimePickerCtrl($) {
var startTime = $('#starttime').datetimepicker({
format: 'HH:mm'
});
var endTime = $('#endtime').datetimepicker({
format: 'HH:mm',
minDate: startTime.data("DateTimePicker").date(),
maxDate
});
function setMinDate() {
return endTime
.data("DateTimePicker").minDate(
startTime.data("DateTimePicker").date()
)
;
}
var bound = false;
function bindMinEndTimeToStartTime() {
return bound || startTime.on('dp.change', setMinDate);
}
endTime.on('dp.change', () => {
bindMinEndTimeToStartTime();
bound = true;
setMinDate();
});
}
$(document).ready(TimePickerCtrl);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container" style="padding-top: 50px">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date' id='starttime'>
<input type='text' class="form-control" id="Start_Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="end_time" class="col-form-label">End Time</label>
<div class='input-group date' id='endtime'>
<input type='text' class="form-control" id="Start_Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>

how to get variable value from div

I have the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:
Working variable:
Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>
Not working variable inside div:
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" id='sdatefield'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
</script>
</div>
</div>

observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.
Try like the below
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"> </script>
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" >
<input type='text' class="form-control" id="sdatefield"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
Thanks

Bootstrap Datetimepicker range on init issue

Sometimes I've forms with precompiled dates (in these example: 06/02/2019).
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" value="06/02/2019"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I get an issue with bootstrap datetimepicker: when value already exist on page loading, the "blocking" function doesn't work:
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date); //<-- it works only when I change date.
});
After first load page, when I'll try to chose a date on datetimepicker2, I'd like to have blocked already dates before 06/02/2019, but all date are available!
It work only if I do changes in input fields.
See my fiddle: https://jsfiddle.net/omerts/8jpmkcr5/1/

As per Bootstrap Datetime Picker, you need to use minDate and maxDate while initializing Datetime picker.
$(function () {
var datetime1 = $('#datetime1').val() != "" ? new Date($('#datetime1').val()) : false;
var datetime2 = $('#datetime2').val() != "" ? new Date($('#datetime2').val()) : false;
$('#datetimepicker1').datetimepicker({
maxDate: datetime2
});
$('#datetimepicker2').datetimepicker({
useCurrent: false, //Important! See issue #1075
minDate: datetime1
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="datetime1" value="02/05/2019" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id="datetime2" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

Can't change the format of Bootstrap DateTimePicker

I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});

$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});

The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>

In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.

Alloy-ui multiple datepicker send selection to other input

I have AlloyUi datepicker that is triggered by div id="trigger", but I want to display the dates selected in the hidden input id="dates".
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker(
{
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
on: {
dateClick: function(event) {
output.set('value', Y.Date.format(event.date,{format:multidatepicker.get('mask')}));
}
}
},
popover: {
zIndex: 10
},
panes: 2
})
});
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
I found a solution here, but it only passes a single date to the input. I need to pass a date range selected by the user.
Any ideas?

You can copy the #startdate value attribute into the #dates value attribute after the date is clicked:
after: {
dateClick: function(event) {
output.set('value',
Y.one(multidatepicker.get('trigger')).get('value'));
}
}
Here's a runnable example with your code:
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker({
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
after: {
dateClick: function(event) {
output.set('value', Y.one(multidatepicker.get('trigger')).get('value'));
}
}
},
popover: {
zIndex: 1000
},
panes: 2
})
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Time not getting selected with the single click in datepicker - javascript

Related

End Time should not be lower than Start Time and the End time should not go higher then 23:59

how to get variable value from div

Bootstrap Datetimepicker range on init issue

Can't change the format of Bootstrap DateTimePicker

Alloy-ui multiple datepicker send selection to other input

Categories

Resources