Feature Request: Date picker

[victoras]

Will be nice to have Date picker option.

[imjoeybrennan]

Totally agreed.

[valendesigns]

Any help or thoughts towards getting this started?

[victoras]

I think something identical will be perfect.

[valendesigns]

What software is that from?

[victoras]

I created this with http://wordpress.org/plugins/meta-box/screenshots/

It uses http://jqueryui.com/datepicker/

[jetonr]

Hi there , I have my date & time picker working on option-tree but there is a problem with jquery-ui css. It changes some layout and fonts when en-queued on the back panel!

[jetonr]

@valendesigns Derek i mentioned the problem before, I have the datepicker type created that adds a calendar but when I enqueue the jquery-ui.css smoothness file, the menu gets some background that looks bad. See the image and let me know if we can find a solution using a scope maybe!

[valendesigns]

It seems odd that WordPress doesn't have a built in Date Picker. We could just include the CSS that is required for the Date Picker and not the entire jQuery UI?

[jetonr]

True, I was searching for a native WordPress Datepicker but there is none. If I can manage to add this one before the weekend can u push it with next patch 2.2.1 ?

[valendesigns]

I've already started working on it, I'll get it to play nice with the rest of the UI. As for including it in 2.2.1, sorry but that's a hotfix branch and this is a new feature. I'm keeping to a stricter branching model so this will be in 2.3.0 out next month.

[jetonr]

Ok no prob. Heres how mine looks like so far. I also included the timepicker and have to style that too.

[valendesigns]

Well I guess you should take point on it since you've gotten that far with the design. Looks good to me! Finish integrating the timepicker and send over a pull request on the wip branch. Thank you @jetonr

[jetonr]

OK, I need couple of hours and its done.
Another question Derek, should i add 2 new types datepicker (only with calendar) and datetimepicker (with both time and calendar) and the css styles I am adding to the end of existing ot-admin.css

[jetonr]

This is my final version. I created a pull request on wip branch.

[valendesigns]

@omid-khd Please do a pull on wip and check that the RTL support for both the date picker and date time picker work as expected.

[omid-khd]

sorry for being a beginner but may i ask what is a pull and what it can do?also i tested the date and time pickers they look good just need to set text indent property to hide next and prev labels.

[jetonr]

@omid-khd check the image bellow, is this how it should look like properly in RTL!
@valendesigns the prev and next button are overlapping sat are sun they need to be hidden and this feature is good2go

[omid-khd]

@jetonr the important thing in rtl languages that have more priority is text therefore it isn't necessary to show date/time picker on right.just negative value of text indent become positive for hiding labels.

[valendesigns]

@jetonr I've updated the CSS and the next & previous buttons should now be fixed.

@omid-khd If you're not yet familiar with git and what a pull is please download the wip branch here https://github.com/valendesigns/option-tree/archive/wip.zip and do your testing in your local WP install. If you need help getting setup for the future please email me and I'll walk you through it. derek[at]valendesigns.com

[valendesigns]

Seems there's a style issue in firefox with the calendar being pushed over a pixel. Looking for a fix now. Chrome looks perfect, as always.

[valendesigns]

OK, firefox should now be fixed.

@omid-khd you are happy then with the rtl support of the date picker?

[jetonr]

only in IE11,IE10,IE9: @valendesigns when i click today in the datepicker the calendar closes and opens again.
IE 8 and below not supported :)

[valendesigns]

@jetonr That sounds annoying. However, I don't have IE11 to test and fix it. Also, it would be a bug with the jQuery Date Picker itself and is something jQuery would need to fix.

Does it insert the date into the input field? As long as it's doing what it's meant to do then it's something we'll have to live with unless you can find a solution.

[jetonr]

@valendesigns yes ie9 does insert the date properly, but have to click outside the calendar to close it.
In ie8 it doesn't show at all when the field is clicked.

[valendesigns]

@jetonr I F'ing hate IE. How about the date time picker?

[jetonr]

@valendesigns Same doesn't show. I hate that ie8 stil has a market share from 6-8% in 2014. We can redirect them to http://theie8countdown.com/ lol

[valendesigns]

Unfortunately IE is a piece of shit regardless of the version. I have yet to be impressed by any of the releases of IE and even though they make nice commercials demonstrating how awesome their browser is, it always falls short in the real world.

I guess first thing to check is if the date picker on the jQuery site works in IE and if it has the same behavior as we're experiencing.

[jetonr]

Already did that. Checked em both and works on jQuery site and the datetimepicker they both work even with ie7

[jetonr]

SCRIPT5009: 'OT_UI' is undefined
SCRIPT1010: Expected identifier
This is console from ie8 @valendesigns

[valendesigns]

Okay then, that's weird. It's probably something to do with the way the JS is written. Unfortunately, you're going to have to fix it. I can help in Skype if you want?

[valendesigns]

You responded at the same time.

[jetonr]

Ok let me know what can i do or skype:jetonr

[valendesigns]

This feature is now considered completed - please comment if you find something wrong. Also, we are dropping support for IE8 at this time.

Thank you @jetonr for contributing your code!

[omid-khd]

@valendesigns rtl version looks good on firefox.
i test it on chrome 32 and labels still exists.

[jetonr]

@omid-khd you have to clear you cache on chrome OR do a ctrl + f5 refresh OR try opening an incognito window and check if the labels are still there. I don't see them after Derek added text-indentation to span.

[omid-khd]

@jetonr it maybe from my cache but i do what you said and still the same.also i test plugin on ie9 (never test it before for date/time picker) and it looks the same.
i dont know maybe something is wrong with my computer.

[jetonr]

@omid-khd check if you have the latest changes: open assets/css/ot-admin.css see if you have the following code starting from line 1621. If not download the file again from
https://github.com/valendesigns/option-tree/archive/wip.zip

.ui-datepicker-prev span, 
.ui-datepicker-next span {
    text-indent: -9999px;
}

[jetonr]

You were right @omid-khd they still show even with text-indent:-9999.
@valendesigns i replaced text-indent with display:none for ui-datepicker-prev span and it doest the trick on ie, safari, chrome, firefox

[valendesigns]

@jetonr & @omid-khd it's been updated to display: none; on the wip branch. Cheers!

[victoras]

How to change the date format?

[jetonr]

@victoras i just added a filter to modify date format. Maybe @valendesigns will add it to the upcoming 📦 hot-fix. If you want to use it now see my latest pull-request on option-tree.

The function to change date_format:

function jrweb_ot_date_format( $date_format ) {

    return $date_format = 'd M, y';
}
add_filter('ot_date_format', 'jrweb_ot_date_format', 10, 1);

To see avaliable dateformats for jquery ui datepicker refer to http://api.jqueryui.com/datepicker/#utility-formatDate

[victoras]

Thanks @jetonr