I am using jquery.ui.datepicker in asp.net mvc3 on windows 7.I changed my system date format as
mm/dd/yyyy
to
yyyy-mm-dd
Then my project calender format also changed and default dates coming.Some times date picker calender is not showing.
Can anyone tell me how to solve this issue
Sangar82's answer is the most complete and correct (I upvoted it for that reason) but a quicker way of just setting the format without creating/downloading a localisation file is:
$(".dateinput").datepicker({dateFormat: 'dd/mm/yy'});
Try to use Datepicker Localization
The date picker is designed to allow localizations to be easily created and used. Many localizations are already available, and additional ones are welcomed.
The date picker plugin maintains a manager object, $.datepicker, that lets you register new localizations. This object maintains an array of localization settings indexed by language, with '' accessing the default (English) version: $.datepicker.regional['fr'].
A new localization should be created in a separate JavaScript file named ui.datepicker-.js. Within a document.ready event it should add a new entry into the $.datepicker.regional array, indexed by the language code.
http://docs.jquery.com/UI/Datepicker/Localization
Code:
$('selector').datepicker($.datepicker.regional['<language>']);
Example
$('.myinput').datepicker($.datepicker.regional['fr']);
When you download the Jquery UI you can find in the following folder the translation of datepicker on several languages (69 translations)
development-bundle/ui/bundle/i18n
Example of use:
<script type="text/javascript" src="js/ui/development-bundle/ui/bundle/i18n/ui.datepicker-fr.js"></script>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.datepicker.regional['fr']);
$("#StartDate").datepicker();
});
</script>
Related
I am using grails datepicker in my form to generate date field
<g:datePicker name="published"></g:datePicker>
It generates the field in multi fields format as shown below.
I need the format as shown below. I was wondering whether there is a way to customize the datepicker so that the following multi fields format can be achieved. I couldn't find customization in the docs of datepicker.
The grails version i am using is 4.0.10. I appreciate any guide. Thanks!
I asked your same question before. This is not exactly what you want. This is what I did in my project. Hope you can make the changes that fit yours.
You need to override the Field plugin template and manually process the textboxes that are being POST back to your controller.
The document is in this page.
https://grails3-plugins.github.io/fields/snapshot/guide/customizingFieldRendering.html
You need to create a folder structure in the Views folder that matches your variable (either by name or by type).
In my case, I want to override the HTML whenever I have a Date variable shown on any of my views. So, I add these folders and this gsp file in my project path.
views/_fields/date/_wrapper.gsp
These folder structure says that whenever I have a Date field in any of my domain classes, it will use my HTML instead.
This is the HTML in my _wrapper.gsp file. I have a textbox called datepicker.
<input type="text" name="datepicker" id="datepicker" value="<g:formatDate date="${value}" format="MM/dd/yyyy"/>"></div>
I am using the datepicker from jquery-ui. So, I also add this javascript to my view.
$( function() {
$( "#datepicker" ).datepicker();
} );
After these, where ever the Field plugin that sees a Date field, it will pop up the jquery-ui datepicker when I click the textbox.
Is there a way to change or simply remove the placeholder of the Kendo UI - Angular 2 dateinput control?
Right now, when empty, it reads "day/month/year" and I need to, at least, remove the localized literals.
Thank you very much,
Dimitris
UPDATE: With the latest changes in the DateInput (as of v1.4.0) two additional properties were added:
placeholder - display text hint (related Github issue)
formatPlaceholder - control description of the format sections (Github issue)
With those available, we can easily hide or modify the displayed format description:
<kendo-datepicker [placeholder]="Enter date..." [formatPlaceholder]="short" />
Here is a plunker demo that demonstrates those new properties:
http://plnkr.co/edit/XYmwDjkpp7Mb4txlmc2L?p=preview
Indeed, the DateInput component displays the localized format value once empty. That being said, its value is controlled by the component date format. Its behavior is similar to the Chrome's <input type="date" />.
I'm afraid that the placeholder cannot be set to a custom text.
I think that it will be best to share your request in the Kendo UserVoice portal:
http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback
Does anyone know how to remove (or at least hide) the time option from the bootstrap datetimepicker?
As displayed on web page
As defined in the cshtml
The data type in the DB is a DateTime, but providing a time is not necessary for the user. So ideally we'd like to hide it, or obfuscate it, whilst still using the same control. We can use javascript if absolutely necessary, but I feel there must be an attribute I can affix to the field in the model (or similar) that I'm missing!
Try to add this script
<script type="text/javascript">
$(function() {
$('#datetimepicker').datetimepicker({
format: 'MM/dd/YYYY'
});
});
</script>
Also try to add this to your Html.EditorFor
"{0: MM/dd/yyyy}"
I'm working on Grails project and i need to display group of dates in read-only calendars in my gsp.
The dates extends along 6 months and i need to present them by monthly calendar so i need 6 calendars to put my data into.
any suggestion please ? ( preferably apart from jQuery datePicker )
My data is sent from jQuery getJSON function if it does make any difference!
and here is its code:
$.getJSON("${g.createLink(action:'getTimesAsJSON')}",{id:courseId}, function(data){
$("#selector_forCalendars").show().html(data.times) // pseudo
});
Try Bootstrap 3 Datepicker v4. I found it after jQuery datePicker (it did not works for me too). Very easy, nice docs. Tell us later what you think, or ask more about it here.
EDIT: as someone said above, FullCalendar could be a great option too.
I want to increase the size of the Calendar view because the default size is too small for my web application. I've tried to add a cssClass to the datetimepicker tag but it doesn't work, even if I change the width or height the only thing it changes is the field, not the calendar itself.
I'll put an image so you can understand better the problem that I have:
The thing is that the text from the field is correctly viewed, but when I click the calendar button, it shows that tiny view and it's extremelly difficult to pick one date.
The code for the datetimepicker is this:
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
Any guess?
Ok, It's finally solved:
First I tried to find the file named datefilepicker.ftl inside the struts2-core.jar but I didn't find anything similar.
So after a few hours trying to find which was the correct template of datetimepicker without any luck, I tried to solve my problem using JQuery because when I was searching for the answer I found out a datepicker tutorial using this library.
There's a plugin called Struts2-JQuery that provides you with ajax functionality and therefore with multiple customizations in different widgets.
It's quite easy to install, I just had to download the correct .jar which for me it was Version 3.5.1 ( jQuery 1.8.3, jQuery UI 1.9.2 ). Once I'd downloaded the file, I just had to paste it in the lib folder inside my project. After doing that, I added this line at the beginning of the .jsp file:
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
With these steps I had jquery functionality inside my .jsp file, so the only thing left to do is to add the datepicker widget:
First I chose the jquerytheme I wanted for my widget, just like this:
<head>
<sj:head jquerytheme="flick"/>
...
</head>
And then, I added my datepicker widget:
<sj:datepicker name="start_date" displayFormat="dd-MM-yy" value="today"/>
And that's it.
If you want to resize the datepicker calendar see the answer of this post:
How to resize the jQuery DatePicker control
<sx:datetimepicker name="start_date" displayFormat="dd-MMM-yyyy" value="%{'today'}" />
It is a dojo tag, so you should be changing the template file corresponding to this tag
Freemarker changes
check for something like datetimepicker.ftl in your workspace. That would be the file rendering your calendar. Any presentation related changes will be done in that file only.
debug using firebug
Another approach can be using firebug in Mozilla firefox and manually try to change the html rendered by the tag. There might lie some CSS solution to your problem