CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
user1697113
user1697113

Reputation: 700

jquery ui date picker with default text in textbox

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

Upvotes: 5

Views: 37851

Answers (5)

Jesus CMD
Jesus CMD

Reputation: 184

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>

Upvotes: 0

dtmiRRor
dtmiRRor

Reputation: 599

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

<script type="text/javascript">
$(function() {
  $('#datePicker').daterangepicker({
      autoUpdateInput: false
 });
</script>

Upvotes: 0

magicmanam
magicmanam

Reputation: 36

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;
    };
});

Upvotes: 0

Allen King
Allen King

Reputation: 2516

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( )});

Upvotes: 0

Erlesand
Erlesand

Reputation: 1535

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

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

Upvotes: 9

Related Questions