How to change the displayed date format in Datepicker? - javascript

I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​,
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?

refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});

What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.

Related

Can't open date picker using .click() in protractor > "Failed: element not interactable"

When I try to trigger a date picker, an error is shown 'Failed: element not interactable'
Structure of an element is the following
<div class="datepicker-input-wrapper datepicker-input-wrapper-start">
<div class="datepicker-trigger"></div>
<input type="text" class="datepicker-input datepicker-input-start" autocomplete="off">
<span class="">Anreise</span>
</div>
My code is:
var start_date = element(by.className('datepicker-trigger'));
start_date.click();
I expect to see date picker opened
There are no other locators except classes, that's why I used by.className
Tried to maximize browser window or scroll to element, it didn't help
Maybe it would be easier if you just use the input with sendKeys like this:
element(by.css('.datepicker-input.datepicker-input-start')).sendKeys('DD-MM-YYYY');
Or whatever date format it accepts

Input date don't work on safari

Date calendar doesn't work on safari browser but work correctly on other browser.
This is my code for the input date :
<div class="col-lg-4 col-xs-6">
<label for="exampleInputEmail1">Date de :</label>
<input type="date" required class="form-control" ng-model="date_debutOP">
</div>
According to MDN,
input[type=date] is recognized but there is no UI.
Meaning, the browser doesn't have a calendar-like display for such input controls.
You could also refer to caniuse.com to check for compatibility for such features.
The input-type Date is n newer one which isn´t supported on each browser. It´s just a field-validation and in some browsers there is a datepicker.
First only Chrome and now Firefox/..., too.
You could use this instead and it´s very simple:
JavaScript Datepicker
Maybe a bit late, but better late then never ;-)
This works for me:
Add this to your functions.php:
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
Then add this to your custom css:
div#ui-datepicker-div { z-index:1000!important; }
The inputfield still looks empty, but when you click on it, it will open the datepicker.

How to set defaultDate in local time using a UTC value from a hidden field in eonasdan-datetimepicker?

I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?

Custom input mask in HTML

I want to generate an input type of text with custom mask like --day/--night and user replace - just with numbers. any suggestion? Please help me out here.
duration: --day/--night
Using two inputs is much more efficient.
But if you really want to do this, yes you can do it. You would need to check the input value every time user inputs a character and format the value to what you would like. You can also manipulate the cursor position using selectionStart and selectionEnd properties.
There are also a number of mask plugins for inputs.
http://plugins.jquery.com/tag/mask/
You can do following:
Make a placeholder "--" where the user can write the things in. Here is a short example what I mean:
duration: <input placeholder="--" maxlength="2">day/<input placeholder="--" maxlength="2">night
Telerik offer a free version of their "Kendo UI" JavaScript code. Here's an example of what you want: http://demos.telerik.com/kendo-ui/maskedtextbox/index
Here's the free code: http://www.telerik.com/download/kendo-ui-core
Here's their masked input code hosted on Github: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js
It is very hard to write this type of code but you can use this code for this type of formatting.
<div>
<label for="phone">Phone</label>
<!-- or set via JS -->
<input id="phone" type="text" />
</div>
jquery code
$(":input").inputmask();
$("#phone").inputmask({"mask": "99/99"});
see the codepen link click here

How can I pass options to AngularStrap timepicker?

I'm new to AngularJs and after some serious effort, I finally got the AngularStrap DatePicker and TimePicker to work.
Now I'd like to pass some options to the TimePicker to e.g. use 24-hour format (showMeridian = false). Whereas the DatePicker can be configured with HTML5 data attributes (e.g. data-date-format="dd.mm.yyyy" data-date-weekstart="1"), this seems not to work with the TimePicker.
How can I pass options to the TimePicker?
Configuration options for both plugins can be set with the use of data attributes.
<div class="bootstrap-timepicker"/>
<input id="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/>
</div>

Categories

Resources