JQuery UI DatePicker stylen ?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Roland -

- Roland -

25/04/2013 12:06:55
Quote Anchor link
Ik gebruik datepicker voor reserveringen, maken afspraken.

Die zijn alleen ma , di en woensdag.


Ik hoef dus niet de hele kalender te zien ,
kan ik de andere dagen helemaal laten verdwijnen/onzichtbaar maken ?


b.v.d.
 
PHP hulp

PHP hulp

24/05/2024 09:00:42
 
G P

G P

25/04/2013 12:13:24
 
- Roland -

- Roland -

25/04/2013 12:25:11
Quote Anchor link
Dank je voor reactie,

echter dat is niet wat ik bedoel (ik weet natuurlijk dat je dagen kan disablen)


Aangezien ik alleen maar 3 dagen ga gebruiken zou het me mooi uitkomen als ik de andere 4 kolommen uit de agenda geheel er uit kan laten verdwijenen !

Een agenda/kalender met 3 kolommen !

Toevoeging op 25/04/2013 12:43:53:

Het begin is er....


Ha ha , ja heel makkelijk:


th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}


Echter nu nog de donderdag, en vrijdag zien te krijgen . ....

??

[edit'] zien WEG te krijgen :-)

Toevoeging op 25/04/2013 13:53:52:

met css: nth-child()
Gewijzigd op 25/04/2013 12:45:10 door - Roland -
 
Kris Peeters

Kris Peeters

25/04/2013 14:37:27
Quote Anchor link
Algemener ... hoe zoek je zelf naar deze oplossing?

Open de website met Google chrome webbrowser, laat de kalender verschijnen.
Rechter-muisklik op het vakje dat je wil veranderen => "Inspect Element"

Dan zie je welke id en class dat vakje heeft; zie je welke css zorgt voor wat ...
En dat overschrijf je dan.

bv.
Waarom is de achtergrond grijs?
In dev tools zie je
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
/* jquery-ui.css */
.ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3;
  background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #555555;
}
...
<a class="ui-state-default" href="#">1</a>


Dus; nu weet je wat je moet doen om dit te veranderen.
( merk op: om css te overschrijven, moet je nieuwe <style></style> onder de oude staan (meer beneden, in de HTML broncode). De laatste waarde die de pagina ziet, wordt genomen)

Overschrijf dat met
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.ui-state-default {
  color: #ffffff;
  background-color: #000000;
}
Gewijzigd op 25/04/2013 14:38:35 door Kris Peeters
 
- Roland -

- Roland -

16/05/2013 18:05:42
Quote Anchor link
.ui-datepicker-calendar tr th:nth-child(1) { display: none !important; }
.ui-datepicker-calendar tr td:nth-child(1) { display: none !important; }

.ui-datepicker-calendar tr th:nth-child(2) { display: none !important; }
.ui-datepicker-calendar tr td:nth-child(2) { display: none !important; }


Ik had dit bedacht om alle maandagen en de dinsdagen uit de agenda te verwijderen . (heb alleen de overige dagen nodig)

Werkt mooi ! een agenda met de 5 overige dagen .... maar alleen niet in IE8 en omdat ik de maten had aangepast voor 5 dagen loopt het dan als een enorme rommel doorelkaar!

Waarom ? IE8 kent nth-child(x) niet .

Daarom ook dit geprobeerd:

$(".ui-datepicker-calendar tr th:nth-child(1)").css("display", "none");
$(".ui-datepicker-calendar tr td:nth-child(1)").css("display", "none");

maar helaas dit doet niets..

Zijn er nog meer mogelijkheden om een paar kolommen van de datapicker te verbergen ?
 
- Roland -

- Roland -

17/05/2013 18:36:39
Quote Anchor link
Bump
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.