How do I use a jQuery Datetimepicker with a user textbox input?
$(document).on('click', '#txtUserDateTime', function (evt) {
$('#txtUserDateTime').datetimepicker({
format: 'm/d/Y H:i',
step: 5,
minDate: 0
});
});
In the above image I can set Date and Time and the textbox is readonly. Sometimes I wanted to change only the time as some text like for example: "w/c" etc. but the datetimepicker textbox is not allowing me to hold the value after click outside of the event.
The Datetimepicker("#txtUserDateTime") textbox doesn't allow the user input. Can we achieve this?
And below is my cshtml code:
<div class="col-sm-3">
<div class="input-group date">
<span class="csts-date-time-picker" style="width: 100%;">
<input asp-for="NeedDate" type="text" id="txtCraneDateTime" class="form-control" tabindex="0">
</span>
<span asp-validation-for="NeedDate" class="text-danger"></span>
</div>
</div>
Related
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'm trying to bind a date field to a form, using dateTimePicker with no success.
In my .jsp I have a binding with timeoutDate which is a Date, so when trying to update the form i use (cleaned from some css stuff...)
<spring:bind path="timeoutDate">
<div class="form-group>
<div class="input-group col-sm-4" id='datetimepicker'>
<form:input path="timeoutDate" id="timeoutDate" type="text"/>
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker(
{
defaultDate: "${timeoutDate}"
});
});
</script>
</div>
</div >
</spring: bind >
${timeoutdate} does not work as defaultDate
if I don't put a default date in the function, no binding is made, the filed is empty...
I have the date picker working when I set the id for the input tag like the following:
<div class="col-sm-4" id="datepicker">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<script type="text/javascript">
$(function () {
$('#inputDate').datetimepicker();
});
</script>
I just wonder why its not working if I used the div instead of the input tag ( the datepicker id), as I saw some examples online using the div instead of the input.
It wont work if you don't set class input-group on <div>
Check it here https://jsfiddle.net/a9729dc9/
.datetimepicker(); init the input that will use the datepicker feature, that why we should call it on the concerned input field.
If you want to reference to the input through the div you could use it as :
$('#datepicker input').datetimepicker();
//Or also
$('#datepicker #inputDate').datetimepicker();
In bootstrap you have to add class .input-group to the parent (container) div so bootstrap could detect input-group-addon and init the picker, e.g :
<div class="input-group" id="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Hope this helps.
When we select calendar icon, it automatically sets today's date to textbox.
Is there any parameter/option in the datetimepicker() function which can be set to false or null preventing datetimepicker() setting today date to textbox by default.
If someone doesn't select any date from calendar the textbox should be empty rather than having today's date set by datetimepicker().
Worth reading the docs. Change the useCurrent attribute when initailizing the datetimepicker.
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent
If you are using the .datetimepicker() for Bootstrap 4 + jQuery
When you click the element it could happen this undesired effect of date updated.
This is a hack to avoid override of current value with current date on click and allow normal selection of picker.
For the Tempus Dominus version:
https://tempusdominus.github.io/bootstrap-4/
JS
var dateNow = new Date();
$('.datetimepicker').each(function() {
var _el = this;
$(this).datetimepicker({
autoclose: true,
allowInputToogle: true,
format: 'YYYY-MM-DD HH:mm',
defaultDate: dateNow,
});
// 'this.parent()' is the container and data-target | '_el' is the input
$(this).parent().on('change.datetimepicker', function(e) {
// HACK
if (!e.oldDate) return;
$(_el).val(e.date.format('YYYY-MM-DD HH:mm'));
});
});
HTML
<div class="form-group">
<label class="control-label"><i class="icon-right-open-outline"></i> Date</label>
<div class="input-group" id="form_datetimepicker_1">
<input name="date_selected"
id="date_selected"
class="form-control datetimepicker"
type="text"
data-toggle="datetimepicker"
value="2019-11-22 22:55:00"
data-target="#form_datetimepicker_1">
<div class="input-group-append" data-target="#form_datetimepicker_1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
I have a form where a user can add dynamic bootstrap timepicker fields.
I'm using Bootstrap timepicker (https://github.com/eternicode/bootstrap-datepicker) for timepicker input fields that will be dynamically generated
The problem is, when clicking on any datepicker element (except the first one), all the changes happen to the first one only.
Here is the JSFIDDLE
The HTML part of my code is:
<div class="row multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="text" name="ticket-price" maxlength="5" class="form-control" placeholder="FREE" >
<span class="input-group-btn">
<button class="btn btn-default add-field" type="button">+</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default remove-field" type="button">-</button>
</span>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6 col-sm-3">
<label>Start Date</label>
<input type="text" name="tstart-date" class="form-control tstart-date-picker" placeholder="">
</div>
</div>
</div>
</div>
</div>
The problem is that you clone DOM elements with event handlers attached by jQuery. It causes troubles when you try to select date in new input, because events bound by datepicker somehow mixed up with original on from the first input.
The fix is pretty simple: clone without true argument, and also use delegated click event for adding new rows. The rest doesn't change:
$(this).on('click', '.add-field', function (e) {
$('.multi-field:first-child', $wrapper).clone().appendTo($wrapper);
$('.multi-field:last-child').find('input[name="tstart-date"]').val('');
$('.multi-field:last .tstart-date-picker').datepicker({
autoclose: true,
format: 'dd-M-yyyy',
todayHighlight: true,
});
});
Demo: http://jsfiddle.net/z2j6u8ro/2/
The datepicker must be assigned to each element specifically. Try this:
$(".add-field", $(this)).click(function(e) {
(CODE TO ADD NEW FIELD HERE)
$(.tstart-date-picker).each(function(){
$(this).datepicker("destroy");
$(this).datepicker({
(DATEPICKER OPTIONS HERE)
});
});
}