I have a problem of the eventClick function which I set the input type is date, it's working well and can show output in specified textbox. However I set the input type is datetime-local , it can't show datetime in specified texbox.
This is my javascript:
eventClick: function(arg) {
$('#modal_show_from > #mesyuarat_from_date').val(arg.event.extendedProps.mesyuarat_from_date);
$('#calendarModal').modal();
},
editable: true,
dayMaxEvents: true,
events: <?php echo json_encode($myArray); ?>
});
This is show html code (for show datetime):
<div class="col-lg-10 padding_important" id="modal_show_from">
<input type="datetime-local" class="form-control" id="mesyuarat_from_date" name="mesyuarat_from_date" value="" title="Tarikh Masa Mesyuarat - From">
</div>
Related
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>
I have a datatable where I have the option to edit the date of every record in that table, so I need to use "document on focus" event to get all my datepickers to work. The problem here is that my datepicker only works when I click on the input, if I click in the "icon" it doesn´t work.
This is my datepicker in the form:
<div class="form-group">
<label for="fecha" class="col-form-label">Fecha</label>
<div class="input-group date" id="datepickerEditT" data-target-input="nearest">
<input type="text" id="datepickerEditT" name="fechaTratamiento" value="{{date('d/m/Y',strtotime($fecha))}}" class="form-control datepicker-input" data-target="#datepickerEditT" required/>
<div class="input-group-append" data-target="#datepickerEditT" data-toggle="datepickerEditT">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
</div>
</div>
and this is the javascript:
$(document).on("focus", "#datepickerEditT", function () {
$(this).datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
});
if I dont use on focus event my datepicker works fine, doesn´t matter if I click on the input or the icon, but I need to use this event because if I dont, my datepicker will only works on the first record in the table.
I used class div instead of the id like someone said and now everything its working without using the focus event.
$(".datepickerEditT").datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>
You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});
I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.
I have the HTML as follows
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp3">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateArrival" id="dateArrival">
</div>
<div class="booking-date-fields-container col-xs-12 col-sm-6" id="dp4">
<input type="hidden" data-date-format="MM/DD/YYYY" name="dateDeparture" id="dateDeparture">
</div>
and following is the JS file content for the above
jQuery("#booking-tab-contents .input-daterange").datepicker({
format: "yyyy-mm-dd",
autoclose: true,
startDate: new Date(),
show: true,
inputs: jQuery('.booking-date-fields-container')
});
$('#dp3').datepicker().on('click', function (ev) {
$('#dateArrival').val( $('#dp3').datepicker('getFormattedDate'));
});
$('#dp4').datepicker().on('click', function (ev) {
$('#dateDeparture').val( $('#dp4').datepicker('getFormattedDate'));
});
I want to make my date-picker in such a way that, when I select arrival date or check in date, the checkout date must be a day after the check-in date
I have a form, which first loads text fields and has a Time Picker associated with it.
The user can also click a 'More' button, which dynamically loads extra text fields underneath. This also has a time picker associated with it, however it will not load on the dynamic fields.
I am using a jQuery timepicker addon by Trent Richardson http://trentrichardson.com/examples/timepicker
I also found a previous answer (https://stackoverflow.com/questions/18666634/jquery-timepicker-doesnt-work-on-dynamic-input), however this does not fix my problem.
This is the form; the first div is loaded dynamically:
<div class="row">
Add More+
<div class="sample" style="display: none;">
<label> </label>
<input type="text" class="outlet-hour from timepicker2" name="from[{$day}][]" />
<span>to</span>
<input type="text" class="outlet-hour to timepicker2" name="to[{$day}][]" />
</div>
<div>
<label for="from_{$outlet}_{$day}">{$name}</label>
<input id="from_{$outlet}_{$day}" class="outlet-hour from timepicker" type="text" name="from[{$day}][]" />
<span>to</span>
<input id="to_{$outlet}_{$day}" type="text" class="outlet-hour to timepicker" name="to[{$day}][]" />
</div>
This is the JS for the main fields (which is working fine):
$('.timepicker').timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
This is the JS that adds the extra fields:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
return false;
});
Currently I have renamed the class to timePicker2 and am removing the hasDatepicker class, as mentioned in a previous answer.
Any ideas appreciated.
Thanks
You need to apply the timepicker function after you have added to the DOM:
$(document).on('click', 'a.add-hours-link', function(event, hour){
var from = !!hour ? hour.from : '';
var to = !!hour ? hour.to : '';
$(this).parent().find('.sample')
.clone()
.removeClass('sample')
.appendTo($(this).parent())
.find('.from').val(from).end()
.find('.to').val(to).end()
.fadeIn('fast');
$('.timepicker2').removeClass('hasDatepicker');
$('.timepicker2').each(function(){
$(this).timepicker({
showSecond: false,
timeFormat: "H:mm",
stepMinute: 15
});
});
return false;
});