[Resolved] Datepicker css

[Author]

Posts

[arnoldd]

Dear,

I want to customize the datepicker style.

I want a placeholder next to the datepicker.
When clicking on this placeholder, the datepicker must be enabled.

I have used the following code: https://toolset.com/forums/topic/datepicker-select-multiple-dates/

However, this does not work 100% with me . After clicking the datepicker appears. However, it disappears within a second.

Also, the emptie html in the other one (i have two: one date before, and one after) gets empty unselected after selecting one of the two.

JS:

( function( $ ) {
$( document ).ready( function(){
// give the empty span some content
$('span.wpv_date_input').html(' ');
// add the click handler
$('span.wpv_date_input').on( 'click', function(e){
$('img.ui-datepicker-trigger').click();

});
});
})( jQuery );

CSS:

span.wpv_date_input {
display: inline-block;
background-color: white;
width: 75%;
border: 1px solid #d5d4cd;
border-radius: 3px;
padding: 0 8px;
}

.well-sm {
text-align: center;
padding-left: 20px;
padding-right: 20px;
}

HTML
<div class="container-fluid">
<div class="row">

<div class="col-md-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="well well-sm">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Datum vanaf[/wpml-string]</label><br>
[wpv-control-postmeta field="wpcf-datum-van" default_date="NOW" url_param="wpv-wpcf-datum-van"]
</div></div></div>

<div class="col-md-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="well well-sm">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Datum tot[/wpml-string]</label><br>
[wpv-control-postmeta field="wpcf-datum-tot" type="date" url_param="wpv-wpcf-datum-tot"]</div>
</div></div>

<div class="col-md-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="well well-sm">
<div class="form-group">
<label>[wpml-string context="wpv-views"]Provincie[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-provincie" type="select" default_label="Alle provincies" url_param="wpv-wpcf-provincie"]
</div></div></div>

</div></div>

[Christian Cox]

Hi, is this available for me to review on your live site somewhere? I will enable private reply fields here if you need to share credentials.

[Christian Cox]

This is a tricky one. I tried to replicate this for a while on my own environment with no luck, then I realized that your View is split up into two shortcodes. The datepicker trigger seems to be having a problem with the View being split up into the search area and the results area. It's not designed to respond to a click on the span tag, so you're seeing some unexpected results there.

If you include both the search and the results together using a single shortcode, the problem seems to be resolved. I have made that change for now. The issue I see is that now the design of the page is a bit off from the original, since the entire View is below the header area. If you'd like, I can offer some additional CSS that may help here. We can set a minimum height on the header and then a negative top margin or something on the View container.

Otherwise, I can submit a request for our developers to look at the issue with clicking the span element - though I'm not sure it will be addressed in a timely fashion, since it's not an intended feature. Let me know what you think.

[arnoldd]

Christian, great work. A tricky one indeed.

But i see you almost made it work. After i select a date in the "datum vanaf" the other html breaks.
This also happens when i press the red cross to delete the date.

Let me think about the css. It's not a big thing. I wil come back on it tomorow. I go to bed now.

Thanks for your great help!

[Christian Cox]

Okay, I resolved that issue by removing the &nbsp from the span and replacing it with a fixed height, then repositioned the icon by giving the span a negative bottom margin. We can play with that if you'd like. I'll be out until Sunday so if you need more immediate attention, feel free to open another ticket and refer here.

[arnoldd]

More than happy! Thanks.