5

is there any way we can have a default text value (not some date but some sort of label, which is displayed inside textbox, but gets changed to selected date if the user selects some date.

// I want the MM/DD/YYYY to be displayed inside text box if no date is selected by user

    <input id="datePicker" value ="MM/DD/YYYY">
    $(function() { 
    $( "#datepicker" ).datepicker( )});

I tried adding a dummy input box with mm/dd/yyyy and showing and hiding the same using focus and blur methods, but its not working, properly. Is there any elegant way to achieve this? Any help is appreciated. PS: I am not using html5 and i need this thing to be working in ie 8 ,9. it should look something like this text box sample

5 Answers 5

8

You can add placeholder="MM/DD/YYYY" inside your <input>,

<input id="datePicker" placeholder="MM/DD/YYYY">

4
  • Thanks for the input since i am not using html5 and i need this solution to be working in ie8 and 9 as well. So place holder would not help me. Aug 7, 2014 at 19:40
  • 1
    I see, in that case you can use a jQuery plugin such as this jQuery Placeholder :)
    – Erlesand
    Aug 7, 2014 at 20:11
  • Thanks, i'll try this plugin, and let you know. Aug 8, 2014 at 3:16
  • Yes, thanks for the heads up and it worked like a charm in IE 8 and IE 9 after using this plugin. I am accepting this as an answer. Aug 8, 2014 at 7:24
0

Add this inside script tags of the HTML page (or onload). This will show current date in the input box. You may use title="Enter MM/DD/YYYY" in the input to show tooltip. If you really want to show MM/DD/YYYY in the text, you may use css background image property. I am not good at css, but I guess it will work (just create one small png with text MM/DD/YYYY.

Date.prototype.formatMMDDYYYY = function(){
        return this.getMonth() + 
        "/" +  this.getDate() +
        "/" +  this.getFullYear();
    }

    var dt = new Date();
    $('#datePicker').val(dt.formatMMDDYYYY());


        $(function() { 
        $( "#datePicker" ).datepicker( )});
2
0

If you want to have unified datepickers' behaviour in all your site, simply override datepicker() function:

$(function () {
    var pickerFn = $.fn.datepicker,
        placeholder = 'MM/DD/YYYY';

    $.fn.datepicker = function () {
        var datePicker = pickerFn.apply(this, arguments);  

        var self = this;
        self.attr('placeholder', placeholder);

        return datePicker;
    };
});
0
<input id="datePicker" placeholder="MM/DD/YYYY">

<script type="text/javascript">
$(function() {
  $('#datePicker').daterangepicker({
      autoUpdateInput: false
 });
</script>
2
  • input[id="datePicker"]? What's wrong with #datePicker
    – worldofjr
    Aug 25, 2016 at 12:20
  • nothing's wrong with that... I initially had in my code input[name=...] so I just copy pasted it and modify to match the example... i modified it :) thanks
    – dtmiRRor
    Aug 25, 2016 at 13:17
0

I have got this solution, init with text type, on click change to date input:

$(document).ready(function () {
    var birthdateInput = $("#details-date");
    // Init
    birthdateInput.attr({
        "type": "text",
        "placeholder": "Birthdate"
    });
    // Detect clic
    birthdateInput.on("click", function () {
        // Verifica input type
        if ($(this).attr("type") === "text") {
            // Cambia a tipo date
            $(this).attr("type", "date");
        }
    });

    // Verify is not empty
    birthdateInput.on("change", function () {
        if ($(this).val() === "") {
            // If empty change to text
            $(this).attr({
                "type": "text",
                "placeholder": "Birthdate"
            });
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row mt-5">
    <div class="col-md-4">
      <input 
        name="birthdate" 
        id="details-date"
        class="form-control"
         type="date"
        />
    </div>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.