How to initialize datetimepicker with current value in the inputbox - javascript

I want to initialize datetime picker with current value in the input box in the backbone view js file for which I have written following code in the afterRender function. This is not working.
afterRender: function() {
this.$el.find('.time').datetimepicker({
lazyInit : true, // Lazy init to prevent a lot of instances right away
datepicker : false,
format : 'g:i A',
formatTime: 'g:i A',
defaultTime: $(this).val(),
step: 1
});
}
And also I wanted to populate time field in my dust file with capital AM/PM using #format, but currently it is rendering with small am/pm in the field with the following code.
<input type="text" id="eventTime" name="eventTime"
class="event_form time changewidth" data-error-style="tooltip"
style="width:90px;" skip_element="true"
value="{#format style="time" value=eventDateLocal pattern="h:mm a"/}"
oninput="eventStartTime.dataset.value=eventStartTime.value +' ' + eventTime.value"/>

Related

Tui Datepicker How to use setDate

I'm using a datepicker inside a modal, but I don't know how to specify a specific date when the modal is opened.
Is there a way to display a specified date when using tui datepicker?
Below is the example code
const asDate = new tui.DatePicker('#asDate', {
language: 'ko',
type: 'date',
usageStatistics: false,
input: {
element: '#asDate-input',
format: 'yyyy-MM-dd'
}
});
asDate.setDate(new Date()); // today set
//modal open
asDate.setDate('2023-02-20');
var changedate = this.data().visit_date // 2023-02-16T15:52:00
asDate.setDate(new date('2023-02-20'));
asDate.setDate('2023-02-20');
asDate.setDate(changedate);
I've tried several ways but either get an error or make no difference.

Disable specific times on a specific date using jQuery DateTimePicker

I am trying to disable specific times for specific dates using the jQuery DateTimePicker like this:
jQuery('#datetimepicker').datetimepicker({
disabledDates: ['27/04/2022 14:00'],
format:'d/m/Y H:i'
});
However, this does not work. I can either only disable specific times for every day, or disable specific dates.
That's because the jQuery plugin DateTimePicker's "disabledDates" only accepts and disables days.
https://xdsoft.net/jqplugins/datetimepicker/
It looks like there is no such option for disabling specific times, you could work with only enabling specific times with
https://xdsoft.net/jqplugins/datetimepicker/#allowTimes
jQuery('#datetimepicker').datetimepicker({
datepicker:false,
allowTimes:[
'01:00', '02:00', '03:00',
'04:00', ... , '15:00', '60:00'
]
});
If you would like to continue with jQuery DateTimePicker you would have to write your own function for it
e.g.
jQuery('#datetimepicker').datetimepicker({
format:'d.m.Y H:i',
timepicker: true,
lang: 'en',
onGenerate:function(ct,$i){
//some function here to disable certain times
});
}
}
});
or you could use Bootstrap Datepicker which has an option to do exactly what you want
https://getdatepicker.com/4/Options/#endisabledhours
try this Reference
$(function () {
var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
$('#datetimepickerDemo').datetimepicker({
disabledDates: disabledDate
});
});
Ok I actually managed to figure this out myself. I'm using PHP, but you can essentially just use any multidimensional array and JSON encode it.
$times[]=[
'2022-04-28'=>[
'hour' => 10,
'minute' => 30
]
];
$times[]=[
'2022-04-28'=>[
'hour' => 11,
'minute' => 15
]
];
$times[]=[
'2022-04-29'=>[
'hour' => 13,
'minute' => 30
]
];
$dates=json_encode($times);
Once you have your list of dates and times you can use the onGenerate() function to loop through your dates and add a disabled class to the specific times.
jQuery('#datetimepicker').datetimepicker({
lang:'en',
format:'Y-m-d H:i',
formatDate:'Y-m-d',
step:15,
onGenerate: function(ct, $i){
var date=moment(ct).format('Y-MM-D');
var datesArray=<?echo $dates;?>;
$.each(datesArray, function(i, dates){
if(date in dates){
var times=dates[date];
$.each(times, function(index, time){
var hour=times['hour'];
var minute=times['minute'];
var $object=$('[data-hour="' + hour + '"][data-minute="' + minute + '"]');
$object.addClass('xdsoft_disabled');
});
}
});
}
});
Please note: you will need to use the exact same date format for your array and jQuery function. Also, my step is set to 15 minute increments. So this only disables that exact step.

Wickedpicker Always Show Current Time

