3

I have tried to implement the date picker in android. I want it to get the data and show it in the text format

  <html>
  <head>
    <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
  <script type="text/javascript" charset="utf-8">

  function dateTest() {
      var myNewDate = new Date();

      window.plugins.datePicker.show({
          date : myNewDate,
          mode : 'date', // date or time or blank for both
          allowOldDates : true
      }, function(returnDate) {
        var newDate = new Date(returnDate);
            currentField.val(newDate.toString("dd/MMM/yyyy"));

            // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
            currentField.blur();
      });
  }
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
     <input type="button" onClick ="dateTest()" value ="Today's Date!!" />
     <div id="view"></div>
</body>
</html>

I am getting it as an alert...but unable to store it as a string on the same page

5 Answers 5

7

Why loose ur head?

A <input type="date"> will allways deppend on device's interpretation of it, in some android devices it doesn't even work,

There is plenty of plugins, addons, whatever, for it,

I personally like, and use mobiscroll: Link

Edit: Mobiscroll is now paid but there are loads of free frontend mobile frameworks and probably all of them have a datepicker, such as jQuery Mobile-datepicker.

8
  • Enoque Duarte,yeah i have checked the demo. I noticed that you are unablw to select the date on the SATURDAY and SUNDAY? why is it?
    – user
    Jun 21, 2013 at 9:37
  • i have a confusion,should we copy the files from here? what all should we have? i remeber..i saw this site yesterday..stating it needs the particular JS and some zepto JS and all...but I am unable to find that page,now..please guide me!!
    – user
    Jun 21, 2013 at 9:41
  • 1
    sure no problem, the js's and .css you have to include deppends on the datepicker style you choose, also you need to include jquery+jquerymobile, You can download all files here: github.com/acidb/mobiscroll , Check the index.html, keep the <header>, remove all the body, and then paste the html + js from the costumized datepicker you did at demo.mobiscroll.com/datetime now look to the header, and per example, if you're not using translations, you can delete all xx.i18n.xx files, then if you're using iOS styling, you can delete the android .css and .js, etc Jun 21, 2013 at 9:52
  • what is translations? I am gonna use only for android
    – user
    Jun 21, 2013 at 11:42
  • 2
    translations is the feature to translate date months to another language, such as spanish, french, etc, You cant select saturday and sunday because of the current settings on javascript code, watch the following line: invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },, the invalid property is defining that day 0 (sunday) and day 6 (saturday) are invalid to pick Jun 21, 2013 at 13:25
2

It seems that your currentField is undefined. Did you check the chrome console before running it on AVD ? Pls try to post the element in which you are trying to display the date as well.

For now, I am assuming that you are trying to do what the following code does

$('.nativedatepicker').focus(function(event) {
            var currentField = $(this);
            var myNewDate = new Date(Date.parse(currentField.val())) || new Date();

            // Same handling for iPhone and Android
            window.plugins.datePicker.show({
                date : myNewDate,
                mode : 'date', // date or time or blank for both
                allowOldDates : true
            }, function(returnDate) {
                var newDate = new Date(returnDate);
                var newString = newDate.toString();
                newString = newString.substring(0,15);
                currentField.val(newString);
                // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
                currentField.blur();
            });
        });

The element is as follows

<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>

Works like a charm !! Hope it helps !!

2

What I want to happen is simple - I just want a datepicker to display when I click a certain field.

However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.

The documentation from the plugin is incomplete.

I found a solution from this test project. Steps are as follows:

  1. Pre-requisite: phonegap/cordova-cli installed
  2. Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
  3. Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
  4. Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
  5. Add the ff. to index.html code:

Note: The datepicker won't show when you test it in your browser

....
    <div class="form-group">
      <label>Appointment</label>
      <input type="text" class="form-control datepicker" id="appointment">
    </div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function () {
            $(document).on('click', '.datepicker', function () {
                showDatePicker($(this), 'date');
            });

            $(document).on('click', '.timepicker', function () {
                showDatePicker($(this), 'time');
            });

            $(document).on('click', '.datetimepicker', function () {
                if (device.platform === "Android")
                    showDateTimePicker($(this));
                else
                    showDatePicker($(this), 'datetime');
            });
        });
    })(jQuery);
</script>
1
  • I'm using input type date for android in ionic app. It works fine but I make this input as hidden and firing click event when user click on div so it's not working. any idea?
    – Jay Shukla
    Nov 29, 2015 at 17:51
1

This is my working implementation. Input type is text, readonly.

$('.nativedatepicker').focus(function(event) {
        var currentField = $(this);
        var myNewDate = new Date();
        window.plugins.datePicker.show({
            date : myNewDate,
            mode : 'date',
            allowOldDates : true
        }, function(returnDate) {
            var array = returnDate.split("/");
            var day = array[2], month = array[1];
            if (day <= 9)
                day = "0" + day;
            if (month <= 9)
                month = "0" + month;
            currentField.val(array[0] + "/" + month + "/" + day);
            currentField.blur();
        });
    });
3
  • ok,Is there a mistake in the code have executed? anyways will try on this code and let you know.
    – user
    Jun 21, 2013 at 8:33
  • witpok,could you tell me how does it work...i have this in my HTML <input type="text" class="nativedatepicker"/> I just get a Text box and i am able to enter alphabets too.
    – user
    Jun 21, 2013 at 8:47
  • you need to add to input attribute readonly="readonly" and I get focus by binding input to touch event. And, by the way, I use this input for android and I replace it on iOS for input type="date". It's not reliable on older android phones, but works pretty well on iOS.
    – witpok
    Jun 21, 2013 at 10:04
1

Why would you want to implement a custom date picker if there is an ative one available ?

You can simply use <input type="date"> to create the commonly known iOS date picker.

For more infos on input fields on mobile devices I suggest: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience

1
  • right now, I don't have any specific want of implementing the datepicker...Yeah , thank you,I can use this <input type="date"> also na..well, my main intention was to have a replica of the same as in android.
    – user
    Jun 21, 2013 at 8:35

Your Answer

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

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