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/
Related
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 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'}
});
I have 3 date pickers on my page and the selected dates are stored in the database. If the values are empty I want the field to be empty, but it shows today's date. I have used the below code,
jQuery('.date-picker').datepicker({
startDate: new Date(),
autoclose: true,
todayHighlight: true,
setDate: ''
});
How do I keep the datepicker field empty on load?
Try this code
<input type="text" id="example1"/>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker();
$('#example1').val("");
});
</script>
Hope this will help you.
onRender : This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected.
http://www.eyecon.ro/bootstrap-datepicker/
see "Disabling dates in the past and dependent disabling." section Example
this May Help
$(document).ready(function () {
$('#text_fied_id').datepicker();
$('#text_fied_id').val("");
});
Try leaving out the startDate in the datepicker options
i am using jqueryDate picker.i want to customize this Datepicker.In this Datepicker Month and year is showing.Like August2014.Here if i click next it will go to next month like previous.
But I want to customize,mean i want to show months in dropdown and Year also i have to show in Dropdown,amd Next and previous function should be work.Can You Please suggest Me.
What plugin are you trying to use. If it is this plugin found in this site. then all you need to do is set the change month and changeyear to true.
$(function() {
$("YOURSELECTOR" ).datepicker({
changeMonth: true,
changeYear: true
});
});
the documentation for the api can be found here.
$('#date_arrow_from, #date_from').click(function() {
$('#date_from').attachDatepicker({
rangeSelect: false,
yearRange: "2011:2012",
firstDay: 1
});
$('#date_from').showDatepicker();
});
http://jqueryui.com/demos/datepicker/ - I am using something like this, but the problem is that when I click on the input I can't write anything, the keypress event is blocked, how can I unlock the input to be enabled?
Looks like you need to set constrainInput option to false
http://jqueryui.com/demos/datepicker/#option-constrainInput
When true entry in the input field is constrained to those characters
allowed by the current dateFormat.
Code examples initialize a datepicker with the constrainInput option specified.
$(".selector" ).datepicker({ constrainInput: false });
Edit
While the above was marked as accepted I agree with #Edd Morgan that you should try and take advantage of the built in input validation (I always do when I'm using it). To specifically allow dates in the ISO 8601 format you can change the datepickers dateFormat string very easily and the demo below has a good list of examples.
http://jqueryui.com/demos/datepicker/#date-formats
$(".selector" ).datepicker({ dateFormat: "yy-mm-dd" });