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>
Related
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>
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>
I am trying to get timepicker to work similarly to datepicker:
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
var date = new Date();
date.setDate(date.getDate()+1);
$('div.input-group.date').datepicker({
startDate: date
});
</script>
<div class="form-group">
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
Datepicker works, but Timepicker dos not show up when clicked. Did I do something wrong in the javascript part?
In head
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="css/bootstrap-timepicker.min.css" rel="stylesheet">
In body
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
var date = new Date();
date.setDate(date.getDate()+1);
// $('div.input-group.date').datepicker({
$('#caldate').datepicker({
startDate: date
});
</script>
<div class="form-group">
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker({
defaultTime: 'current',
minuteStep: 1
});
</script>
I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual
I am using bootstrap ver. 3 along with bootstrapValidator ver. 0.5.2 and Datetimepicker ver. 3. My problem is when I validate 3 dates next to each other the error message is above the first date, instead of where it should be. I know it has something to do with the fact that I'm using all 3 controls in the same form-group, but I don't know how to fix it. I have included a screen shot and code below. In the screen-shot I've included you can see that the popup is on top of 'Incident Date' and the cursor is in the 'Resolution Due Date'.
Thanks in advance!
HTML
<div class="form-group">
<div class="row">
<div class="col-md-8">
<label class="control-label">Title</label>
<input type="text" class="form-control input-lg" placeholder="*Required" name="txtTitle" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#form1').bootstrapValidator({
container:'popover',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtTitle: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The Title is required and cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of alphabetical and number'
}
}
},
dtpNIncidentDate: {
validators: {
notEmpty: {
message: 'Incident Date is required and cannot be empty'
}
}
},
dtpNDateAssigned: {
validators: {
notEmpty: {
message: 'Date Assigned is required and cannot be empty'
}
}
},
dtpNResolutionDate: {
validators: {
notEmpty: {
message: 'Resolution Date is required and cannot be empty'
}
}
}
}
});
$('#dtpIncidentDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNIncidentDate');
});
$('#dtpDateAssigned')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNDateAssigned');
});
$('#dtpResolutionDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNResolutionDate');
});
});
I figured out the problem. I moved the row above the form-group and everything is working like it should. Each 'X' is controlled by the form-group. Below is the new code just in case someone else has the same issue I am.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>