I'm trying to capture the date selected on my bootstrap 3 datepicker, but I can't seem to understand the documentation, so I tried this:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data"></div>
</div>
with my jquery being:
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
How do I get the date I selected on the datepicker?
Your html was incorrect. Here is the corrected html. I believe your intention was to use inline datetimepicker such as in this example. If you see the example quoted in the page:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<!-- Start of datetimepicker html-->
<div id="datetimepicker12"></div>
<!-- End of datetimepicker html-->
</div>
</div>
</div></code>
So your corrected HTML should be as belows:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data">
</div>
javascript
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
Related
I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I am setting up a website that adds event start and end dates/times to a database. I would like to dynamically set minDate (for the end date/time) based on the input from the previous event start.
I am using https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html for my date/time picker and bootstrap 4.
<div class="form-group row">
<label for="eventStart" class="col-3 col-form-label">Event start date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker1">
<input id="eventStart" name="eventStart" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15
});
});
</script>
</div>
<div class="form-group row">
<label for="eventEnd" class="col-3 col-form-label">Event end date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker2">
<input id="eventEnd" name="eventEnd" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15,
minDate: '2019/1/23 20:00'
});
});
</script>
</div>
I can set minDate manually (as above) but not sure how to take the value from the previous text input (datepicker1) with perhaps 'onblur'?
you can call the datetime api methods like this
$('#datetimepicker').data("DateTimePicker").minDate('2019/1/23')
and call the api dynamic
$('#datetimepicker1').on('change',function(){
var newdate=$(this).val();
if(newdate){
$('#datetimepicker2').data("DateTimePicker").minDate(newdate)
}
});
have a try
The answer to your question is clearly stated on the documentation https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html
Basically, you can dynamically set minDate for the second datetimepicker by setting an event listener on the first datetimepicker that fires an event whenever user select the first datetime.
$('#datetimepicker1').datetimepicker(... your options ...).on( "dp.change", function(e) {
// Fired when the date is changed.
// Get the datetime value
console.log(e.target.value);
})
Then you can reset the minDate of second datetimepicker using this API function:
// Takes a minDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is before that moment. If a boolean:false value is passed the options.minDate parameter is cleared and there is no restriction to the miminum moment the user can select.
$('#datetimepicker2').data("DateTimePicker").minDate(minDate)
I have a datepicker input field in my form that should be required. I made the input field required like this:
<div class="col-md-8 animate-box">
<div class="bootstrap-iso">
<div class="form-group"> <!-- Date input -->
<input class="form-control" id="date" name="date"
placeholder="Afhalen. Donderdag 17-19u. Zaterdag 09-16u. Minstens 1 week op voorhand reserveren."
type="text" readonly='true' required data-readonly/>
</div>
</div>
</div>
unfortunately, it isn't required!?
This is the code where I build the datepicker, but I think that's not the problem:
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
autoclose: true,
startDate: '+1w',
daysOfWeekHighlighted: "4,6",
daysOfWeekDisabled: "0,1,2,3,5",
orientation: "auto",
})
})
</script>
I use:
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.min.js"></script>
You can't make an input readonly AND required.
Make the datepicker popup when they click the field too and nobody will type in there.
If they do you can make a keyup function to erase the input.
$("#your element id").prop('required',true);
OR
$("#your element id").attr("required", true);
Here it is html I have been using for getting Bootstrap datetimepicker to disable weekend days:
$('.datetimepicker4').datetimepicker({
format: 'dd-MM-yyyy hh:mm',
pickSeconds: false
});
$('.datetimepicker4').datetimepicker('setDate', (new Date()));
$('.datetimepicker4').datetimepicker({
daysOfWeekDisabled: [0, 6]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<div class="input-append datetimepicker4">
<input data-format="yyyy-MM-dd" type="text">
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
</div>
daysOfWeekDisabled does not exist in that version of bootstrap-datetimepicker
I suggest using the original DateTimePicker on which Tarruda is based, the one made by Stefan Petre
Here is an example : Simple Bootstrap DateTimePicker
I have a code of calender in java script. Its in working, want it to automaticaly select current date .its Possible.
Javascript code:
<script>
$(function() {
$( "#interview_on" ).datepicker();
});
</script>
Custom Form:
<form method="POST" action="/interviewvalue/" class="form-horizontal" id="userform" name="uform" enctype="multipart/form-data">{% csrf_token %}
<div class="control-group formSep">
<label for="u_fname" class="control-label">Interview On</label>
<div class="controls">
<input type="text" class="input-xlarge" name="interviewon" id="interview_on" readonly="true" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>
<input type="reset" name="reset" value="Cancel" class="btn btn-gebo" />
</div>
</div>
If you want the actual field to be filled with the current date just use the setDate after creating the datepicker. Like this
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker();
$("#interview_on").datepicker('setDate', new Date());
});
</script>
In case you want to restrict the selectable dates to only today, Tobo's suggestion is correct, just do
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker({minDate: 0, maxDate: 0});
$("#interview_on").datepicker('setDate', new Date());
});
</script>
You can restrict the selectable range of the Datepicker like this
$( "#datepicker" ).datepicker({
minDate: -10D, maxDate: "+10D"
});
which shows 10 days of the past and 10 days of the future.
You find a detailed description here http://jqueryui.com/datepicker/#min-max