I have a page where I keep track of various dates. So I end up using datepicker through jquery anywhere from 10-200 times. I want to set the default for all cases of datepicker to the 'yy-mm-dd' - but I can't seem to figure out how to set that?
I end up using datepicker through jquery anywhere from 10-200 times.
I'm assuming you're calling datepicker() separately for each input, probably by id. There's no need for that.
Use a class as a hook on your input:
<input class="my-datepicker">
Then call datepicker on elements with that class with your default configuration:
$('.my-datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
When you need a different configuration, use/assign a different class name.
You can also use setDefaults (probably what you're looking for):
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
Go to the file jquery.ui.datepicker.js.
function Datepicker()
{
dateFormat: 'mm/dd/yy'
}
Change it to the format you prefer. It will change the format for your whole website.
Related
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 would like to know if it is possible to change the default date of an already rendered inline datepicker? I have set up a fiddle to play around with: http://jsfiddle.net/xf0qc41k/
I currently destroy the datepicker and re-render it with a new default date if I want the default date to change. This works fine but I wondered if it is possible to change the current inline datepicker's default date on the fly.
HTML:
<div class="inline_datepicker"></div>
JS:
$('.inline_datepicker').datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: "2014-10-21",
});
Just call setDate:
$('.inline_datepicker').datepicker('setDate', "2014-12-25");
$('#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" });
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.
I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});