So I have settings for my wickedpicker. This is the setting
var options = {
now: "12:35", //hh:mm 24 hour format only, defaults to current time
twentyFour: true, //Display 24 hour format, defaults to false
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
close: 'wickedpicker__close', //The close class selector to use, for custom CSS
hoverState: 'hover-state', //The hover state class to use, for custom CSS
title: 'Setting Jam', //The Wickedpicker's title,
showSeconds: false, //Whether or not to show seconds,
secondsInterval: 1, //Change interval for seconds, defaults to 1 ,
minutesInterval: 1, //Change interval for minutes, defaults to 1
beforeShow: null, //A function to be called before the Wickedpicker is shown
show: null, //A function to be called when the Wickedpicker is shown
clearable: false, //Make the picker's input clearable (has clickable "x")
};
$('.time').wickedpicker(options);
Then I create an input field to store the time data
<input id="time_field" name="time_field" class="form-control time" placeholder="Time">
When I save, the data that goes into the database has the format 'hh : mm'.
Then I display it again in the edit form as a value.
<input id="time_field" name="time_field" class="form-control time" placeholder="Time" value="{{ $post->time }}">
But, the data does not appear. Data only shows default data which is 12:35.
Every time I will edit the data, the time field always displays 12:35, even though I have set the value in the input according to the data from the database. However, when I look at the source page, data from the database appears in the value input section.
Then I tried using jquery. When I retrieve data values from input, the retrieved data remains 12.35 which is the default data from wickedpicker.
var time = $('.time').val();
console.log(time) // output 12:35
also
var time = $('.time').wickedpicker('time');
console.log(time) // output 12:35
How do I set the time in the input field on wickedpicker from the database?
def = { twentyFour: true, timeSeparator: ':'};
signInPicker = $('#SignIn').wickedpicker(def);
signOffPicker = $('#SignOff').wickedpicker(def);
$.ajax(top.$.rootUrl + '/Area/Controller/Action', function (data) {
signInPicker.wickedpicker('setTime', 0, data.SignIn);
signOffPicker.wickedpicker('setTime', 0, data.SignOff);
});

Disable autocomple on el-time-picker and display value format Element-UI

Any who had worked with the ElementUI library for Vuejs.
Im using the el-time-picker component, right now when i focus it auto set the input with the current hour, but i want it to keep it blank, i had tried seting it default value to null but it doesn't work.
Also even thought i have this:
:picker-options="{
format: 'HH:mm',
}"
The picker dropdown just show up hour and minutes but once selected, the input display hour:minutes:seconds, this also produce that if i type the hour, i gotta type it with seconds for get it to work, i don't want this behavior, just to display hh:mm and be able to type just it.
Any suggestions:? I'm trying to understand the code as right to try to overwrite the component.
Edit 1
Time picker code is simple, i just has the component with a few options:
<el-time-picker
v-model="row.from"
value-format="HH:mm"
:picker-options="{
format: 'HH:mm',
selectableRange: '00:00:00 - 23:59:00',
}"
placeholder="Desde">
</el-time-picker>
The initial (default) value for row.from must be an empty String, not null. The format option works only for the popup selector, not for the editbox. To achieve what you want you have to specify the step option like in this JSfiddle
UPDATE
The JSfiddle was updated.
Use the #focus event to change the default value:
https://jsfiddle.net/2q8ovLah/3/
<el-time-picker placeholder = "HH:mm:ss"
value-format = "HH:mm:ss"
v-model = "time"
:editable = "false"
:picker-options = "{selectableRange: '00:00:01 - 23:59:59'}"
clearable
#focus = "focused">
</el-time-picker>
data() {
return {
time: ''
};
},
methods: {
focused(){
if(this.time === '') {
this.time = '00:01:00'
}
}
}

Apply new array of disabled dates on the monthChange event of the bootstrap datepicker

I'm using this date picker.
I have this code:
<input type="text" autocomplete="off"
class="aDatePicker"
id="new-date" name="date">
<script>
var disabled_dates = ['08/12/2016','08/13/2016','08/14/2016'];
$(function () {
applyDatePickerToElement();
function applyDatePickerToElement() {
$('.aDatePicker').datepicker({
datesDisabled: disabled_dates,
language: currentLocale,
format: dateFormatByLocale,
startDate: 'now'
});
}
$('#new-date').on('changeMonth', function (ev) {
disabled_dates=['09/01/2016','09/02/2016','09/03/2016','09/04/2016','09/05/2016'];
applyDatePickerToElement();
});
});
</script>
This code, at load applies the date picker to the element, and gives it disabledDates of 8/12, 8/13 and 8/14. Then when you change the month, it should apply new disabled dates to the element.
I'd like the disabled dates option of the datepicker to update when I fire the changeMonth event. So when the changeMonth event is fired I can do an AJAX call to get a list of disabled dates for that month.
Building and applying a list of disabled dates going past a few months is not an option, needs to be a month by month basis.

Categories