This thread is resolved. Here is a description of the problem and solution.
Problem: I'm showing two datepicker fields in my custom search filter. I would like to display a calendar icon next to each text input, and when the user clicks the input I would like the relevant calendar to appear. I added an nbsp to the span.wpv_date_input tag to make it look like a text input field. Now, when the user clicks the input, the datepicker appears then disappears immediately.
Solution:
It is required to use a single shortcode to display both the search form and results in this situation. Then, remove the nbsp from the span and replace it with a set height and width using CSS.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 5 replies, has 2 voices.
Last updated by 7 years, 1 month ago.
Assisted by: Christian Cox.
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>
