I couldn't change the Datatimepicker position one I try to put correct value the calendar go down so when I try to scroll the calendar gone see picture is there any way to display it at the top of input?
Code:
$('#datetimepicker,#datetimepicker2').datetimepicker({
format: 'yyyy-MM-dd hh:mm:ss'
});
I think it should have an option so that you can set the position of the popup around the trigger or input. What is your datetimepicker? Is there any documentation of this?
There's an option 'widgetPositioning'. I Think this is the property you're looking for :
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
$('#datetimepicker,#datetimepicker2').datetimepicker({
format: 'yyyy-MM-dd hh:mm:ss',
widgetPositioning: {horizontal: 'auto', vertical: 'top'}
});
Related
I have a element I'm using as a datepicker:
I set it up using the following script:
$('#fltProdFromQuo').datepicker({
format: "dd M yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
And set the value to 1st June 2020:
$('#fltProdFromQuo').val('2020-06-01') ;
WHich seems to work until I click the field, and the calander shows todays date:
Does anyone have any idea what I've missed to make the calendar show the correct date?
Thank you in advance of any help given.
Found the answer. I didn't know that once I set the date I had to "Update" it to change the calender, never had to do this before:
$('#fltProdFromQuo').val('2020-06-01') ;
$('#fltProdFromQuo').datepicker('update');
Working tickety boo now!
I have tried to implement angular2-datetimepicker control in my application. But it is showing todays date as default. But I need to have this with no default date selected.
This is the code piece
In HTML page
<angular2-date-pickerformControlName="dateTimeElement" [settings]="{
bigBanner: true, format: 'dd-MMM-yyyy hh:mm a',defaultOpen: false,
timePicker: true,
closeOnSelect: true}"></angular2-date-picker>
Can someone tell how to avoid the default binding of this control?
As far as the documentation goes you can set NgModel to a date you want, which you can try setting null in the component.
See: https://github.com/CuppaLabs/angular2-datetimepicker/issues/5
I suppose you can set NgModel as said in the readme:
See: https://github.com/CuppaLabs/angular2-datetimepicker/blob/master/README.md
I would like my fullcalendar to change to the 'listMonth' View.
I would also like that the view will display and scroll to a specific date (or to the current date). For this question let's assume '2015-04-25'
Anybody know how to do that?
Here is my code:
$('#calendar').fullCalendar('changeView', 'listMonth');
You need
$('#calendar').fullCalendar({
defaultDate: '2015-04-25',
defaultView: 'listMonth'
})
I have this DateTimePicker:
I need edit only the time , so I need only show this :
code:
setDateTime: function(index){
$('#date_time_'+index+'_id').datetimepicker({
showClose:true,
format: 'DD/MM/YYYY HH:mm',
ignoreReadonly: true
});
},
So the input showing the date and time is fine, but I need edit only the time
Im using this :
bootstrap-datetimepicker
but I don't know what option use.
Sorry my english.
unfortunately I think that without updating of bootstrap datetimepicker lib you would have to use alternative. As this library is not prepared for just time picker.
Please use something like this instead. Same format, but more options for you:
http://tarruda.github.io/bootstrap-datetimepicker/
Then you can set what you want just with this
$('#date_time_'+index+'_id').datetimepicker({
pickDate: false
});
Just specify only time in the format like this:
https://jsfiddle.net/9jkxL4su/
$('#datetimepicker1').datetimepicker({
format: 'LT'
});
EDIT:
To show calendar (toggle) icon, you'll need to fire a toggle-click when the picker is shown:
https://jsfiddle.net/pv8Lhy9t/
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
showClose: true
});
$('#datetimepicker1').on("dp.show", function(){
var toggle = $(this).find('a[data-action="togglePicker"]');
if(toggle.length > 0) toggle.click();
// To hide the toggle back to calendar button, uncomment line below
// $(this).find('a[data-action="togglePicker"]').hide();
});
NOTE:
You can remove the ability for the user to toggle back to edit the date. Just uncomment the last line as shown in the code above.
READONLY: To restrict ability to edit date manually, just give the input field a readonly attribute and also set the ignoreReadonly property to true in the picker: https://jsfiddle.net/xgm99t5o/
What is the name of the component ?
Perhaps you can use something like:
pickDate: false;
or only
format: 'HH:mm',
In this component it looks like: https://tarruda.github.io/bootstrap-datetimepicker/
I want to use simple JQuery datapicker but not only to select the date. I want to add hours to the date format but I also want to preserver the classic vie of the calendar. I just want to add hours as extra functionality to define precisely the time. Is this possible?
<script type="text/javascript">
//For calendar
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yyyy-mm-dd HH:MM:ss',
});
</script>
http://trentrichardson.com/examples/timepicker/
you can try the above plugin with the combination of datepicker
you can even use the default $('.datepicker').datetimepicker();
jQuery UI's datepicker picks dates, not times. You can add a distinct field for the hours, e.g. a select field.