how to get variable value from div - javascript

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

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>

Time not getting selected with the single click in datepicker

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>

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>

datetimepicker. widget doesn't show

I am trying to repeat example from datepicker documenation on jsfiddle
tutorial
I have wrote the following html code:
<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" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
and following js:
$(function () {
$('#datetimepicker1').datetimepicker();
});
but when I start it I see simple input:
demo
What did I forget ?
P.S.
I wrote following html but it doesn't work
<html>
<head>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"
rel="stylesheet">
<script src='//code.jquery.com/jquery-2.1.4.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>
<script src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script type="text/javascript">
//Настройка выборок для времени
$(document).ready(function () {
$('#startDateDiv').datetimepicker({
format: 'LT'
});
});
</script>
</head>
<body>
<div class="row-fluid main-content chose" style="padding: 20px 0 67px 0;">
<form:form commandName="campaignBeanDto" id="addParams" method="POST">
<div class="param-line">
<div id="startDateDiv" class="input-append date add-params-date-div">
<fmt:formatDate pattern='dd/MM/yyyy' type='date' value='${campaign.beginDate}' var="beginDate"/>
<form:input path="beginDate" id="startDate" name="beginDate"
data-format="dd/MM/yyyy" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
</form:form>
</div>
</body>
</html>
I don't see any errors in console but I see simple input

You forgot to add moment.js. if you read the documentation clearly it has mention moment.js
Dev Guide
Working fiddle

You forgot to include bootstrap.css and moment.js files,
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js
here is the working fiddle.

Categories

Resources