Support » Plugin: WP Datepicker » The ‘editable or readonly?’ setting not making field editable.

  • Resolved FeralReason


    I set my Datepicker settings to ‘editable’, and built a custom form. (This is in xampp so I don’t have a link.) Datepicker works great inputting dates. Once converted to the MySQL format, all dates are properly saved to the database. However, when I reload a record to edit it this happens:
    1) At first fields are populated from the database, showing all dates as expected but without showing the datepicker icon.
    2) When I move the mouse cursor into the page, the values in the fields disappear and the datepicker icon appears in each.

    Is there any workaround for this?
    (At the moment, the only solution I can try is eliminate datepicker when editing.)

    • This topic was modified 1 month, 1 week ago by FeralReason.
Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Fahad Mahmood


    I didn’t try this case yet, thank you for reporting this. I will check and respond you soon.

    Thanks for the quick response — looking forward to anything you can find out!

    Plugin Author Fahad Mahmood


    @feralreason please try the latest version and use the following tag for default value.


    <input type="text" data-default="06/18/2020" id="wpdp">

    Fahad – thanks.
    Tried this without success. I tried 4 cases, using value, data-default, and data-default-val (from your code). (html below was copied from chrome dev tools, with minor edits):

    <input name="date1" type="text" id="date1" class="my-datepicker hasDatepicker" <strong>value="2020-06-01"</strong>>
    	Appears and then disappears on mouse move.
    <input name="date2" type="text" id="date2" class="my-datepicker hasDatepicker" <strong>data-default="2020-06-16"</strong> size="25">
    	Never Appears
    <input name="date3" type="text" id="date3" class="my-datepicker hasDatepicker" <strong>data-default-val="2020-07-01"</strong>>
    	Never Appears
    <input name="date4" type="text" id="date4" class="my-datepicker hasDatepicker" <strong>data-default-val="06/18/2020" value="2020-07-16"</strong>>
    	Appears and then disappears on mouse move.

    So neither data-default or data-default-val seems to display the value under any circumstances, except where there is an actual value assignment present also.

    • This reply was modified 1 month, 1 week ago by FeralReason. Reason: Added conclusion
    • This reply was modified 1 month, 1 week ago by FeralReason.
    • This reply was modified 1 month, 1 week ago by FeralReason. Reason: Fixed formatting mistake
    Plugin Author Fahad Mahmood


    I was testing it on demo website, please check and let me know what you see here

    Maybe change() trigger required? Or a proper page refresh would be better.

    That helped. I can display dates when we ‘mouseover body’ now. There still seems to be a “1st Field Duplication” issue. I created a shortcode that shows that and allows a little experimenting (without going to a database). If you like, just add the function somewhere (functions.php?), create a test post, and try it for a few minutes. (Just substitute your wp datepicker class for “my-datepicker”.) You should see that the date in the first field incorrectly duplicates in the 2nd and 3rd field. This must be happening in javascript because developer tools shows dates correctly.

    Editing each field populates the $_POST array properly here. Altho I thought I saw a possible mySql conversion issue that we can’t duplicate in the shortcode without adding database access. However — that issue may have been a side-effect of the duplication issue or my own code.

    /*  Use:  [test_datepicker]  */
    function test_datepicker_shortcode($atts, $content=null){
    		$date1 = $_POST['date1'];
    		$date2 = $_POST['date2'];
    		if (empty($date1)) {
    			echo "date1 is empty<br>";
    		} else {
    			echo "date1 is: ".$date1."<br>";
    		if (empty($date2)) {
    			echo "date2 is empty<br>";
    		} else {
    			echo "date2 is: ".$date2."<br>";
    		if (empty($date3)) {
    			echo "date3 is empty<br>";
    		} else {
    			echo "date3 is: ".$date3."<br>";
    		$date3 = "9/1/2021";
    		$output = "<form id='test_datepicker_form' action = '' method='post'>"; 
    		$output .= "<br>Date1: <input name='date1' type='text' data-default='06/18/2020' class='my-datepicker'>";
    		$output .= "<br>Date2: <input name='date2' type='text' data-default='07/15/2020' class='my-datepicker'>";
    		$output .= "<br>Date3: <input name='date3' type='text' data-default='".$date3."' class='my-datepicker'>";
    		$output .= "<br><br><input type='submit'>";
    		$output .= "</form>";
    add_shortcode('test_datepicker', 'test_datepicker_shortcode');
    • This reply was modified 1 month, 1 week ago by FeralReason.

    Oh – obviously you will have to add $date3 = $_POST['date3']; in the form handler. Copied it before I added that…

    Plugin Author Fahad Mahmood


    Oh, i got it, what’s happening. You are trying to use the same CSS selector for all as a class. I will recheck it and will try to manage it with $(this) instead of the selector itself. That many changes would not be required as you suggested, let me try it once.

    Sounds good!



    You can use multiple instances with new version.
    Working example is available here:



    1) Now works for read/insert/update of MySQL record – if programmers remember to convert dates:
    PHP programmers who are building the form and form handler need to remember: MySQL requires a Y-m-d date format for DATE fields (the most common date format in MySQL.) So when filling in a date for the first time, before doing an INSERT in the database, the date should be converted: “$date1 = date(“Y-m-d”, strtotime($date1)). The same conversion has to be used before an UPDATE.
    Additionally, after retrieving a record from MySQL, before the date can be displayed correctly, it has to be converted to the m/d/y format used by the datepicker, like this: $date1 = date(“m/d/Y”, strtotime($date1));

    2) Could Display of dates happen automatically? :
    Currently the dates don’t display in the fields until the cursor moves out of the address bar and into the body — or if the cursor is already in the body, until it moves at all. This means that when the form first comes up, the date fields may be shown as blanks. Is there a way to display the dates before the cursor moves?

    (Fahad — I extended my shortcode function to test inserting, reading and updating records in a mysql DB. If you want that, send me an email address.)

    Plugin Author Fahad Mahmood


    @feralreason thank you for the detailed feedback here. We cannot exchange our e-mail addresses here but your post will help the developers for sure. You can paste your shortcode here, i will get it work in my plugin if it would be helpful for developers. You can reach me through demo website though. About moving cursor, i will surely check the possibility. There was a reason for which i didn’t render everything automatically, a few cases were having delayed loading and JavaScript based interval was not a good idea to keep checking if files are loaded or page is completed so i can trigger event. Anyways, i will check it.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.